How to Show an Alert when Option is Selected

Question

I'm trying to alert visitors about a minimum amount, and I just reached the point where I can show the alert, but for all changes... The point is that I want only to show the alert when the user clicks on option value = 1.

Here's what I've got (missing the IF clause):

<script> 
    function MinPecas(quantidade) {
        alert("MÍNIMO DE 30 PEÇAS PARA ORÇAMENTO");
    }  
</script>

<select name="quantidade" id="quantidade" onchange ="MinPecas(this.form)">
<option value="1">0 A 30 PÇS</option>
<option value="2">30 A 50 PÇS</option>
<option value="3">50 A 100 PÇS</option>
</select>

Wouldn't it make more sense to remove that option, if it's not available? It's like saying: _"Want some candy? Oh, sorry, I don't have any candy..."_ **Edit:** @Guilherme Alright then ;) — blex, Apr 06 '15 at 18:26
Actually not because they can select the 0 up to 30 pieces, but need to be aware of this condition. — Guilherme Andre dos Santos, Apr 06 '15 at 18:28
yes, because you don't have 'value' variable, you have quantidade, simple replacing would solve it... however: http://jsfiddle.net/z7p1np23/ — sinisake, Apr 06 '15 at 18:33
Sorry, i forgot to change on comment to quantidade, but didnt work aswell. — Guilherme Andre dos Santos, Apr 06 '15 at 18:35

score 1 · Answer 1 · answered Apr 06 '15 at 18:35

1

Try this one

<script> 
    function MinPecas(quantidade){
     if(quantidade == 1)
          alert("MÍNIMO DE 30 PEÇAS PARA ORÇAMENTO");

    }  
    </script>

<select onchange="MinPecas(this.value)" name="quantidade">
<option value="1">0 A 30 PÇS</option>
<option value="2">30 A 50 PÇS</option>
<option value="3">50 A 100 PÇS</option>
</select>

answered Apr 06 '15 at 18:35

Masum Billah

2,209
21
20

Thanks! The point was that I should place the script after the select option clause. – Guilherme Andre dos Santos Apr 06 '15 at 19:14

ppepii · Answer 2 · 2015-04-06T19:14:35.437

0

Try

$(document).ready(function(){
    $('[name=quantidade]').change(function(){
        if($(this).val() === '1'){
             alert();
        }
    });
 });

EDIT

Also for this to work you need to include jquery library!

Since you want the alert to be displayed when the element with value 1 is SELECTED try adding an empty option as the first choice.

<option>Please select</option>

edited Apr 06 '15 at 19:14

answered Apr 06 '15 at 18:30

ppepii

94
1
10

1

Isn't better to use just `this.value` instead of `$(this).val()` ? :) – Indy Apr 06 '15 at 18:31
@CookieMan It's a valid optimization, but a tiny one which will go unnoticed by real users. – Blazemonger Apr 06 '15 at 18:34
1

You'll also need to use [event delegation](http://learn.jquery.com/events/event-delegation/), since the ` – Blazemonger Apr 06 '15 at 18:35
So I need to place the script content before the body clause? – Guilherme Andre dos Santos Apr 06 '15 at 18:53
It's good practice to use strict equality: `$(this).val() === '1'` – ajndl Apr 06 '15 at 18:53

score 0 · Accepted Answer · edited May 23 '17 at 11:53

It's a good idea to apply event listeners from the Javascript itself, as opposed to directly in the HTML. For this reason, use the element.addEventListener() method. If you pass it the event (change) function (MinPecas), it will call MinPecas whenever the value of the element is changed. Additionally, the this variable of the function will then be the element, so this.value will be equal to the value of the element. You can get the element using document.getElementById(), and then adding the event listener to that.

<select name="quantidade" id="quantidade">
    <option value="1">0 A 30 PÇS</option>
    <option value="2">30 A 50 PÇS</option>
    <option value="3">50 A 100 PÇS</option>
</select> 

<script> 
    function MinPecas(){
        if (this.value === '1'){
            alert("MÍNIMO DE 30 PEÇAS PARA ORÇAMENTO");
        }
     }

     document.getElementById('quantidade').addEventListener('change', MinPecas);

</script>

Lastly, you'll want to make sure that the <script> element is after the <select>, because if it runs beforehand, the select tag will not exist yet and the document.getElementById('quantidade') will not be able to find it and won't return anything.

I hope this works for you.

@GuilhermeAndredosSantos great! You might also want to consider adding `selected="selected"` to the second `` — ajndl, Apr 06 '15 at 19:07
Actually, I have 10 options, and I set the selected option to the 3rd one. But thanks for the clue! Helped me a lot... Now I'll apply it to other forms... — Guilherme Andre dos Santos, Apr 06 '15 at 19:12

How to Show an Alert when Option is Selected

3 Answers3