[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 239
  • Last Modified:

I've got a tricky JQuery or Javascript question manipulating a select field list value and a total var value.

Please see code section...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<script type="text/javascript">
function doSomething() {

}	
</script>

<body>
<select name="mySelectField" onChange="doSomething();">
	<option value="Option 1, 5.00">Option 1</option>
	<option value="Option 2, 10.00">Option 2</option>
    <option value="Option 3, 15.00">Option 3</option>
</select>

MY Total Value: Would equal 100.00 + FORM.mySelectField list value as it's changed. So if option 1 was picked it would be 5.00 + 100.00 and so on. I'm just not getting it with the list value. 
</body>
</html>

Open in new window

0
brihol44
Asked:
brihol44
  • 4
1 Solution
 
ansudhindraCommented:
Check the below code...
let me know anything more needed.

 Test.html
0
 
BadotzCommented:
First thing I'd do is pass a reference to the select object to the function, and change the value of each option.
Then change the function:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<script type="text/javascript">
function doSomething(sel) {
    document.getElementById("").innerHTML = 100 + sel.option[sel.selectedIndex].value;
}	
</script>

<body>
<select name="mySelectField" onChange="doSomething(this);">
<option value="5.00">Option 1</option>
<option value="10.00">Option 2</option>
<option value="15.00">Option 3</option>
</select>
<div id="div_total_value"></div>
</body>
</html>

Open in new window

0
 
BadotzCommented:
ansudhindra:
FYI: It is better to include your code within the question, unless it is hundreds of lines in length, of course ;-)

Not everyone will click a link to an external file.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
BadotzCommented:
And by "change the function" i mean:


<script type="text/javascript">
function doSomething(sel) {
    document.getElementById("div_total_value").innerHTML = 100 + sel.option[sel.selectedIndex].value;
}	
</script>

Open in new window

0
 
_agx_Commented:

<option value="Option 1, 5.00">Option 1</option>

As an aside - that's not your actual value right? ie a string and number separated by a comma. If it is, I'd suggest separating them and making one of the values an attribute instead.

Another alternative is using "bind".  Though fundamentally it's the same as what @Badotz already suggested other than the formatting.

<script type="text/javascript">
	function totalSelect(value) {
		var total = 100.00 + parseFloat(value);
		return total.toFixed(2);
	}
</script>
<form>
	<select id="mySelectField" name="mySelectField">
		<option value="5.00">Option 1</option>
		<option value="10.00">Option 2</option>
		<option value="15.00">Option 3</option>
	</select><br>
	<cfdiv bind="javascript:totalSelect({mySelectField})">
</form>

Open in new window



0
 
BadotzCommented:
The strong, silent type, eh?

No worries - glad to help.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now