jquery form submit problem IE8

jquery form submit problem IE8

Hi everyone,

I'm new to this form and quite new to jquery as well.

I've recently built this form on a website using the jquery ajax function.
Everything works just fine in firefox and opera. But when I press the submit
button in IE8 the form gets submited anyway. It seems like IE8 doesn't
get the "return false" statement.

Here is the form html.
  1. <form action="" name="contact" id="contact">
  2. <label for="voornaam" id="voornaam_label">Voornaam:</label>
  3. <input type="text" name="voornaam" id="voornaam" class="text-input" value="" />
  4. <label class="error" for="voornaam" id="voornaam_error">Dit veld is verplicht</label>
  5. ...
  6. <button type="reset">Reset</button>
  7. <button type="submit" name="submit" id="submit_btn" class="button">Verzenden</button>
  8. </form>
And this is the jquery.

  1. $(".button").click(function(){
            //validate and process form here
            $('.error').hide();
            var doorgaan = true;
            var voornaam = $("input#voornaam").val();
            if (voornaam == "") {
                $("label#voornaam_error").show();
                $("input#voornaam").focus();
                doorgaan = false;
            }
            var name = $("input#naam").val();  
            if (name == "") {  
                   $("label#naam_error").show();  
                   $("input#naam").focus();
                doorgaan = false;
             }
            var email = $("input#email").val();  
            if (email == "") {  
                   $("label#email_error").show();  
                   $("input#email").focus();
                doorgaan = false;
             }
            var phone = $("input#telefoon").val();  
            if (phone == "") {  
                   $("label#telefoon_error").show();  
                   $("input#telefoon").focus();
                doorgaan = false;
             }
            var onderwerp = $("select#onderwerp").val();
            var vraag = $("textarea#vraag").val();
            if(!doorgaan){
                return false;
            }
            
            var dataString = 'voornaam='+ voornaam + '&naam='+ name + '&email=' + email + '&telefoon=' + phone + '&onderwerp=' + onderwerp + '&vraag=' + vraag;  
            //alert (dataString);return false;  
            $.ajax({  
              type: "POST",  
              url: "../includes/process.php",  
              data: dataString,  
              success: function() {  
                $('#contactForm').html("<div id='message'></div>");  
                $('#message').html("<h2>Uw vraag werd goed verzonden!</h2>")  
                .append("<p>U ontvangt zo snel mogelijk een antwoord.</p>")  
                .hide()  
                .fadeIn(1000, function() {  
                  $('#message');  
                });  
              }  
            });  
            return false;
        });


















































I've tried adding an onsubmit="return false" to the form element. But then I
get an error in IE8 saying object required jquery.js.

Any help is greatly appreciated.