Eddy Eddy - 3 months ago 10
CSS Question

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;
}

Answer

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