Changing Value of a hidden field

Question

I am trying to be able to change the value of a hidden field from multiple combo boxes.

Here is the example, I want to generate the value of the hidden field name="myNumbers" with the three previous select elements delimited by |.

How can I do this? with jQuery changing the .val() or with .attr() or maybe with a simple variable in PHP?

<select name="element1">
  <option value="">Select One</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option selected value="3">3</option>
  <option value="4">4</option>
</select>    
<select name="element2">
  <option selected value="">Select One</option>
  <option value="1">1</option>
  <option selected value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>    
<select name="element2">
  <option selected value="">Select One</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option selected value="4">4</option>
</select>

<input type="hidden" name="myNumbers" value="3|2|4"> 

Answer 1

Here it is http://jsfiddle.net/fuhQx/

Answer 2

This will do what you want...

$(function(){
  var str = $('element1').val() + '|' + $('element2').val() + '|' + $('element3').val()
  $("[name='myNumbers']").val(str)
})

EDIT

A more complete solution that will iterate over every select element on the page

$(function(){
    $('select').change(function(e){
        var myNumbers = [];
        $('select').each(function(){
          myNumbers.push($(this).val());
        })
        $("[name='myNumbers']").val(myNumbers.join('|'));
    });
});

Answer 3

You have to have an onChange function for each drop down that calls updateMyNumbers function

function updateMyNumbers() { 
   $("#myNumbers#").val(("#element1").val() +"|"+("#element2").val()+"|"+("#element3").val());
}

Answer 4

var select = document.getElementById('#element1');
var index = select.selectedIndex;

With this code, you can build the string for the hidden input

Answer 5

If you are wanting to set it once at the time the page is loaded, it would make sense to do it in php (see answers above).

If you want to do it whenever a user changes one of the selects, then you would want to use javascript (jQuery is one good way) to do that in response to an onChange event for any of those selects.

If you just want to do it when the form is submitted, you could also just use javascript (perhaps jQuery in particular) to do it as part of a general form validation for the onsubmit event.

If you want it to happen just prior to using the form values to store something in your database, again you would do it in php once the user has selected things and hit Submit. But then you really don't need the hidden value at all, you can just create it in php after you have the form submitted.

Answer 6

You would have to use javascript as php is run server-side, so before the page is loaded or after it has been submitted.

In text: You would have to capture the change events of the select boxes, generate your string and put that string in the hidden element.

Untested code:

$("select").change(function(){
  var desired_value = $("[name='element1']").val() + "|" + $("[name='element2']").val() + "|" + $("[name='element3']").val();
  $("[name='myNumbers']").val(desired_value);
});