使用jquery'ajax'和html form'action'发送表单数据 [英] Send form data using jquery 'ajax' and html form 'action'

问题描述

提交表单后，我正在尝试为以下两个操作实现表单:

I'm trying to implement my form for the following two actions after it is submitted:

1. 调用表单操作，并将数据发送到数据库
2. 还使用jquery ajax将此表单数据发送到另一个php文件

这就像使用一个按钮，一个表单执行两个动作

It's like performing two actions using a single button, single form

这是我的代码:

tryform.php:

  $(document).ready(function() {
  $("#parentForm").submit(function(e){
  e.preventDefault();
  if (!$('.formSubmitButton').hasClass('submitted'))
    {
      // disable the form to prevent multple clicks
      $('.formSubmitButton').addClass('submitted');
          var $form = $(this);
          var serializedData = $form.serialize();
          request = $.ajax({
           type: "POST",
          url: "postdata.php",
          data: serializedData
      });

      request.done(function(data){
          $('.parentForm').submit();

          // enable the form
          $('.formSubmitButton').removeClass('submitted');
          console.log("Working");
      });
      request.fail(function(){
          console.error("Error occured");
      });
    }
    return false;
});
  });


<!--My Form-->
<form id="parentForm" action="thanks.php">
  First Name:<input type="text" id="firstName" name="firstName"/>
  <br/>Last Name:<input type="text" id="lastName" name="lastName"/>
  <br/><input type="submit" id="formSubmitButton" value="submit" />
  </form>

postdata.php:

$firstname = $_POST['firstName'];
$lastname = $_POST['lastName'];
$lastname1 = $lastname . " from postdata";

//$test_query = "INSERT INTO testuser (firstname, lastname) VALUES ('" . $firstname . "', '" . $lastname . "')";
$test_query1 = "INSERT INTO testuser (firstname, lastname) VALUES ('" . $firstname . "', '" . $lastname1 . "')"; 
$result_test1 = mysql_query($test_query1) or die(mysql_error());

thanks.php:

$firstname = $_POST['firstName'];
$lastname = $_POST['lastName'];
$test_query = "INSERT INTO testuser (firstname, lastname) VALUES ('" . $firstname . "', '" . $lastname . "')";
echo $test_query;
$result_test = mysql_query($test_query) or die(mysql_error());

我现在已经使用了相同的插入sql语句.表单数据是从postdata.php (使用jQuery ajax)插入的，而不是 thanks.php (使用表单操作).理想情况下，我想同时使用它们.

I've used same insert sql statements for now. The form data is being inserted from postdata.php (using jQuery ajax) but NOT thanks.php (using form action). Ideally, I would like to have both of them to work.

推荐答案

第二次调用$('.parentForm').submit()不会执行任何操作，因为您阻止了默认操作并返回了false. (并且因为表单具有ID，而不是类！)

The second call to $('.parentForm').submit() does nothing because you prevented the default action and returned false. (and because the form has an id, not a class!)

为避免这种情况，请使用表单的Submit方法，而不要再次触发Submit事件.

To avoid this, use the form's submit method rather than triggering the submit event again.

$('#parentForm')[0].submit();

这将导致表单提交而不会触发任何提交事件处理程序.

this will cause the form to submit without triggering any submit event handlers.

(您现在可以删除提交的类和if语句)

(you can now get rid of your submitted class and if statement)

或者，只需将e.preventDefault移至if语句中，然后删除return false.

Alternatively, simply move your e.preventDefault inside the if statement and remove the return false.

这篇关于使用jquery'ajax'和html form'action'发送表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！