Question

我有一个这样的网页：

<form id="some-form">
   <input type='text'>
   <button type="submit">
</form>
. . . later in the page . . .
<div id="more-inputs">
   <input type="checkbox">
   <input type="text">
</div>

由于各种原因，后面的输入和复选框不能以原始形式出现，但是在提交表单时，我想使用jQuery从复选框和其他表单中收集值，并将它们提交为GET请求。

Answer 1

要以GET执行此操作，我首先将您需要的值移动到表单中的一些附加的隐藏输入中。然后，您可以使用$.get作为新更新表单的序列化版本来致电data。

所以：

$('#some-form').submit(function(e) {
  e.preventDefault();    

  $('#more-inputs input').each(function() {
    var el = $(this);
    $('<input type="hidden" name="' + el.attr('name') + '" />')
        .val(el.val())
        .appendTo('#some-form');
  });

  $.get('http://yoururl.com', $('#some-form').serialize(), function (data) {
      alert('handle your data here: ' + data);
  });

});

注意：这要求您在'more-inputs'中输入一些名称属性

Answer 2

只为您的submit

隐藏event form

$('#some-form').submit(function(){

    // do work
    // do a jquery get or whatever you need to do...
    $.get('myurl.html', function(data) {

    });

    return false; // return false to prevent typical submit behavior

});

Answer 3

您可以截取submit - 事件

$('#some-form').submit(function() {
  // your code goes here
});

Answer 4

isNaN1247's answer正确地解决了有关覆盖提交的部分，但您实际上不必将元素移动到表单中。

jQuery可以直接序列化div中的输入。您只需要提供一个选择器来获取每个输入（如this answer中所述）。 jQuery允许您同时处理表单输入和其他输入：

$('#some-form').submit(function(e) {
  e.preventDefault();

  var requestData = $('#some-form, #more-inputs :input').serialize();

  $.get('http://yoururl.com', requestData, function (data) {
      alert('handle your data here: ' + data);
  });
});

注意：这个答案还要求您在输入中有一些名称属性（在＆more 39输入＆＃39;和表单内）。

您可能希望使用以下代码段测试serialize返回的内容：

＆＃13;

$('#some-form').submit(function(e) {
  e.preventDefault();
  var requestData = $('#some-form, #more-inputs :input').serialize();
  console.log(requestData);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="some-form">
   <input type='text' name="a" value="aaa">
   <input type='text' name="b" value="bbb">
   <button type="submit">submit</button>
</form>
. . . later in the page . . .
<div id="more-inputs">
   <input type="checkbox" name="checked" checked>
   <input type="text" name="d" value="ddd">
</div>

＆＃13;

如何覆盖提交按钮并收集表单数据

4 个答案: