Submit button not working in IE/Safari, works in Chrome but form info is not getting passed

Question

I have a form setup but for some reason the JS to submit the form works in Chrome but not IE9 or Safari. Interestingly enough in Chrome where the submit button does work none of the information gets passed.

Here is my submit button -

<a href="javascript: validate(); return false;"><img type="submit" src="lib/send_feedback.jpg" border="0" class="feedback-submit-img" /></a>

Here is what JS it calls

// Submit form to next page
function submitForm() {
    //   document.forms["feedbackform"].submit();
    document.feedbackform.submit();
}
// Submit form and validate email using RFC 2822 standard
function validateEmail(email) { 
    // Modified version original from: http://stackoverflow.com/a/46181/11236
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
// Return true if email field is left unchanged
function originalText(email){
    var defaultMsg;
defaultMsg = "Enter your email address (optional)";
if(defaultMsg == email){
    return true;    
}
return false;
}
// Verify or decline with error message
function validate(){
    $("#result").text("");
    var email = $("#email").val();
    if ((validateEmail(email)) || originalText(email)) {
        submitForm();
    } else {
        $("#result").text(email + " is not a valid email.");
        $("#result").css("color", "red");
}
return false;
}
$("form").bind("submit", validate);

For the second part of my issue which may or may not be related to the JS issue is -

echo $POST['satisfaction'];
echo $POST['user_email'];
echo $POST['comments'];
if(isset($POST['user_email'])){
    echo 'true';
} else {
    echo 'false';
}

If you would like a better look at the page I am editing here is a link to jsfiddle

edit

As per Marco's request I removed the link from around the submit button and placed the onClick event onto the actual button itself. This absolutely fixed the issue on both IE and Safari. Now my remaining question/concern is why the POST data is not passing correctly to the next page.

Here is the complete source with George requested. - index.php

Page source gets passed to - feedback-accept.php

Also with that being said/posted, what is StackOverflow's preferred site to post source to?

In response to Brian's comment, if I cannot use failed without potentially breaking the POST data, what would be a good alternative/work-around?

Some of the `return false;` expressions in various places will prevent your form from submitting. — Brian Driscoll, Jan 24 '12 at 18:20
Event delegation my friend... [avoid inline event registration](http://stackoverflow.com/questions/6941483/onclick-vs-event-handler) — rlemon, Jan 24 '12 at 20:11
Also, the preferred source for posting source is whatever *safe* service you choose. As long as you're not posting hundreds of lines of code I think you're good. — rlemon, Jan 24 '12 at 20:12

score 3 · Answer 1 · answered Jan 24 '12 at 18:26

try this code:

jQuery:

$(document).ready(function()
{

    $('.validate').bind('submit click',function()
    {
        //Validate!

        //is email
        if( /..../.test( $(this).find('input[name=email]').val() ) )
        {
            alert('Error!!!');
            return false; //STOP PROPAGATION
        }

        //Its okay!
        //send form!
        $(this).parents('form').submit();

        //click event stop propagation
        return false;
    });

});

HTML:

<a href="" class="validate">Submit</a>

OR

<input type="submit" value="Submit" class="validate" />

OR

<button class="validate" >Submit</button>

These are some great alternatives if for some reason the JS is preventing my POST data from being passed. Thanks for the thorough response with alternative solutions. — Eric, Jan 24 '12 at 18:37

score 1 · Accepted Answer · answered Jan 24 '12 at 18:21

In a quick look, I would say you are having a conflict of functions here. When you design a Submit Type, you are telling the browser that that will submit your form (on its action), on the other hand, that is inside a link that is calling a JS function. If you're manufacturing the submit in your JS, try to consider not use a Submit Type and see if it works more properly. You might also try to replace the link for a simple "onSubmit" inside the form's Tag and call the JS function from there. This way, when the browser identifies that the user hit the submit button, he'll call a JS Function as you wish and if this function returns true, the submit will be allowed by the browser.

That was exactly the problem I don't know how I didn't see that. I am obviously still extremely new at JS and I greatly appreciate you taking time to explain what was wrong. Would any of the JS code I provided prevent the POST data from being passed? — Eric, Jan 24 '12 at 18:32

Submit button not working in IE/Safari, works in Chrome but form info is not getting passed

2 Answers2