Help getting value from a drop down field

mtcbells · 11-12-2012, 05:45 PM

I have a form where I am collecting information from prospective clients. One of the fields is "County" wherein I have listed all the counties that I provide services, and the cost for that county. When they choose their county from the drop down list, I would like a hidden field called "County_Cost" to automatically be populated with the correct amount. Even if they go back and choose a different county, that field should update. That way, when they're done entering all their information, and they click submit, a contract is sent to them with the correct total.

In my drop down list, I currently have each county listed like "Wake,46" and then another county is "Franklin,75" and so on. The number after the comma is obviously, the cost for that county.

Any help would be greatly appreciated. I'm not that good at Java and just don't have time this week to do the research.

Brandnew · 11-12-2012, 06:10 PM

Are you asking this for Java or JavaScript?

Riku · 11-12-2012, 06:58 PM

Something like this?

Code:

<script src="http://code.jquery.com/jquery-latest.js"></script>

<select>
<option id="country_and_cost">Select country</option> 
<option value="27">Argentina</option> 
<option value="95">Australia</option> 
<option value="150">Austria</option>
</select>

<input type="text" id="cost" readonly="readonly" value="" />

<script type="text/javascript">
// <![CDATA[
	$(document).ready( function() { 
	var selection = 0;
	$('select').change(function() {
	selection = $(this).val();
	$('#cost').val('Cost = ' + selection);
	});
	})
// ]]>
</script>

Hope this helps.

-Riku

Philip M · 11-12-2012, 07:05 PM

Assuming that you mean Javascript (a totally different language to Java in spite of the confusingly similar names):-

Code:

<select id = "counties" onchange = "showvalue()">
<option value = "0"> Chose a county</option>
<option value = "46">Wake</option>
<option value = "75">Franklin</option>
</select>
<br><br>
<input type = "text" id = "County_Cost">

<script type = "text/javascript">

function showvalue() {
document.getElementById("County_Cost").value = ""; // reset the field
var val = document.getElementById("counties").value;
if (val != 0) {
document.getElementById("County_Cost").value = val;
}
}

</script>

Change the County_Cost field to hidden after testing.

Riku's code uses jQuery. You did not specify that, and in any case it is silly to download the large overhead of a Javascript framework to accomplish something so simple.

The value of a select list is simply obtained with
var val = document.getElementById("counties").value;
No need for any reference to selectedIndex.

Quizmaster: Which surname was shared by a historical outlaw called "Butch" and a fictional cowboy called "Hopalong"?
Contestant: Lesbian.

Brandnew · 11-12-2012, 07:05 PM

Got this idea from http://www.codeproject.com/Articles/...-list-selectio

Code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

function update(selection){
var choice = selection.selectedIndex;
document.getElementById("price").innerHTML="Pricing for County is " + selection.options[choice].value;
}

</script>
</head>

<body>
<p id="price" >Select county for pricing</p> 

<form>

<select id="hi" onChange="update(this.form.hi);">
  <option>Select County</option>
  <option value="25.00">This Location</option>
  <option value="50.00">That Location</option>
  <option value="75.00">Some Location</option>
</select>

</form>
</body>
</html>