Solved

JQuery Syntax

Posted on 2015-02-11
4
355 Views
Last Modified: 2015-03-03
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.
0
Comment
Question by:rgranlund
  • 2
4 Comments
 
LVL 10

Expert Comment

by:Jeffrey Dake
ID: 40604836
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40605279
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
 
LVL 7

Author Comment

by:rgranlund
ID: 40605764
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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 40605821
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

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
If you have heard of RFC822 date formats, they can be quite a challenge in SQL Server. RFC822 is an Internet standard format for email message headers, including all dates within those headers. The RFC822 protocols are available in detail at:   ht…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question