• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 243
  • 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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

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