Submitting Multiple forms to different php files using ajax

Question

I have a page with 3 forms

<form id="form1"  method="post">
  <input type="text" name="name" value="">
  <input type="text" name="city" value="">
</form>

<form id="form2"  method="post">
  <input type="text" name="space" value="">
  <input type="text" name="time" value="">
</form>

<form id="form3"  method="post">
  <input type="text" name="tv" value="">
  <input type="text" name="genre" value="">
</form>

I want to send the forms to different php pages using using the form id in ajax.

here is the script im trying.

<script>
$('#form1').on("submit", function(event){
  event.preventDefault();
  $.ajax({
    url:"form1.php",
    method:"POST",
    data:$('#form1').serialize(),
    beforeSend:function(){
      $('#insert').val("Inserting");
    },
  });
});

$('#form2').on("submit", function(event){
  event.preventDefault();
  $.ajax({
    url:"form2.php",
    method:"POST",
    data:$('#form2').serialize(),
    beforeSend:function(){
      $('#insert').val("Inserting");
    },
  });
});

$('#form3').on("submit", function(event){
  event.preventDefault();
  $.ajax({
    url:"form3.php",
    method:"POST",
    data:$('#form3').serialize(),
    beforeSend:function(){
      $('#insert').val("Inserting");
    },
  });
});

</script>

Is this the right way to do it as I cannot find any examples. Any example or link will be much appreciated.

Update**

enter image description here shows no error

here is the php

<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/core/include/connection.php";
include_once($path);
if(!empty($_POST)){
$name =  mysqli_real_escape_string ($databaseLink,$_POST['name']);
$city=  mysqli_real_escape_string ($databaseLink,$_POST['city']);
$sql = "INSERT INTO form1 SET name='$name' city='$city'";
$sql = mysqli_query($databaseLink,$sql);
}
?>

yeah @cooper, that should work,, did you tested, do you get any errors? — Kresimir Pendic
– Kresimir Pendic, Commented Nov 28, 2017 at 8:57
@cooper Take a look at your xhr section in network tab. The error might be in php part — Pratansyah
– Pratansyah, Commented Nov 28, 2017 at 9:01

Roberto Bisello · Accepted Answer · 2017-11-28 10:19:19Z

1

your approach is not wrong, the script will do what you want, but it is repetitive and if you need to add or remove some form you need to edit your js too. I suggest you to abstract a little the script, making it reusable ;)

$('form.ajax-form').on('submit', function(evt){
  evt.preventDefault();
  var $form = $(this);
  $.ajax({
    url: $form.attr('action'),
    method: $form.attr('method'),
    data:$form.serialize(),
    beforeSend:function(){
      $form.find('.insert').val("Inserting");
    },
    success: function() {
      $form[0].reset();
      $($form.data('modal')).modal('close'); 
      Materialize.toast($form.data('success-message'), 6000, 'rounded') ; 
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="ajax-form" action="form1.php" method="post" data-modal="#modal1" data-success-message="New vendor added">
  <input type="text" name="name" value="">
  <input type="text" name="city" value="">
  <input type="submit" value="save">
</form>

<form class="ajax-form" action="form2.php" method="post" data-modal="#modal2" data-success-message="New space added">
  <input type="text" name="space" value="">
  <input type="text" name="time" value="">
  <input type="submit" value="save">
</form>

<form class="ajax-form" action="form3.php" method="post" data-modal="#modal3" data-success-message="New tv added">
  <input type="text" name="tv" value="">
  <input type="text" name="genre" value="">
  <input type="submit" value="save">
</form>

P.s. remember that as stated in the w3 documentation

If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission, and must submit the form element from the form element itself otherwise. For the purpose of the previous paragraph, an element is a field that blocks implicit submission of a form element if it is an input element whose form owner is that form element and whose type attribute is in one of the following states: Text, Search, URL, Telephone, E-mail, Password, Date, Time, Number

edited Nov 28, 2017 at 10:19

answered Nov 28, 2017 at 9:14

Roberto Bisello

1,22511 silver badges18 bronze badges

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

4 Comments

The Naga Tanker Over a year ago

this works... however a problem arises when I try to close the modal form using

success:function(data){       $('form.ajax-form')[0].reset();       $('#modal1').modal('close');       Materialize.toast('New Vendor Added', 6000, 'rounded') ;     }

. I'm using materializecss and materialize.js from materializecss.com.

Roberto Bisello Over a year ago

don't use $('form.ajax-form')[0].reset() or you will get always the first form, use the variable $form (declared before the call) to always get the right form ;) so something like $form[0].reset(). moreover you can add the modal id and the success message as data params to the form... I've edited the script ;)

The Naga Tanker Over a year ago

what if i use it like this $('.ajax-form')[0].reset();

Roberto Bisello Over a year ago

the problem is the same as before: if you use $('.ajax-form')[0].reset();, you will get an array of ".ajax-form" elements, then you get the first one and reset it (with [0].reset();). The simplest way to get the form is to use a variable before the ajax call exploiting the scope of the variable in the callbacks (as in my example). Otherwise you can add context: this in the ajax's params in order to tell jquery to use the form as context of the callbacks (i.e. you can call $(this)[0].reset() in the success callback)

Collectives™ on Stack Overflow

Submitting Multiple forms to different php files using ajax

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related