tags:

views:

87

answers:

1

A very peculiar bug in a simple html form. After changing an option, button has to be clicked twice to submit the form. Button is focused after clicking once, but form is not submitted. It's only this way in IE8 and works fine in Chrome and FF.

PAY ATTENTION TO 'g^' right before <select>. It has to be a letter or number followed by a symbol to generate this bug. For example, 'a#','f$','3(' all create the same bug. Otherwise it works fine. BTW, if you don't change option and click button right away,there won't be any bug.

Very strange, huh?

<form method="post" action="match.php">
g^
<select>
<option>Select</option>
<option>English</option>
<option>French</option>
</select>

<input type="submit" value="Go" />
</form>
A: 

I am providing the code here, which is working fine. Check this code whether this code also is giving you the problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
<title> Sample page for language selection </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
    p{display: none;}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

<script type="text/javascript">
    $(function() {
        // language as an array
        var language = ['Arabic', 'Cantonese', 'Chinese', 'English', 'French', 'German', 'Greek', 'Hebrew', 'Hindi', 'Italian', 'Japanese', 'Korean', 'Malay', 'Polish', 'Portuguese', 'Russian', 'Spanish', 'Thai', 'Turkish', 'Urdu', 'Vietnamese'];

        $('#muyu').append('<option value=0>Select</option>');

        //loop through array
        for (i in language)  //js unique statement for iterate array
        { 

        $('#muyu').append($('<option>', { id: 'muyu' + i, val: language[i], html: language[i] })) }

        $('form').submit(function() {
            // alert('I am being called!');  // check if submit event is triggered
            if ($('#muyu').val() == 0) { $('#muyu_error').show(); } else { $('#muyu_error').hide(); return true; }
            return false;
        });
    })
</script>
</head>

<body>
    <form method="post" action="PostProb">
        I am fluent in <select name='muyu' id='muyu'></select>
        <p id='muyu_error'>Tell us your native language</p>
        <input type="submit" value="Go"/>
    </form>
</body>
</html>
mohang
But it is not working on my IE8... Could there be any IE settings trigger this bug?
phil
I just posted my code. Check it. Make sure you change the action attribute of form.
mohang
I copy your code and run it on my IE8. The bug is still exactly the same.
phil
@mohang I revised the post significantly.
phil