Как переопределить кнопку отправки и собрать данные формы

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-input'

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 правильно разрешает часть, касающуюся переопределения отправки, но на самом деле вам не нужно перемещать элементы в форму.

jQuery может напрямую сериализовать эти входы внутри div . Вам просто нужно предоставить селектор для получения каждого из этих входов (как описано в этот ответ ). А 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);
  });
});

Примечание: этот ответ также требует наличия некоторых атрибутов имени на ваших входах (как в «больше входов», так и внутри формы).

Возможно, вы захотите проверить, что serialize возвращает, с помощью следующего фрагмента кода:

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

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