Ajax发布表单在加载时自动提交

Question

I'm trying to post a form to a database using ajax. I have tested the form and the php which all work when I manually submit. But the issue I have is when I try to auto-submit on page load using ajax it just doesn't seem to fire.

I don't get any console errors and the form does get removed. It is just the ajax that doesn't kick in.

 setTimeout(function() { $("form.display-hide").submit(function(e) { e.preventDefault(); $.ajax({ url: '//www.mysite.com/inc/page-trustpilot.php', type: "POST", data: $(this).serialize(), success: function() { alert('hello'); } }); // AJAX Get Jquery statment }); $("form.display-hide").remove(); }, 2000); 

 <form class="display-hide" method="post"> <input class="totaltrsut" type="text" value="" name="totaltrsut"> <input class="totalreviews" type="number" value="" name="totalreviews"> <input type="hidden" name="token" value="<?php echo $newToken; ?>"> <input class="committodb" type="submit" value="Add Stats"> </form> <?php if (!empty($_POST)) { global $wpdb; $successa=$wpdb->update( '6H921_dc_additional', array( 'addi_value' => $_POST['totaltrsut'] ), array( 'addi_id' => 1 ), array( '%s', '%d' ), array( '%d' ) ); $successb=$wpdb->update( '6H921_dc_additional', array( 'addi_value' => $_POST['totalreviews'] ), array( 'addi_id' => 2 ), array( '%s', '%d' ), array( '%d' ) ); if($successa && $successb){ //echo 'data has been saved'; } else { //echo 'data has not been saved'; } } ?> 

Answer 1

it seems that you removing the form, before you submit it:

setTimeout(function() {
    //registering submit handler
    $("form.display-hide").submit(function(
         //some code
     });

     //removing the form immediatly
     $("form.display-hide").remove();
}, 2000);

Maybe you want to submit the form before removing it:

setTimeout(function() {
    //registering submit handler
    $("form.display-hide").submit(function(
         //some code
     });

     //submit the the form, which would invoke the submit handler
     $("form.display-hide").submit();

     //removing the form immediatly
     $("form.display-hide").remove();
}, 2000);

Answer 2

You need to trigger the submit listener on your form. Give the following a try

setTimeout(submitForm, 2000);

function submitForm(){

$("form.display-hide").submit(function(e) {
    e.preventDefault();
    $.ajax({
      url: '//www.mysite.com/inc/page-trustpilot.php',
      type: "POST",
      data: $(this).serialize(),
      success: function() {
        alert('hello');
      },
      complete: function(){ $("form.display-hide").remove(); }
    }); // AJAX Get Jquery statment

  });
  $("form.display-hide").trigger('submit');
}

Answer 3

This:

$("form.display-hide").submit(function(e) {
  e.preventDefault();
  $.ajax({
  url: '//www.mysite.com/inc/page-trustpilot.php',
  type: "POST",
  data: $(this).serialize(),
  success: function() {
    alert('hello');
  }
}); // AJAX Get Jquery statment

will not submit the form. $().submit() is an event handler, it does not trigger form submission.

Use .trigger() to cause the form to submit and register the handler for the submit event before calling setTimeout like this:

$("form.display-hide").submit(function(e) {
    e.preventDefault();
    $.ajax({
      url: '//www.mysite.com/inc/page-trustpilot.php',
      type: "POST",
      data: $(this).serialize(),
      success: function() {
        alert('hello');
      }
    }); // AJAX Get Jquery statment

Now that you've registered the event handler you can go on and call setTimeout

setTimeout(function(){
    $('form.display-hide').trigger();
}, 2000);