使用模式作為提交確認

Question

I currently have a form. As per below. 

<form action="/process" id="formTest"  name="formTest" enctype="multipart/form-data" method="POST">
<input type="text">
</form>

我添加了一個模式以確認提交。

<div class="modal fade" id="bondModal">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title"></h4>
  </div>
  <div class="modal-body">
    <p>Test;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" id="accept" class="btn btn-primary">Accept</button>
  </div>
</div><!-- /.modal-content -->

現在，如果用戶提交，將顯示確認方式，如果用戶隨后選擇接受，它將繼續提交。

問題是，后續提交永遠不會起作用。

$('#formTest').submit(function(e) {

e.preventDefault();
    $('#bondModal').modal('show');

        $("#accept").click(function(e) {
        $("#formTest").submit();
        e.preventDefault();
        $('#bondModal').modal('hide');



}

        );
    } });

問題是，如果我將代碼更改為重置而不是Submit..It可以重置..

$('#formTest').trigger('reset');

Answer 1

問題是此行：

document.getElementbyname("formTest").submit();

沒有名為“ getElementbyname（）”的函數。 似乎您正在尋找返回NodeList的document.getElementsByName() 。 在這種情況下：

document.getElementsByName("formTest")[0].submit();

但是，您也可以使用document.forms數組：

document.forms["formTest"].submit();

最后，由於您的表單具有ID，因此您也可以使用該ID：

document.getElementById("formTest").submit();

Answer 2

您陷入了循環。

當您觸發動作時：

 $("#formTest").submit();

您未提交表單，因為您正在調用自己的函數，該函數阻止了默認操作：

$('#formTest').submit(function(e) {
    e.preventDefault();
    //do stuff
});

如果您想使用當前擁有的代碼，則可以執行以下兩項操作之一：

• 在Submit函數上使用one（），因此僅觸發一次。 這將要求您在重設或取消時重新綁定

   $('#formTest').one('submit', function(e) { e.preventDefault(); //do stuff }); 

• 或在強制提交之前取消綁定提交功能。

   $('#formTest').on('submit', function(e) { e.preventDefault(); $("#accept").click(function(e) { $('#formTest').unbind('submit'); $('#formTest').submit(); }); }); 

但是，我將采取另一種方式，將提交按鈕從頁面上的可見標記中刪除。 只要把a形式，你火標簽open-modal從后點擊功能。 然后，您無需在代碼中進行任何提交，只需在模式中具有標准的提交和重置按鈕，它們便會執行其默認行為：

標記：

    <form>
        <input type="text">
        <a class="open-modal">Submit</a>

        <div class="modal">
            <h4 class="modal-title">Confirm?</h4>
            <p>Test</p>
            <input type="reset" class="btn btn-default">Cancel</button>
            <input type="submit" class="btn btn-primary">Accept</button>
        </div>
    </form>

和代碼：

    $('a.open-modal').on('click', function(e) {
        e.preventDefault();

        $('.modal').fadeIn();
    });

簡單得多。 希望這可以幫助。