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

ASPJavaScriptHTML

Last Comment

David H.H.Lee

8/22/2022 - Mon

ASKER CERTIFIED SOLUTION

David H.H.Lee

2/24/2009

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Hecatonchires

2/24/2009

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

arendt73

2/25/2009

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.

arendt73

2/25/2009

ASKER

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.

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.

rwheeler23

David H.H.Lee

2/25/2009

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>