html input not return the correct value in jquery

Question

I spend all night just to play with this code but I have no idea why it's not return the correct statement :

<input id="price_item" discount="10" more_order="20" type="text" name="co-price-item" value="0" onChange="selection()"/>

function selection(){   

var discount    =  $('#price_item').attr('discount'); 
var more_order  =  $('#price_item').attr('more_order');                                
var input_value =  $('#price_item').val();

if(input_value > more_order) {
            alert('yes : '+input_value+' > '+more_order);   
            }else{
            alert('no : '+input_value+' < '+more_order);                
            }
    }

what is wrong with the code caused it already return yes by entering input value started from 3. I hope it return yes if above 20.

I have tried to use

var input_value =  document.getElementById("price_item").value;

but still got the same result.

Community · Accepted Answer · 2017-05-23 12:15:10Z

3

I think you have to use parseFloat() or parseInt();

var discount    =  parseInt($('#price_item').attr('discount')  , 10); 
var more_order  =  parseInt($('#price_item').attr('more_order')  , 10);                                
var input_value =  parseInt($('#price_item').val()  , 10);

Behavior difference between parseInt() and parseFloat()

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Nov 25, 2015 at 23:56

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3706926 Over a year ago

My God... you were right. It works. So simple for you. Actually I have tried this method, but without (,10) at the end and it's not work. God bless you..

nathanhleung · Accepted Answer · 2015-11-25 23:58:54Z

1

Those aren't valid HTML attributes; in order for your code to be valid HTML5 you need to prepend the custom attributes with data-, and then access them via jQuery's data():

<input id="price_item" data-discount="10" data-more_order="20" type="text" name="co-price-item" value="0" onChange="selection()"/>

function selection() {   

  var discount    =  $('#price_item').data('discount'); 
  var more_order  =  $('#price_item').data('more_order');                                
  var input_value =  $('#price_item').val();

  if (input_value > more_order) {
    alert('yes : '+input_value+' > '+more_order);   
  } else {
    alert('no : '+input_value+' < '+more_order);                
  }
}

answered Nov 25, 2015 at 23:58

nathanhleung

5166 silver badges15 bronze badges

1 Comment

Barmar Over a year ago

The reason this works is because jQuery .data() automatically parses attribute values as JSON, so it converts the strings to numbers. It's not because he was using invalid attributes.

Tariq · Accepted Answer · 2015-11-26 00:00:21Z

1

This would work when using parseInt like this:

var more_order  =  parseInt($('#price_item').attr('more_order'));

here is a JSFiddle: JSFiddle

answered Nov 26, 2015 at 0:00

Tariq

2,8813 gold badges24 silver badges29 bronze badges

Comments

Reza Hajianpour · Accepted Answer · 2015-11-25 23:58:03Z

0

You cannot add custom attributes like discount or more_order in an input tag in HTML. There are some predefined attributes (See here)

See this post from StackOverflow.

answered Nov 25, 2015 at 23:58

Reza Hajianpour

8712 gold badges13 silver badges26 bronze badges

3 Comments

Barmar Over a year ago

This isn't the reason his program is failing.

user3706926 Over a year ago

@Psyringe I appriciate your nice advise. But when the code is working by using Mohamed-Yousef's answer above. What is the compensation we would get by using the attribute?

Reza Hajianpour Over a year ago

It's true that it's not failing. But it's not a correct approach to the solution. As @nathanhleung said, this feature is only available in HTML5, and it has a preceding data-.

Musa · Accepted Answer · 2015-11-26 00:20:26Z

0

Since both input_value and more_order are strings therefore you will have a string comparison made instead of a numeric one.
Convert the values to numeric to get the required comparison.

see http://www.ecma-international.org/ecma-262/5.1/#sec-11.8.5

edited Nov 26, 2015 at 0:20

answered Nov 26, 2015 at 0:06

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Collectives™ on Stack Overflow

html input not return the correct value in jquery

5 Answers 5

1 Comment

1 Comment

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related