Solved

JQuery Syntax

Posted on 2015-02-11
4
280 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 42

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 42

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

PL/SQL can be a very powerful tool for working directly with database tables. Being able to loop will allow you to perform more complex operations, but can be a little tricky to write correctly. This article will provide examples of basic loops alon…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now