Question

I have a form that I am using AJAX to pass values with. The form is somewhat dynamic depending on the new fields a user can add inside of the backend. I’ve ended up with something kind of hideous like this:

  var collected = {     
      1 : $('#wpsc_checkout_form_1').val(),          
      2 : $('#wpsc_checkout_form_2').val(),
      3 : $('#wpsc_checkout_form_3').val(),
      4 : $('#wpsc_checkout_form_4').val(),
      5 : $('#wpsc_checkout_form_5').val(),
      6 : $('#wpsc_checkout_form_6').val(),          
      7 : $('#wpsc_checkout_form_7').val(),          
      8 : $('#wpsc_checkout_form_8').val(),
      9 : $('#wpsc_checkout_form_9').val(),
      10 : $('#wpsc_checkout_form_10').val(),
      11 : $('#wpsc_checkout_form_11').val(),          
      12 : $('#wpsc_checkout_form_12').val(),
      13 : $('#wpsc_checkout_form_13').val(),
      14 : $('#wpsc_checkout_form_14').val(),
      15 : $('#wpsc_checkout_form_15').val(),
      16 : $('#wpsc_checkout_form_16').val(),          
      17 : $('#wpsc_checkout_form_17').val(),          
      18 : $('#wpsc_checkout_form_18').val(),
      19 : $('#wpsc_checkout_form_19').val(),
      20 : $('#wpsc_checkout_form_20').val(),          
      21 : $('#wpsc_checkout_form_21').val(),          
      22 : $('#wpsc_checkout_form_22').val(),
      23 : $('#wpsc_checkout_form_23').val(),
      24 : $('#wpsc_checkout_form_24').val(),
      25 : $('#wpsc_checkout_form_25').val(),
      26 : $('#wpsc_checkout_form_26').val(),          
      27 : $('#wpsc_checkout_form_27').val(),          
      28 : $('#wpsc_checkout_form_28').val(),
      29 : $('#wpsc_checkout_form_29').val(),
      30 : $('#wpsc_checkout_form_20').val(),          
      31 : $('#wpsc_checkout_form_31').val(),          
      32 : $('#wpsc_checkout_form_32').val(),
      33 : $('#wpsc_checkout_form_33').val(),
      34 : $('#wpsc_checkout_form_34').val(),
      35 : $('#wpsc_checkout_form_35').val(),
      36 : $('#wpsc_checkout_form_36').val(),          
      37 : $('#wpsc_checkout_form_37').val(),          
      38 : $('#wpsc_checkout_form_38').val(),
      39 : $('#wpsc_checkout_form_39').val(),
      40 : $('#wpsc_checkout_form_40').val(),              
      41 : $('#wpsc_checkout_form_41').val(),          
      42 : $('#wpsc_checkout_form_42').val(),
      43 : $('#wpsc_checkout_form_43').val(),
      44 : $('#wpsc_checkout_form_44').val(),
      45 : $('#wpsc_checkout_form_45').val(),
      46 : $('#wpsc_checkout_form_46').val(),          
      47 : $('#wpsc_checkout_form_47').val(),          
      48 : $('#wpsc_checkout_form_48').val(),
      49 : $('#wpsc_checkout_form_49').val(),          
      }

Can someone suggest a cleaner way of doing this, that would also account for any numbers higher than 49 if they do at some point get created by the user.

Answer 1

If you really must use object for this purpose, and your input val ID has that format, you can:

var collected = {};
$('input[id^=wpsc_checkout_form_]').each(function(i) {
   collected[i] = $(this).val();
});

$.post('/your/url', collected, function(resp) {
   // handler
});

Or you can use .serialize()

$('#formId').serialize()

http://api.jquery.com/serialize/

The .serialize() method creates a text string in standard URL-encoded
notation. It operates on a jQuery object representing a set of form
elements. The form elements can be of several types

Then in your ajax:

$.post('url.php', $('#formId').serialize(), function(responseText) {
   // handler
});