CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Eddy
Eddy

Reputation: 566

Make dropdown mandatory

I have a drop-down generated by a backoffice. I cannot change how this drop-down is coded by the backoffice. But I need to make user selection mandatory for this dropdown.

I am using the following code and this works in the JSFIDDLE HERE. However, this code sees if the user chooses another value than value "A" to determine if a selection is made. But this in not good enough in my situation because this value indication changes in other drop-downs. I need the code to see if the user choice has changed from the text "PLEASE SELECT - $0,00" The "- $0,00" may also vary in different drop-downs, so I need the code to only filter on the "PLEASE SELECT" part of the drop-down text.

Also I need the browser to not ask to turn these warnings off in this case.

Can anyone help please? 

function selection()
{    
 var cat = document.getElementById('select').value;    
    if (cat == "A") {

            alert('Please make a selection');
            return false;
   }
    return true;
}

Upvotes: 2

Views: 1759

Answers (3)

madalinivascu
madalinivascu

Reputation: 32354

You can try something like:

function selection()
{    
 var cat = $('#select option:selected').val();    
    if (cat == $('#select option:first-child').val()) {

            alert('Please make a selection');
            return false;
   }
    return true;
}

For the warnings you will need to change you alert to a modal or on the page as a notice/warning message

Upvotes: 1

Jamiec
Jamiec

Reputation: 136124

So there is couple of questions in your question, lets start with

1) Ensuring the selected item does not start with "PLEASE SELECT".

function selection()
{    
    var sel = document.getElementById('select');    
    var selectedText = sel.options[sel.selectedIndex].text;
    if (selectedText.startsWith("PLEASE SELECT")) {

            alert('Please make a selection');
            return false;
   }
    return true;
}

2) Stopping the user forcing the browser to no longer allow alert

This is not something you can control. If you want full control over a model dialog then there are plenty of these available - bootstrap has one, jQueryUI has one. Any UI framework you're using will almost certainly have one

Upvotes: 2

Hitesh Misro
Hitesh Misro

Reputation: 3461

Alert whatever text you want in a span instead of using alert()

document.getElementById('alert').innerHTML = "Please make a selection";

Check the updated fiddle

Upvotes: 4

Related Questions