使用Ajax生成提交按钮不提交表单数据

Question

Resolved: I had $_SERVER['REQUEST_METHOD'] != 'post' as lowercase. That has to be capital apparently... It worked as soon as I capitalized it, and that was the only change. I voted you up for you fine chaps who helped. Thanks!

I'm generating a submit button after a simple math question with Ajax. The Ajax works fine. I can verify with var_dump/print_r that the $_POST and the $_SESSION data is being passed correctly. The submit button is going in the output div like I would expect.

However, when I press the submit button, it reloads the page but it does not trigger a submit. It goes back to the form and the $_POST variable is empty / not set at all.

The submit button is in the form tags. Why is it submitting the form but not the data / how do I get it to work?

I don't think you need the code to answer the question, but nonetheless, here is a simplified version of the code:

// In a server request method block on test.php:
     if( $_SERVER['REQUEST_METHOD'] != 'POST' ){
<form  id="addUserId"  name="addUser"  method="post"  action="test.php" >
<table id="formCreatoraddUserIdTableId"  cellpadding="2"  cellspacing="2"  width="100%" >
    <tr id="formCreatorRowId0" >
        <td valign="top" ><font>3 minus 1: </font></td>
        <td valign="top" ><input type="text"  id="validatorId"  name="validate"  onkeyup="makeAjaxRequest('./ajax/captchaSubmitButtonCheck.php', 'captcha='+encodeURIComponent(document.getElementById('validatorId').value),'captchaOutputDiv', '1');" autocomplete="off"  />          
        </td>
    </tr>
    <tr id="formCreatorRowId1" >
        <td valign="top" ><font></font></td>
        <td valign="top" >
            <div  id="captchaOutputDiv" ></div>
        </td>
    </tr>
  </table>
    <input type="hidden"  name="refreshPostPrevention"  />
</form>
   }else{

     print_r( $_POST ); // will be empty
   }
     // in an ajax file captchaSubmitButtonCheck.php:
<?PHP
if( $_SERVER['REQUEST_METHOD'] == 'POST' ){
    printr( $_POST );
    printr( $_SESSION, 'SESSION' );
    if( $_POST['captcha'] == $_SESSION['captcha'] ){
        echo '<input type="submit" value="Save" />';    
    }else{
        echo '<font class="red">Your math was wrong. Try again.</font>';    
    }
}
?>

     // the JS

function makeAjaxRequest(url, params, output, image) {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if( image == 1 ){
      document.getElementById(output).innerHTML='<img src="./images/template/ajax-loader.gif"></img>'; 
  }
  if(xmlhttp) { 
    xmlhttp.open("POST",url,true); 
    xmlhttp.onreadystatechange = function(){
       if (xmlhttp.readyState == 4) {
         if(xmlhttp.status == 200) {
           document.getElementById(output).innerHTML=xmlhttp.responseText; //Update the HTML Form element 
         }
         else {
            alert("Error during AJAX call. Please try again");
         }
       }    
    }
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send(params); //Posting txtname to PHP File
  }
}

Answer 1

When you use AJAX driven interfaces, you may not want to use a submit button, only display a submit button as a fallback when JS is disabled. Because when you put a submit button inside a form it will always try to submit, unless you explicitely prevent it from doing so by overriding the submit action on the form.

My solution is to just use a normal input type='button' or any element actually that performs the AJAX action onClick, and then submit the form data either with serialization or manually sent the data to the AJAX script. That way you also have more control over what is being sent and how.

//Using jQuery

function ajaxSubmit(){
    var data  = $("form").serialize();
    //Ajax code here
}

<span class='action' onclick='ajaxSubmit'>Send the data</a>

Or overwriting the submit action, with jQuery:

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});