Link to home
Create AccountLog in
Avatar of arendt73
arendt73

asked on

Javascript select list/menu populates textfield with value

I have a form where a user makes a selection from a List/Menu.  I want to keep the Value exactly the same as the Item Label (I will use this information in a confirmation page).  The Textfield will then be populated with a defined amount from the selection made in the List/Menu.

Below is what I would like to accomplish:

When the 1st option "Member" is selected, the value displayed in the Textfield would be $100.00.  If the 2nd option "Non-Member" is selected, the value displayed in the Textfield would be $150.00.
<html>
<head>
</head>
<body>
<form action="" method="post" name="amount" id="amount">
  <p> 
    <select name="status" id="status">
      <option>select</option>
      <option value="Member">Member</option>
      <option value="Non-Member">Non-Member</option>
    </select>
    <input name="textfield" type="text" size="5" maxlength="5">
  </p>
  <p>Members pay $100.00<br>
    Non-Members pay $150.00</p>
</form>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Hecatonchires
Hecatonchires

Can I ask why you don't have the value (100, 150) as the value of the options?


<select name="status" id="status" ONCHANGE="document.getElementById("textfield").value = this.options[this.selectedIndex].value;">
      <option value="-1">select</option>
      <option value="100.00">Member</option>
      <option value="150.00">Non-Member</option>
    </select>
<input name="textfield" id="textfield" type="text" size="5" maxlength="5">

Open in new window

Avatar of arendt73

ASKER

I do not want values set in the list/menu because this information will be inserted into a db.  I think I need something along the lines of a If Then statement or hidden field option that will display the amounts (100.00 or 150.00) in the text field if a selection is made from the list/menu.
Might have closed this a bit early but how do I remove the text area - "Members pay $100.00 or Non-Members pay $150.00"?  All I need is the top portion (List/Menu and the Textfield).  Thank you.
Hi arendt73,
>>..how do I remove the text area - "Members pay $100.00 or Non-Members pay $150.00"?
Here is the fix:
------------------------
<html>
<head>
<script>
function toggleOpt(){
  var obj=arguments[0];
  var strDisplay='0';
  var objVal=document.getElementById('textfield');

  if(obj.selectedIndex>0){
     if(obj.options[obj.selectedIndex].value=='Member'){
       strDisplay='$100.00';
    }else{
     strDisplay='$150.00';
    }
  }

  objVal.value=strDisplay;
}
</script>
</head>
<body>
<form action="" method="post" name="amount" id="amount">
  <p>
    <select name="status" id="status" onchange="toggleOpt(this);">
      <option>select</option>
      <option value="Member">Member</option>
      <option value="Non-Member">Non-Member</option>
    </select>
    <input name="textfield" id="textfield" type="text" size="5" maxlength="5">
  </p>
</form>
</body>
</html>