Solved

JQuery Syntax

Posted on 2015-02-11
4
392 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

617 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