提交按钮在 IE/Safari 中无效，在 Chrome 中有效，但表单信息未通过

Question

我有一个表单设置，但出于某种原因，提交表单的 JS 在 Chrome 中工作，而不是在 IE9 或 Safari 中。有趣的是，在 Chrome 中，提交按钮确实有效，但没有任何信息被传递。

这是我的提交按钮 -

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

这就是它所调用的 JS

// 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);

对于我的问题的第二部分，可能与 JS 问题相关，也可能不相关 -

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

如果您想更好地查看我正在编辑的页面here is a link to jsfiddle

编辑

根据 Marco 的要求，我从提交按钮周围删除了链接，并将 onClick 事件放在实际按钮本身上。这绝对解决了 IE 和 Safari 上的问题。现在我剩下的问题/担忧是为什么 POST 数据没有正确传递到下一页。

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

Page source gets passed to-feedback-accept.php

除了上面所说/发布的内容之外，StackOverflow 首选将源发布到哪个站点？

针对 Brian 的评论，如果我不能在不破坏 POST 数据的情况下使用失败，那么有什么好的替代方案/解决方法？

Answer 1

试试这个代码：

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>

或

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

或

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

Answer 2

快速浏览一下，我会说您在这里遇到了功能冲突。当您设计提交类型时，您是在告诉浏览器它将提交您的表单（在其操作上），另一方面，它位于调用 JS 函数的链接内。如果您在 JS 中制造提交，请尝试考虑不使用提交类型并查看它是否更正常工作。 您也可以尝试将链接替换为表单标签内的简单“onSubmit”，并从那里调用 JS 函数。这样，当浏览器识别到用户点击了提交按钮时，他会按照你的意愿调用一个 JS 函数，如果这个函数返回 true，则浏览器将允许提交。