使用模态作为提交确认

using modal as submit confirmation

本文关键字：提交 确认 模态      更新时间：2023-09-26
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');

}
        );
    } });

问题是如果我更改代码以重置而不是提交。.它适用于重置..

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

你陷入了循环。

触发操作时：

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

没有提交表单，因为您正在调用自己的函数，该函数会阻止默认操作：

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

如果要使用当前拥有的代码，可以执行以下 2 项操作之一：

  • 在提交函数上使用 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();
    });
});

但是，我会采取不同的方式，将提交按钮从页面上的可见标记中取出。只需在单击时触发open-modal函数的形式中放置一个a标签即可。然后，您无需在代码中进行任何提交，只需在模式中使用标准的提交和重置按钮，它们就会执行其默认行为：

标记：

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

简单得多。希望这有帮助。

问题是这一行：

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

没有一个名为"getElementbyname(("的函数。您似乎正在寻找返回节点列表的document.getElementsByName()。在这种情况下：

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

但是，您也可以使用 document.forms 数组：

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

最后，由于您的表单具有 ID，因此您还可以使用它：

document.getElementById("formTest").submit();
相关文章：