CODEWITHSUNDEEP
phpjavascriptajaxformsinput
dean.huczok
dean.huczok

Reputation: 160

Can I use AJAX to add SUBMIT button or hidden INPUT into PHP form?

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

Upvotes: 0

Views: 1311

Answers (3)

dean.huczok
dean.huczok

Reputation: 160

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.

Upvotes: 1

Zagor23
Zagor23

Reputation: 1963

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.

Upvotes: 0

ManMohan Vyas
ManMohan Vyas

Reputation: 4062

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

Upvotes: 0

Related Questions