防止提交表單直到指定的按鈕被點擊（厚框對話框）

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

});