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');



}

        );
    } });

问题是如果我将代码更改为reset而不是submit ..它适用于重置..

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

Answer 1

问题是这一行：

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

没有名为＆＃34; getElementbyname（）＆＃34;的函数。看来你正在寻找返回NodeList的document.getElementsByName()。在那种情况下：

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

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

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

最后，由于您的表单有ID，您也可以使用：

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

Answer 2

你已陷入困境。

当您触发操作时：

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

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

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

如果您想使用目前的代码，您可以执行以下两项操作之一：

在提交函数上使用一个（），因此它只触发一次。这将要求您重置或重新取消
```
$('#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();
    });

更简单。希望这会有所帮助。

使用模态作为提交确认

2 个答案: