Code. jQuery help - setting the value of a hidden field by using multiple dropdowns

1 to 4 of 4

  1.  
  1.  

    So, I have a form that looks something like the one below. Note that the form user can add table rows dynamically but for simplicity's sake I'm showing three existing rows. Normally there'd be one row to start and then new ones could be added.

    <form>
  <table>
    <tr id="row-1">
      <td>
        <select id="select-1">
          <option value="10">Ten</option>
          <option value-"11">Eleven</option>
        </select>
      </td>
    </tr>
    <tr id="row-2">
      <td>
        <select id="select-2">
          <option value="10">Ten</option>
          <option value-"11">Eleven</option>
        </select>
      </td>
    </tr>
    <tr id="row-3">
      <td>
        <select id="select-3">
          <option value="10">Ten</option>
          <option value-"11">Eleven</option>
        </select>
      </td>
    </tr>
  </table>

  <input type="hidden" name="all-select-values" id="all-select-values" value="" />

  <input type="submit" value="Submit" />

</form>

    What I need to happen is when the form user selects options from the dropdowns in each table row, the value is added to a comma-delimited value in the hidden input "all-select-values". That value would then be sent when the form is clicked.

    So far I've got this which works for just one dropdown but not multiple.

    $(document).ready(function($) {

  var select-values = [];
  $("select[id^=select-]").change(function(e){
    select-values.push( $(this).val() );
    $("#all-select-values").val( select-values.join(',') );
  });

});

    Any ideas?

  2.  
    Bearing in mind that there's a typo in your markup…
    Additionally, keep hyphens out of var names as they'd be treated as subtractions.
    Underscores, yes. Hyphens no.


    I'd be inclined to modularise it, so that the updateValue() function can be called onready, thereby setting a default value for the hidden input based on the default values of the targeted select elements.

    e.g.
    function setHandlers(e) {

    	$('select[id^=select-]').change(updateValue);

    }

    function updateValue() {

    	var select_values = [];
    	$('select[id^=select-]').each(function(e) {
    		if ($(this).val()) select_values.push($(this).val());
    	});
    	$('#all-select-values').val(select_values.join(','));

    }

    $(document).ready(function() {

    	setHandlers();
    	updateValue();	

    });



    Fwiw, I threw in the if ($(this).val()) { … } check so that the function would work if also using multiple="multiple" select elements (which don't have a default selected option), without adding redundant commas/delimiters to the value of the hidden input.
  3.  
    Remove the "-" from select-values. Also, the way you coded it your hidden input field can end up having more values than there are select elements, e.g. when you select "Ten" your hidden field will read "10" and when you change the same drop down to "Eleven" it will read "10,11" and not "11". Not sure this is what you want.
  4.  

    Works a treat. Thanks for the tips too.

1 to 4 of 4

  1.  
 
Sponsors: Digital Agency London