ajax woes. Submitting without refreshing. I need help.

Question

I'm having problems submitting my ajax form. I am used to the old fashioned way with refresh but this new stuff is beyond me for the time being. It's time to start learning new technolohies.

I have an autosuggest box that is getting my results from a database and populating the textbox just fine. When I designed this about 6 months ago, I was searching the database on the value rather than the key value. This is a problem today and needs to be fixed.

WHat the ajax has returned to my script is the key/value pair. Now that I have the id, I need to pass that into my php method so I can process it from there.

Can somone please give me a hand with this? It seems simple enough but again, javascript was never my thing so I am lost.

Here is all of the relevant code. Also, I don't think, at least from the code samples I have seen so far that I even need a form tag. Am I correct on this? Ideally, I want to submit the found ajax value with the enter button and NOT using a button.

So, just to clarify, this is what happens. The user types 2 or 3 letters. The ajax queries the db on a "LIKE" operator and returns the matches. The user chooses the one he wants and then the id goes out to my method and returns the exact record in a different window.

<form method="post" class="hdrForm" id="search" action="../../index.php?cer=2" target="_top">
<input type="text" name="string" class="hdrInput" id="string" value="Quick Search"><div id="acDiv"></div>

</form>

---

Note.. I need the "id" in this function to be submitted. Right now, I am getting the POST val off the form tag and that's not correct but how?

  AC.chooseFunc = function(id,label)
  {
    document.forms.search.submit();
  }

Thanks for any help that you guys can give me on this.

Answer 1

document.getElementById("search").onsubmit = function() {
    // Do what you want with the form
    return false; // Stops submit continuing
}

This also degrades gracefully (if your server side program is written right) in that users without javascript get the form submitted normally to the page in the action attribute, without the AJAX.

I'd suggest you use a framework such as jQuery. A basic tutorial (including AJAX) is available

Answer 2

Take a look at jQuery. It is a javascript library. It contains functionality for doing Ajax.

• jQuery Ajax documentation.

Answer 3

You have two problems. One is that you are telling the form to submit:

document.forms.search.submit();

That is what is causing your form to submit in the standard, non-xhr way - causing a refresh. Also, because your form does not contain an input element for the id, that is not being sent to the server even with a regular form submission.

I agree with the posters that it would be a good idea to use jQuery or something to do your ajax based submission. Something like this could be used inside of your "AC.chooseFunc" function instead of the form submit.

And yes, if you go ajax entirely, you don't even need a form tag.