ajax form submission with jquery multiple forms

Question

Following the examples on this page: http://www.formget.com/submit-form-using-ajax-php-and-jquery/ I am converting the forms on one of my sites to use ajax for submission, that way uses can use the forward and back buttons, and their info isn't showing up in the address bar. It's worked so far, on pages that have a single form. But one page has multiple forms on it.

Form from campers.php

<form id="retro1457806069">
<input type="hidden" id="class" name="classa" value="retro">
<input type="hidden" id="type" name="type" value="1">
<input type="submit" id="submit" value="Rent This Camper"></form>

<form id="two1457806069">
<input type="hidden" id="class" name="classa" value="classtwo">
<input type="hidden" id="type" name="type" value="1">
<input type="submit" id="submit" value="Rent This Camper"></form>

<form id="three1457806069">
<input type="hidden" id="class" name="classa" value="classthree">
<input type="hidden" id="type" name="type" value="1">
<input type="submit" id="submit" value="Rent This Camper"></form>

Those are the actual form codes generated by my script (with all the excess text and such removed around them.

script.js:

$(document).ready(function() {
  $("#submit").click(function() {
    var classa = $("#classa").val();
    var type = $("#type").val();
    // Returns successful data submission message when the entered information is stored in database.
    var dataString = 'class=' + classa + '&type=' + type;
    if (classa == '' || type == '') {
      alert("Please Fill All Fields");
    } else {
      // AJAX Code To Submit Form.
      $.ajax({
        type: "POST",
        url: "campersub.php",
        data: dataString,
        cache: false,
        success: function(result) {
          window.location.assign("gear.php")

        }
      });
    }
    return false;
  });
});

campersub.php

<?php
session_start();
$_SESSION["class"]=$_POST["class"];
$_SESSION["type"]=$_POST["type"];
echo "Success.";
?>

The problem is, instead of adding the form information to the $_SESSION array and redirecting the browser to gear.php when I click on the first submit button, absolutely nothing happens. But when I click on the second or third submit buttons it redirects the page to campers.php?classa=classone&type=1 for example.

What is the point of doing AJAX and then redirecting? Instead submit the form are redirect from the server. Also never give anything name or id=submit, lastly if you do insist on Ajax, do $("form").on("submit",function(e) { e.preventDefault(); instead of submit click and return false — mplungjan
– mplungjan, Commented Mar 12, 2016 at 18:17
This is because you can not use the same id values. Your submit buttons all use #submit to trigger. You need to rework this to work on just the class attribute. Anywhere you see the same id, you need to change to class="whatever" then use $(this) to narrow down to the form you are presently acting upon. — Rasclatt
– Rasclatt, Commented Mar 12, 2016 at 18:18
Or not use the submit button event at all! To handle a form submit ,use the form's submit event and preventDefault to stop the submission — mplungjan
– mplungjan, Commented Mar 12, 2016 at 18:21

MikeBau · Accepted Answer · 2016-03-12 19:07:21Z

I have modified some things, having in mind mainly: 'Id attributes must be unique in the document'

(Even, If there are not other references in the code to the form elements by id then the id attribute can be removed) So I have renamed ids as they have an unique value, then I fetch the click event for catch any input submit

NOTE: I have accessed to the other elements from the parent (its form) which contains the last clicked element because I'm not sure if it is the entire HTML you have.

campers.php

<form id="retro1457806069">
<input type="hidden" id="class1" name="classa" value="retro">
<input type="hidden" id="type1" name="type" value="1">
<input type="submit" id="submit1" value="Rent This Camper"></form>

<form id="two1457806069">
<input type="hidden" id="class2" name="classa" value="classtwo">
<input type="hidden" id="type2" name="type" value="1">
<input type="submit" id="submit2" value="Rent This Camper"></form>

<form id="three1457806069">
<input type="hidden" id="class3" name="classa" value="classthree">
<input type="hidden" id="type3" name="type" value="1">
<input type="submit" id="submit3" value="Rent This Camper"></form>

script.js

$(document).ready(function() {
  $("input[type=submit]").click(function(e) {
    // **Accesing by proximty of the last clicked element, and by its name.
    e.preventDefault();
    var classa = $(this).parent('form').find('input[name="classa"]').val();
    var type = $(this).parent('form').find('input[name="type"]').val();
    // Returns successful data submission message when the entered information is stored in database.
    var dataString = 'class=' + classa + '&type=' + type;
    if (classa == '' || type == '') {
      alert("Please Fill All Fields");
    } else {
      // AJAX Code To Submit Form.
      $.ajax({
        type: "POST",
        url: "campersub.php",
        data: dataString,
        cache: false,
        success: function(result) {
          window.location.assign("gear.php")

        }
      });
    }
    return false;
  });
});

I think it must run with these changes...

Collectives™ on Stack Overflow

ajax form submission with jquery multiple forms

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related