Представление формы ajax с несколькими формами jquery

Question

Следующие примеры на этой странице: http://www.formget.com/submit-form-using-ajax-php-and-jquery/ Я конвертирую формы на одном из своих сайтов, чтобы использовать ajax для отправки, таким образом, использование может использовать кнопки вперед и назад, а их информация isn показывается в адресной строке. Он работает до сих пор на страницах с одной формой. Но на одной странице есть несколько форм. .

Форма от 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> 

тех фактические форм коды, генерируемая моего сценарий (со всем избыточным текстом и таким удален вокруг них

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."; 
?> 

Проблема заключается в том, что вместо добавления информации о форме в массив $ _SESSION и перенаправления браузера на gear.php, когда я нажимаю на первую кнопку отправки, абсолютно ничего не происходит. Но когда я нажимаю на вторую или третью кнопки отправки, он перенаправляет страницу на campers.php? Classa = classone & Тип = 1, например.

Answer 1

Я изменил некоторые вещи, имея в виду, главным образом: «Id атрибуты должны быть уникальными в документе»

(Даже, если нет других ссылок в коде элементов формы по идентификатору, то идентификатор атрибут может быть удален) Итак, я переименовал идентификаторы, так как они имеют уникальное значение, затем я получаю событие click для catch any input submit

ПРИМЕЧАНИЕ. Я получил доступ к другим элементам из родителя (его формы), который содержит последний элемент с кликом, потому что я не уверен, что это весь HTML-код, который у вас есть.

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

Я думаю, что он должен работать с этими изменениями ...