Question

这是我的新手，我在页面上有两个表单相同的实例，我想通过Jquery提交。我修改了一些教程，但似乎只有第一种形式是通过我的方法处理的。

我尝试使用不同的提交ID，但是该函数不会触发，并且不会为每种表单复制脚本-但是我对JS不熟悉，因此无法解决。

表格

<form name=Form1" action="URL" method="post">
<input type="email" size=65 name="Email" id="Email1" required>
<input type="hidden" name="field1" value="y">
<input type="submit" value="submit" name="Submit">
</form>

<form name=Form2" action="URL" method="post">
<input type="email" size=65 name="Email" id="Email2" required>
<input type="hidden" name="field1" value="n">
<input type="submit" value="submit" name="Submit">
</form>

JS函数

<script type="text/javascript">

$(document).ready(function() {

  $('form').submit(function(event) {

    var formData = {
      'field1': $('input[name=field1]').val(),
      'Email': $('input[name=Email]').val(),
    };

    $.ajax({
        type: 'POST',
        url: 'URL',
        data: formData,
      })

      .done(function(data) {
        if (!data.success) {
          window.location = 'THANK YOU URL';
        }
      });

    event.preventDefault();

  });
});
</script>

Answer 1

您获取的formdata不是动态的。与

var formData = {
    'field1': $('input[name=field1]').val(),
    'Email': $('input[name=Email]').val(),
};

您将始终从第一组输入字段中获取值。如果您希望这些值取决于提交的表单，则需要使用$(this) 获取提交的表单并找到相应的输入字段：

$(document).ready(function() {

  $('form').submit(function(event) {

    event.preventDefault();

    var formData = {
      'field1': $(this).find('input[name=field1]').val(),
      'Email': $(this).find('input[name=Email]').val(),
    };

    console.log(formData);

    $.ajax({
        type: 'POST',
        url: 'URL',
        data: formData,
      })

      .done(function(data) {
        if (!data.success) {
          window.location = 'THANK YOU URL';
        }
      });


  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="Form1" action="URL " method="post ">
  <input type="email" size=65 name="Email" id="Email1" required>
  <input type="hidden" name="field1" value="y">
  <input type="submit" value="submit" name="Submit">
</form>

<form name="Form2" action="URL" method="post">
  <input type="email" size=65 name="Email" id="Email2" required>
  <input type="hidden" name="field1" value="n">
  <input type="submit" value="submit" name="Submit">
</form>

同一页上的两种表单-通过jquery提交

1 个答案: