I've form that submit data to external URL and the same time I want to save in my database. I've tried ajax submit and try to sumbit normal POST in ajax success.

Here my code:

<form action="/post" method="post" id="myfrom">
.....
....
</form>

<script>

 $('#myfrom').submit(function() {
  e.preventDefault();
     $.ajax({
              url: 'admin-ajax.php', 
              type: 'POST', 
              dataType: 'html', 
              data: $('#myfrom').serialize(), 
              success: function() {
                   $('#myfrom').submit();
              },
              error: function(e) {
                  console.log(e);
              }
          }); 
  });
</script> 

But here Ajax is not working form will submit normal post only.

I've form that submit data to external URL and the same time I want to save in my database. I've tried ajax submit and try to sumbit normal POST in ajax success.

Here my code:

<form action="http://www.blabla/post" method="post" id="myfrom">
.....
....
</form>

<script>

 $('#myfrom').submit(function() {
  e.preventDefault();
     $.ajax({
              url: 'admin-ajax.php', 
              type: 'POST', 
              dataType: 'html', 
              data: $('#myfrom').serialize(), 
              success: function() {
                   $('#myfrom').submit();
              },
              error: function(e) {
                  console.log(e);
              }
          }); 
  });
</script> 

But here Ajax is not working form will submit normal post only.

• javascript
• php
• jquery
• ajax
• forms

• what do you get in console.log? and did you print the data you get in your php page? – Indra Commented May 29, 2014 at 12:17
• 2 a normal post is a whole new page request. You have to prevent submit from executing before making the ajax call. – Rob Schmuecker Commented May 29, 2014 at 12:17
• try return false..instead of e.preventDefault(); and make sure you don't have any errors – harikrish Commented May 29, 2014 at 12:18
• tried return falseinstead of e.preventDefault(); but now ajax request going in infinite loop – Miuranga Commented May 29, 2014 at 12:29

3 Answers 3

change this:

$('#myfrom').submit(function() {

to this:

$('#myfrom').submit(function(e) {

You have not passed the event in the argument so form gets submitted.

This is another way as i see:

$('yourButton').on('click', function(e){
    e.preventDefault(); // stops the buttons behavior
    $.ajax({
         url: 'admin-ajax.php', 
         type: 'POST', 
         dataType: 'html', 
         data: $('#myfrom').serialize(), 
         success: function() {
             $('#myfrom').submit(); // submits the form if success
         },
         error: function(e) {
             console.log(e);
         }
    });
});

<script>
   $('#postData').click(function(e) {
       e.preventDefault();
       $.ajax({
              url: 'admin-ajax.php', 
              type: 'POST', 
              dataType: 'html', 
              data: $('#myfrom').serialize(), 
              success: function() {
                   $('#myfrom').submit();
              },
              error: function(e) {
                  console.log(e);
              }
        }); 
    });
</script> 

<form action="http://www.blabla/post" method="post" id="myfrom">
<input type="button" value="post" id="postData">
</form>

you try this one. make a button in place of submit button.

return false after ajax call to stop the normal form submit like this:

$('#myfrom').submit(function() {                     
      $.ajax({
              url: 'admin-ajax.php', 
              type: 'POST', 
              dataType: 'html', 
              data: $('#myfrom').serialize(), 
              success: function() {
                    $('#myfrom').submit();
              },
              error: function(e) {
                    console.log(e);
              }
          });
     return false; 
});