带有多个表单的jQuery的Ajax表单提交 [英] ajax form submission with jquery multiple forms

问题描述

遵循此页面上的示例: http://www.formget.com/submit-form-using-ajax-php-and-jquery/我正在将其中一个站点上的表单转换为使用Ajax进行提交，因此使用方式可以使用前进和后退按钮，并且其信息未显示在地址栏中.到目前为止，它在具有单一表单的页面上都有效.但是一页上有多种形式.

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.

campers.php的表格

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:

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

campersub.php

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

问题是，当我单击第一个提交按钮时，没有将表单信息添加到$ _SESSION数组并将浏览器重定向到gear.php，而是没有任何反应.但是，当我单击第二个或第三个提交按钮时，它将页面重定向到campers.php?classa = classone& type = 1.

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.

推荐答案

我修改了一些内容，主要是要记住:"Id属性在文档中必须是唯一的"

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

(即使代码中没有通过id对表单元素的其他引用，也可以删除id属性)因此，我已将ID重命名，因为它们具有唯一的值，然后获取click事件以捕获任何提交的输入

(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

注意:我已经从包含最后单击元素的父级(窗体)中访问了其他元素，因为我不确定这是否是您拥有的整个HTML.

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

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

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...

这篇关于带有多个表单的jQuery的Ajax表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！