jquery - 在单击指定按钮之前阻止提交表单（厚框对话框）

Question

我想在每个带有“确认”类的表单上使用 jQuery 和厚框制作一个模态确认窗口。

这是 HTML 标记：

<!-- The form below -->
<form id="myform" class="confirm" name="actionform" action="target.php">
<table>
  <tr>
    <td><input type="text" value="" placeholder="id" name="id" id="id"/></td>
    <td><input type="text" value="" placeholder="title" name="title" id="title"/></td>
    <td><input type="submit" value="Form elküldése"/></td>
  </tr>
</table>
</form>

<!-- The modal box and it's content below, called with tb_show() function -->
<div id="myModalConfirm" style="display:none">
    <div>
        <p>Are you sure?</p>
        <button id="yes">Yes, I'm sure</button><button id="cancel">No, cancel it</button>
    </div>
</div>

所以问题：

模态对话框显示并且工作正常，取消按钮工作但单击 button#yes 不会提交表单，我认为这是因为 preventDefault() 函数。

这是jQuery（我正在使用jquery.1.8.3 lib，所以请注意兼容性）

$(document).ready(function(){
    $('form.confirm').submit(function(e){
        var form = $(this);
        e.preventDefault();
        tb_show("Megerősítés","#TB_inline?height=100&width=200&inlineId=myModalConfirm&modal=true",null);
        $('button#yes').click(function(){
            $(form).submit;


            });
        $('button#cancel').click(function(){
            tb_remove();
            return false;
            });
    })

});

=======| 解决方案|================================================ =============== 这是给我的，但请在评论中查看下面的其他商品:)

$('form.confirm').submit(function(e, submit){
        if (!submit) e.preventDefault();
        tb_show("Megerősítés","#TB_inline?height=100&width=200&inlineId=myModalConfirm&modal=true",null);
    })

    $('#yes').click(function(){
        $('form.confirm').trigger('submit', [true]);
    });


    $('#cancel').click(function(){
        tb_remove();
    });

Answer 1

我认为最简单的方法是将用户是否单击“是”存储在一个变量中，如果他们这样做了，让表单像往常一样处理。

$(document).ready(function(){
    var userClickedYes = false;

    $('form.confirm').submit(function(e){    
        if(!userClickedYes){
            e.preventDefault();
            tb_show("Megerősítés","#TB_inline?height=100&width=200&inlineId=myModalConfirm&modal=true",null);
        }            
    });

    $('button#yes').click(function(){
        userClickedYes = true;
        $('form.confirm').submit();
    });
    $('button#cancel').click(function(){
        tb_remove();
    });

});

Answer 2

submit是一种方法而不是一种属性，您缺少(). 您可以使用trigger方法：

$(document).ready(function(){
    $('form.confirm').submit(function(e, submit){
        if (!submit) e.preventDefault();
        tb_show("Megerősítés","#TB_inline?height=100&width=200&inlineId=myModalConfirm&modal=true",null);
    })

    $('#yes').click(function(){
        $('form.confirm').trigger('submit', [true]);
    });


    $('#cancel').click(function(){
        b_remove();
    });
});