Question

我有一个评论窗口，可以在一个小jqmodal窗口中打开。我正在尝试使用$ .ajax提交表单并在小模态窗口中显示“成功”。但是在除firefox之外的所有浏览器中，当我提交表单时，模态会关闭。

<script type="text/javascript">
$().ready(function() {

$('.reportForm').submit( function(){
    if (document.rForm.comment.value != "") {
        $('.reportForm').hide();

        $.ajax({
            type: "POST",
            url: "<?php echo $_SERVER["PHP_SELF"]; ?>?c=<?php echo $c; ?>",
            cache: false,
            data: "comment=" + document.rForm.comment.value,
            success: function(html){
                        $("#results").append(<?php echo get_option('ddrc_success'); ?> + " ");
                     }

        });
        return false;           
    } 

});
});

FS

Answer 1

我不是百分百肯定，但问题可能出在这一行：

if (document.rForm.comment.value != "") {

我不认为这段代码是跨浏览器的。假设rForm中的.reportForm您可以将其替换为

if ($(this).find("[name='comment']").val()) {

此上下文中的

$(this)将引用$('.reportForm')，因为您绑定了reportForm的提交事件。 find("[name='comment']")将找到属性名称为comment的子元素。 val()返回元素的值。

此外，如果注释字段中没有值，您编写此方法的方式将以正常方式提交表单。

你应该考虑移动

return false;

是你方法的最后一行。

整个例子重新修改：

<script type="text/javascript">
    $(function() {
        $('.reportForm').submit(function() {
            if ($(this).find("[name='comment']").val()) {
                $(this).hide();

                $.ajax({
                    type: "POST",
                    url: "<?php echo $_SERVER["PHP_SELF"]; ?>?c=<?php echo $c; ?>",
                    cache: false,
                    data: "comment=" + $(this).find("[name='comment']").val(),
                    success: function(html) {
                        $("#results").append(<?php echo get_option('ddrc_success'); ?> + " ");
                    }

                });
            } else {
                alert("Please, fill the comment field");
            }
            return false;                   
        });
    });
</script>

jqmodal窗口关闭除FF之外的所有浏览器的表单提交

1 个答案: