Question

I have a web page like this:

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

For various reasons, the later inputs and check boxes can’t go in the original form, but when the form is submitted, I want to use jQuery to gather the values from the checkboxes and the other forms, and submit them as a GET request.

Answer 1

To do this as a GET I’d first move the values you need up into some appended, hidden inputs into your form. Then you can call $.get with the data being a serialized version of your newly updated form.

So:

$('#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);
  });

});

Note: this requires that you have some name attributes on you inputs in ‘more-inputs’