0

Hey guys I need my AJAX results to add fields to my FORM, or add a SUBMIT button to complete the form.

My AJAX results display in a DIV which is inside a standard HTML form (from a PHP file). When returned inside FORM tags, can AJAX results (as, say, hidden inputs) be included into the FORM POST??

I'm using a standard JavaScript (adapted from one posted for 'livesearch') to get AJAX results from AJAXresults.php which works fine - my AJAX results DO return OK, its just that my form doesn't work! The javascript is:

function showResult(str)
{
if (str.length<4)
  {
  document.getElementById("suburbmatch").innerHTML="Type more than 4 letters...";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  } 
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("suburbmatch").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","AJAXresults.php?suburbtext="+str,true);
xmlhttp.send();
}

myphp.php includes the form like this: (note the DIV where AJAX results load, inside the FORM tags)

<form action="myphp.php" method="POST">

 <input type="text" name="addressline1">
 <input type="text" name="addressline2">
 <input type="text" name="suburb" onkeyup="showResult(this.value)">

  <div id=suburbmatch></div>  // AJAX results display here

</form>

AJAXresults.php includes a script that queries a database then returns the results as a hidden input field, and a SUBMIT button:

echo ('<input type="hidden" name="suburbID" value="'.$row['ID'].'">');
echo ('<input type="submit" name="submit" value="');
echo ($row['suburb'].' '.$row['state'].' '.$row['zipcode']);
echo ('"><br>');

This code is in the WHILE loop, so 'suburbs' matching the text typed into the "suburb" text input on myphp.php load up as a button displaying the suburb/state/zipcode. When you click it, it should SUBMIT the whole form on myphp.php including the hidden INPUT from the AJAX results.

I could return the results as text and hyperlinking the data with $_GET, like: (a href=myphp.php?result=x) but then it will refresh the page and reset the other form values :P

Improve this question

3 Answers 3

Reset to default
1

The answer is YES!

With AJAX, JavaScript can fetch HTML form elements (like a SUBMIT button or hidden INPUT), or even better, structured data (such as an object, like a JSON string) and then create form elements, and add them into a HTML / PHP form.

Just for the record, this is how I solved my issue:

First, I switched to jQuery to handle the AJAX function using $.get() instead of XMLHttpRequest. This enabled me to handle errors amongst other advantages like better cross-browser compatibility.

And regarding adding the elements into the form, what I actually needed here was user input to choose the matching address before the form is sent (regardless of how the form is sent - later I would indeed use AJAX to perform this function too, using $.post()). Once the user selects the correct address from the list of matching addresses, a hidden input is then created (with the matching address ID number) and a SUBMIT button appears so the user can submit the form.

More detail...

The JavaScript function showResult() is fired onKeyUp when the user types in the suburb field, and returns a list of matching addresses:

// AJAXresults.php code in the WHILE loop:
echo '<li onclick="chooseThisAddress('.$row['ID'].')">'.$row['street'].', '.
$row['suburb'].' '.$row['state'].' '.$row['zipcode'].'</li>';

// which will output, in this example:
<li onclick="chooseThisAddress(64412)">1 Market St, Sydenham NSW 2044</li>
<li onclick="chooseThisAddress(64373)">1 Market St, Sydney NSW 2000</li>

User clicks the correct address, and a new function chooseThisAddress() is fired (with the address ID number passed to it), which simply hides the list of address matches, then creates the hidden input (e.g: <input type="hidden" name="addressID" value="64412">) and a SUBMIT button, both by using jQuery's .append() method (to append the new form elements to the form).

So what was the original problem?

Simply put, the way I was thinking of how the form would work, from the user's point of view, was making me think of having AJAX return a bunch of submit buttons. Since, I have found many ways of doing this differently, but this is how I ended up getting it done so that it was both functional and visually appealing.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

why dont you sumbmit this form via ajax only. This should solve your problem of refresh

Improve this answer

2 Comments

So how will I get my "suburbID" (from the database query) if AJAX just posts the form data? I still need AJAX to return me a list of suburbs, so user can select one suburb. Then the form can be posted.
you can again get it via ajax, then can post your form. you can chain sequence of ajax statement one after another if required.
0

The problem is that you are returning 

echo ('<input type="hidden" name="suburbID" value="'.$row['ID'].'">');

in the WHILE loop. That means that you will have multiple html elements with same name="suburbID" and different values. When you submit the form you will always get the value of the last one that will overwrite the value of others.

Improve this answer

2 Comments

ahhh good point, thanks heaps for that! My form will still not post however :(
I've recreated this sitution quickly here: jsfiddle.net/TvFVY and the form posts normally. The only reasons I can think of is that, in your code, div suburbmatch is outside of the form so it can't submit.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.