dropdown onchange help

[MDanz]

Onchange of the dropdown list, the textfield should display either "testing 3" or "testing 4" but nothing is happening.

 

<form action='submit.php' method='POST' name='form'>
    <select name='preset' onchange='preset(this);'>
       <option value='test1'>testing 1</option>
       <option value=test2'>testing 2</option>
   </select>

<input type='text' name='big[]' value='' />

</form>

 

function preset(ele) {

if(ele=="test1") {
  var action1 = "testing 3";
} else {
  var action1 = "testing 4";
}

  document.form."big[0]".value = action1;

}

[.josh]

Okay so there's a couple different things wrong here.

 

<select name='preset' onchange='preset(this);'>

 

You name your select field and your function the same thing.  In some browsers this won't work, because the name attribute will be made into a global property and overwrite your function.  So you need to use a different function name, or else a different name attribute value for your select.

 

<option value=test2'>testing 2</option>

 

You have a typo, you are missing a quote.

 

<input type='text' name='big[]' value='' />

 

I assume that overall you have more than one input field and are using big[] to to have an array of values, server-side.  It's okay as-is, as far as your server-side code is concerned, because php automatically takes it and indexes it.  But as far as client-side is concerned, when trying to reference it later, that's not going to work out.  As far as client-side is concerned, you are naming lots of elements the same thing.  So this needs to be changed to explicitly define the element index.  So instead of 'big[]' you must do 'big[0]' (and also explicitly define other ones you have, like  'big[0]', 'big[1]',  'big[2]', etc...) 

 

if(ele=="test1") {

 

so when you call preset(this) in your onchange, this is an object reference to the element, so in your function, ele is an object.  if you want to check and see if the selected value is "test1", you need to use ele.value

 

document.form."big[0]".value = action1;

 

This is not the right way to reference the form input value.  Normally it would be without quotes, as in document.form.big[0].value  except that that won't work in this case, because of the [0].  So if it were just "big" you would do document.form.big.value.  But since you are making it an array, you have to reference it like document.form["big[0]"].value

 

Overall, here is what your code should look like:

 

 

<form action='submit.php' method='POST' name='form'>
  <select name='preset' onchange='presetX(this);'>
    <option value='test1'>testing 1</option>
    <option value='test2'>testing 2</option>
  </select>

  <input type='text' name='big[0]' value='' />
</form>

<script type='text/javascript'>
function presetX(ele) {
  if(ele.value=="test1") {
    var action1 = "testing 3";
  } else {
    var action1 = "testing 4";
  }
  document.form["big[0]"].value = action1;
}
</script>