Jquery on change reset to 0 and show alert

Question

I try to get this code to work with the 3 input fields, but it works only with the first :

<form>  
<p><input id="qty" type="text" maxlength="1"  /></p>
<p><input id="qty" name="text" type="text"  /></p>
<p><input id="qty" name="text2" type="text" /></p>
</form>

<script type="text/javascript">

$("#qty").change(function(e) {
    if(this.value != '3' && this.value != '6' && this.value != '9') {
        this.value = 0;         
        alert('You can buy only 3, 6, or 9 pieces fromn this product');
    } });

</script>

What can be my error ?

You cannot have 3 things with the same ID – Naftali Jun 28 '11 at 15:37 — Naftali, Jun 28 '11 at 15:37

score 2 · Accepted Answer · answered Jun 28 '11 at 15:37

2

You cannot have 3 things with the same ID try using classes instead:

<form>  
<p><input class="qty" type="text" maxlength="1"  /></p>
<p><input class="qty" name="text" type="text"  /></p>
<p><input class="qty" name="text2" type="text" /></p>
</form>

<script type="text/javascript">

$(".qty").change(function(e) {
    if(this.value != '3' && this.value != '6' && this.value != '9') {
        this.value = 0;         
        alert('You can buy only 3, 6, or 9 pieces fromn this product');
    } });

</script>

answered Jun 28 '11 at 15:37

Naftali

144,921
39
244
303

@Samuel, why on earth would i do that?? – Naftali Jun 28 '11 at 15:45
Why this was downoted?? Anyone care to explain the reason?? – rahul Jun 28 '11 at 15:46
1

@rahul bc they are mad at me for telling them they are wrong. This answer is completely correct – Naftali Jun 28 '11 at 15:47
Thanks, how can I add "window.onbeforeunload" in the place of the alert ? – Bizboss Jun 28 '11 at 15:49
@Bizboss -- why do u need `window.onbeforeload`? – Naftali Jun 28 '11 at 15:50
a solution to use >window.onbeforeload in my function ?? – Bizboss Jun 28 '11 at 15:54
1

@BizBoss i repeat: why do u need `window.onbeforeload`? – Naftali Jun 28 '11 at 15:57
@Neal: I need it to avoid that the user type a quantities and then go the another page, and lose all the entered values. – Bizboss Jun 29 '11 at 06:49

score 1 · Answer 2 · answered Jun 28 '11 at 15:37

1

You cannot have multiple elements with the same ID.

Use a classname instead.

answered Jun 28 '11 at 15:37

SLaks

868,454
176
1,908
1,964

score 1 · Answer 3 · answered Jun 28 '11 at 15:37

It only works on the first, because you're connecting the event to the ID, and using the same ID multiple times. IDs can only be used once on a given page in order to be useful.

Referencing element IDs in jQuery will only match the first occurrence in the DOM - this is how they work. Use a class instead.

Thomas Clayson · Answer 4 · 2011-06-29T08:37:30.750

1

Your problem is your use of the id attribute.

An id is unique. Therefore only ONE element on the page can have the id qty.

Use class instead and then all three can have class='qty'.

And change this to $('this')

edited Jun 29 '11 at 08:37

answered Jun 28 '11 at 15:38

Thomas Clayson

29,657
26
147
224

remove that last part, and this is a fully correct answer and deserves a `+1` – Naftali Jun 28 '11 at 15:51
No. See http://stackoverflow.com/questions/1051782/jquery-this-vs-this - `this == $('this')[0]` be careful of this. When dealing with jQuery ALWAYS use `$('this')` – Thomas Clayson Jun 29 '11 at 08:40

score 1 · Answer 5 · answered Jun 28 '11 at 15:38

1

Try giving all the text boxes unique ids.

answered Jun 28 '11 at 15:38

Jasper

75,717
14
151
146

score 0 · Answer 6 · answered Jun 28 '11 at 15:37

0

You cannot have more than one element with the same id. Use a class instead.

Also embed you change event inside document ready event.

$(function(){
    $("input:text.myclass").change(function(e){
        if(this.value != '3' && this.value != '6' && this.value != '9') {
            this.value = 0;         
            alert('You can buy only 3, 6, or 9 pieces fromn this product');
        }
    });
});

answered Jun 28 '11 at 15:37

rahul

184,426
49
232
263

Please explain the reason for downvote whenever you are doing it. – rahul Jun 28 '11 at 15:50

score 0 · Answer 7 · answered Jun 28 '11 at 15:39

ID attribute is a unique identifier of an element and you can't have duplicates within a page. So change your IDs to class names and you'll be good to go:

<p><input class="qty" type="text" maxlength="1"  /></p>
<p><input class="qty" name="text" type="text"  /></p>
<p><input class="qty" name="text2" type="text" /></p>

Also, you have to reference the element via jQuery wrapper when you're dealing with it within jQuery context. this becomes $(this) and value property becomes val() function call.

Change to this:

$(".qty").change(function(e) {
  var value = $(this).val();

    if(value != '3' && value != '6' && value != '9') {
        $(this).val(0);         
        alert('You can buy only 3, 6, or 9 pieces fromn this product');
    }
});

wrong wrong wrong wrong. there was nothing wrong with the way the OP did the statements — Naftali, Jun 28 '11 at 15:41

Ray · Answer 8 · 2011-06-28T15:45:54.930

-1

I'm not sure if this is the solution, but in jQuery you have to use $(this) instead of this. Then, you also have to use .val() instead of value.

So you have to use something like this:

$(this).val()

To get the value of a field, to set the value, use this:

$(this).val('new value')

Edit: After you added the code: Like, others said, you can't use an id multiple times.

Edit 2: Ignore my answer, totally wrong. Excuse me.

edited Jun 28 '11 at 15:45

answered Jun 28 '11 at 15:36

Ray

1,192
6
10

Using just "this" and "this.value" is also correct, its just "javascript" :-) – Thomas Kekeisen Jun 28 '11 at 15:38
1

@Ray: I'm not the downvoter, but `this.value` is perfectly valid JavaScript and is, in fact, more efficient than doing `$(this).val()`. – Town Jun 28 '11 at 15:39
Yes I know, but I thought you can't use jQuery functions when using 'this'. Correct me if I'm wrong. – Ray Jun 28 '11 at 15:40
it's the same thing with $(this) – Bizboss Jun 28 '11 at 15:41
2

@Ray: you can't do `this.val()`, as that's using a jQuery function on a DOM element. However, `this.value` is correct. – Town Jun 28 '11 at 15:42

Jquery on change reset to 0 and show alert

8 Answers8