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

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

});