防止提交表单直到指定的按钮被点击（厚框对话框）

Question

我想使用jQuery & thickbox在每个窗体上使用'confirm'类做一个模式确认窗口。

这里的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> 

所以问题：

模态对话框显示和正常工作和取消按钮的作品，但点击按钮＃肯定不会提交表单，我认为这是因为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

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(); 
    }); 
}); 

Answer 2

我认为最简单的方法将是存储用户是否在变量中单击“是”，如果他们确实如此，则让表单处理照常进行。

$(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(); 
    }); 

});