CODEWITHSUNDEEP
javascriptjqueryhtmlvalidationinternet-explorer
JohnA10
JohnA10

Reputation: 326

jQuery select menu validator works in FF and Chrome, but no on IE

I'm using a simple jQuery to validate that at least one option from a select menu is chosen. If no option is selected, the submit button stops working, and it prints in red color a warning message above the select menu.

It works fine in Chrome and Firefox. On IE, it doesn't work. I don't know what I'm doing wrong.

<form class="search_cars" action="http://www.domain.com/searchresults" method="get">
    <label>
        <select name="model" class="models">
            <option value="" selected="selected">Select Make</option>
            <option value="Acura">Acura</option>
            <option value="Audi">Audi</option>
            <option value="BMW">BMW</option>
            <option value="Buick">Buick</option>
            <option value="Cadillac">Cadillac</option>
            ....
        </select>
        <input name="submit" type="submit" value="search" class="search_button" />
    </label>
</form>

This is the jQuery:

$(document).ready(function() {
    $('.search_cars').submit(function(e) {
        mydropdown = $('.models option:selected');
        if ($(mydropdown).val() == "") {
            $("div.warning").text("** Please Select A Make");
            $("div.warning").css({"color": "#F00"});
            e.preventDefault();
            return false;
        }
    });
});

Thanks for any help or advice.

UPDATE / SOLVED Script was creating conflict with another a placeholder script. At the end, script was simplified. This looks better:

$(document).ready(function() {
    $('.search_cars').submit(function(e) {
        if($('.models').val() == "") {
            $("div.start_search").text("** Please Select A Make");
            $("div.start_search").css({"color": "#F00"});
            e.preventDefault();
            return false;
        }
    });
});

Upvotes: 0

Views: 86

Answers (2)

Yogesh Sharma
Yogesh Sharma

Reputation: 2017

Hey you can use below js for this

$(document).ready(function() {
    $('.search_cars').submit(function(e) {
        mydropdown = $('.models').val();
        if (mydropdown == "") {

            $("div.warning").text("** Please Select A Make");
            $("div.warning").css({"color": "#F00"});
            e.preventDefault();
            return false;
        }
    });
});

Please see demo as well Demo

Upvotes: 0

ChillerPerser
ChillerPerser

Reputation: 371

thats not tested but why you do something like that:

mydropdown = $('.models option:selected');

with jQuery you can easily ask for the value like that:

if($('.models').val() == "") {};

maybe this fixes the IE problem for you

Upvotes: 1

Related Questions