Question

我的网页上有一个html表单，其中包含一个在单击时会触发对话框页面的图像。但是，表单提交会触发并强制提交。我该如何防止这种情况发生？

<script>
     //trigger dialog
     $('#submitIter').click(function(){
        $("#dialog-submit").dialog("open");
                    return false
    });

    $("#dialog-submit").dialog({            
        autoOpen: false,
        resizable: false,
        height: 200,
        width: 200,
        modal: true,
        buttons: {
            "Proceed": function(){
                //submit after user clicks proceed cannot seem to work
                document.forms[0].submit();
                $(this).dialog("close");

            }
        }
    });
</script>

<form action="{{ request.path }}" method="post" enctype="multipart/form-data">

   <input type="image" src="images/submit.png" id="submitIter">

</form>

Answer 1

<form onsubmit="return false">

这应该可以解决问题。

Answer 2

$('form').submit(function(){
  $("#dialog-submit").dialog("open");
  return false;
});

而不是点击处理程序，并将输入标记更改为提交标记。

Answer 3

$('#submitIter').click(function(e){
    e.preventDefault(); // prevents default button action
    $("#dialog-submit").dialog("open");
});

Answer 4

<script>
     //trigger dialog
     $('form').submit(function(){
        return $('form').data('confirmed') === true;
    });

    $('#submitIter').click(function(){
        $("#dialog-submit").dialog("open");
        return false;
    });

    $("#dialog-submit").dialog({
        autoOpen: false,
        resizable: false,
        height: 200,
        width: 200,
        modal: true,
        buttons: {
            "Proceed": function(){
                //submit after user clicks proceed cannot seem to work
                $('form').data('confirmed', true);
                $('form').submit();
                $(this).dialog("close");
            }
        }
    });
</script>

基本上，在表单的数据对象上设置一个变量，它可以在“继续”按钮中实际提交给服务器。如果变量不存在，则submit函数将返回false，这将允许您的对话框显示。如果已通过“继续”按钮确认，则表单将提交。

我没有测试过该代码，但是如果它不起作用，希望你能理解这个概念。

Javascript表单提交问题

4 个答案: