Send form data using jquery 'ajax' and html form 'action'

Question

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

the form action is called and the data is sent to a database
also send this form data to another php file using jquery ajax

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

Here's my code:

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());

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.

user400654 · Accepted Answer · 2014-04-23 01:29:37Z

2

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!)

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.

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

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

edited Apr 23, 2014 at 1:29

answered Apr 22, 2014 at 22:47

user400654

95.1k16 gold badges168 silver badges188 bronze badges

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

2 Comments

Anirudh Gooner Over a year ago

1. I tried using $('.parentForm')[0].submit(); but I get "cannot read property 'submit' of undefined" although the data is being posted from only "postdata.php". 2. I moved e.preventDefault inside the if statement and deleted return false but it would still do the same. (only postdata.php works)

user400654 Over a year ago

1. that means your selector is wrong for your form, and would explain why your original code doesn't work. . should be #. Updated Answer :)

Collectives™ on Stack Overflow

Send form data using jquery 'ajax' and html form 'action'

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related