CODEWITHSUNDEEP
javascriptjqueryhtml
BigZ
BigZ

Reputation: 886

Different behavior of onclick="submit();" in different browsers

So here is my problem:

base.html

<html>
    <head>
    <head>
    <body>
        <form action="select.html">
            <select name="decide" onclick="submit();">
                <option>Choose Me!</option>
                <option>No me!</option>
                <option>We both know you want to choose me</option>
                <option>Nobody ever chooses me :(</option>
            </select>
        </form>
    </body>
</html>

The onlick="submit();" attribute has different behavior in different browsers.

In Opera and Chromium the site behaves as i want. If you click on the select list, the list pops up and you can choose an entry. In Firefox and Internet Explorer the onclick attribute fires the first item in the list as request to the server and then pops up the list when clicking on the select list.

enter image description here

How do i prevent Firefox and Internet Explorer from firing first and asking later? :/

I'm not very familiar with Javascript and jquery and i'm using Django 1.8.4 Thanks in advance

Upvotes: 0

Views: 147

Answers (3)

An0nC0d3r
An0nC0d3r

Reputation: 1303

Do you mean something like this?

HTML

<select id="my-select" name="decide">
    <option>Choose Me!</option>
    <option>No me!</option>
    <option>We both know you want to choose me</option>
    <option>Nobody ever chooses me :(</option>
</select>

JS

$('#my-select').on('click', function(){
     // do something
     submit();
});

or

$('#my-select').on('change', function(){
     // do something
    submit();
});

or

$('#my-select').on('select', function(){
     // do something
    submit();
});

Upvotes: -1

A. Wolff
A. Wolff

Reputation: 74420

If you want a placeholder (kind of), you could use that instead:

    <select name="decide" onchange="submit();">
        <option selected style="display: none;">Select your option</option>
        <option>Choose Me!</option>
        <option>No me!</option>
        <option>We both know you want to choose me</option>
        <option>Nobody ever chooses me :(</option>
    </select>

Upvotes: 0

bigrbuk
bigrbuk

Reputation: 56

I'm guessing you actually want to fire when an item is selected not when the dropdown is clicked, so change onclick to onchange

Edit - something like this perhaps (pure js not jquery)

<form action="select.html" name="frmDecide">
<select name="decide" onchange="submitForm(this);">
    <option value="">Please select...</option>
    <option>Choose Me!</option>
    <option>No me!</option>
    <option>We both know you want to choose me</option>
    <option>Nobody ever chooses me :(</option>
</select>

and then the js

function submitForm(sel)
{
    if (sel.value != "")
    {
        frmDecide.submit();
    }
}

Upvotes: 4

Related Questions