JQuery Syntax

I'm having an issue with my JQuery Syntax.
OnChange, I want to take info from a Select Option and place it into the value of a hidden input.
<script>

function findDeduc($)	{
	jQuery( document ).ready(function(){
   		$('[name="[product_deductible]').change(function()	{
       		var deduc = ($('name="[product_deductible]" option:selected').attr("name"));
        	document.getElementById('deductible-amount').value = parseFloat(deduc);
    	});   
	});
}
</script>

<html>
<select onchange="findSum(); findDeduc(); findMed(); findVeh()" name="item_options[0][product_deductible]" data-dpmaxz-eid="2"> 
<option value="$100.00" selected="selected">$100 Deductible</option>
<option value="$200.00">$200 Deductible</option>
<option value="$300.00">$300 Deductible</option>
<option value="$500.00">$500 Deductible</option>
</select>


<input type="hidden" name="item_options[0][product_deductible]" id="deductible-amount" value="" onblur="findDeduc()" />

</html>

Open in new window


I think I have my JQuery Wrong.
LVL 7
rgranlundAsked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
Not quite. The first method is preferred as the JS is unobtrusive - i.e it's not wrapped up amongst the HTML, but you do have a few of issues.

Look at the naming of your elements - you've named your SELECT and INPUT both as item_options[0][product_deductible], so you're likely to get problems - both with the jQuery and when you submit your form.

You're also trying to get the 'name' attribute of the selected option - the option doesn't have a name attribute - I'm guessing you meant to get the value.

Your parseFloat function will return 'Not a Number' - it will only work if the first character of the value is a number - in your cae it's not - it's the dollar sign, so you'll need to strip that out.

Also, your jQuery is mixing with traditional javascript (getElementByID). Whilst this isn't really a problem, it could be done neater. You can also use 'this' to access the <SELECT> when it changes.

Have a look at this and see if it makes sense:

$(document).ready(function(){
   $('[name$="[product_deductible]"]').change(function() {
      // get the value      
      var deduc = $('option:selected', this).val();
      // strip out the non-numerics
      var amount = Number(deduc.replace(/[^0-9\.]+/g,""));
      // set the input to the amount
      $('#deductible-amount').val(parseFloat(amount));
   });
});

Open in new window

0
 
Jeffrey Dake Senior Director of TechnologyCommented:
Since you already have your function on the on change event within the select box, you can get rid if f the document.ready and change function within your findDeduc function.
0
 
Chris StanyonCommented:
Your JQuery selector is wrong. You have a missing " and you will either need to use the full name of the SELECT:

$('[name="item_options[0][product_deductible]"]').change( function() {

Open in new window


or use the 'ends with' syntax (note the $ after name):

$('[name$="[product_deductible]"]').change(function() {

Open in new window


And as Jeffrey pointed out - if you're going to use inline javascript (the select's onClick') then remove the document.ready block. If you'd prefer to use unobtrusive javascript (recommended) then remove the onClick from the select, remove the function wrapper and just use the document.ready block
0
 
rgranlundAuthor Commented:
I this correct?

<script>
	jQuery( document ).ready(function(){
   		$('[name$="[product_deductible]"]').change(function() {
       		var deduc = ($('name$="[product_deductible]" option:selected').attr("name"));
        	document.getElementById('deductible-amount').value = parseFloat(deduc);
    	});   
	});

</script>

<html>
<select name="item_options[0][product_deductible]" data-dpmaxz-eid="2"> 
<option value="$100.00" selected="selected">$100 Deductible</option>
<option value="$200.00">$200 Deductible</option>
<option value="$300.00">$300 Deductible</option>
<option value="$500.00">$500 Deductible</option>
</select>


<input type="hidden" name="item_options[0][product_deductible]" id="deductible-amount" value="" onblur="findDeduc()" />

</html>

Open in new window


OR is this correct?
<script>

function findDeduc($)	{
       		var deduc = ($('name$="[product_deductible]" option:selected').attr("name"));
        	document.getElementById('deductible-amount').value = parseFloat(deduc);
}
</script>

<html>
<select onchange="findSum(); findDeduc(); findMed(); findVeh()" name="item_options[0][product_deductible]" data-dpmaxz-eid="2"> 
<option value="$100.00" selected="selected">$100 Deductible</option>
<option value="$200.00">$200 Deductible</option>
<option value="$300.00">$300 Deductible</option>
<option value="$500.00">$500 Deductible</option>
</select>


<input type="hidden" name="item_options[0][product_deductible]" id="deductible-amount" value="" onblur="findDeduc()" />

</html>

Open in new window

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.

All Courses

From novice to tech pro — start learning today.