JQuery submit() 函数未从 Twiiter 中触发的按钮提交 HTML 表单-Bootstrap 3 模态

Question

我正在创建一个取消订阅页面，其中包含一个表单元素，后跟一个 twitter-bootstrap 3 模式，目前它只是 HTML/JQuery。单击表单底部的按钮元素（类型按钮）时会触发模式。在模式中有一个确认按钮（也是类型按钮），它附有一个处理程序来提交表单。单击按钮时将触发处理程序，但提交功能似乎并未触发。如果我将处理程序更改为在表单按钮上触发，则提交作品。这似乎只是因为确认按钮在模态内。我将非常感谢任何帮助让 submit() 在模式按钮上触发，谢谢！

JQuery 脚本：

<script type="text/javascript">
    $(document).ready(function() {  

        // Bring modal up if form is valid
        $("#submit").click(function(e){                     
            isValid = validateForm();
            if(isValid)
            {
                $('#unsubModal').modal('show');                     
            }
        });

        // Submit form when clicking button in modal
        $('#unsub').click(function(e) {
            $('#unsub_form').submit();
            $('#unsubModal').modal('hide');
        });                     

    }); // END $(document).ready(function() {
</script>

Twitter-Bootstrap 3 模态：

<div id="unsubModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><img id="close_btn" src="img/close.png" alt="Close" width="30px" height="30px"></button>
                <h4 class="modal-title"><img id="so_long" src="img/so_long_white.png" alt="So long!" width="153px" height="64px"></h4>
            </div>
            <div class="modal-body text-center">
                <p>Please feel free to contact us at: &nbsp; <b class="font_lrg"><a href="mailto:mail@email.com.au">mail@email.com.au</a></b><br/>or give us a call at: &nbsp; <b class="font_lrg black">555 555 555</b><br/> during office hours if you wish to re-subscribe to our emails or just have a chat...<br/><br/><span class="font_lrg">have an Amazing day!</span></p>
            </div>
            <div class="modal-footer">
                <button id="unsub" type="button" onclick="form_submit()" class="btn btn-danger" data-dismiss="modal">Unsubscribe</button>
            </div>
        </div>

    </div>
</div>

HTML 表格:

<form id="unsub_form" name="unsub_form" action="success.html" method="GET" enctype="multipart/form-data" >                                      

    <div class="form-group">
        <span class="required">*</span><small><label for="email">Please unsubscribe the below address from email notifications</label></small>
        <input id="email" name="email" type="email" class="form-control input-sm" required/>
    </div>

    <div class="form-group">
        <small><label for="reason">Reason for unsubscribing</label></small>
        <select id="reason" name="reason" class="form-control input-sm">
            <option value="0" selected>- Please select an option</option>
            <option value="to many">I recieve to many emails</option>
            <option value="not relevant">The information is not relevant to me</option>
            <option value="badly coded">They don't display or open correctly</option>
            <option value="other">Other (please explain below)</option>
        </select>
    </div>

    <div class="form-group">
        <small><label for="feedback">Feedback</label></small><br />
        <textarea maxlength="300" id="feedback" name="feedback" class="form-control" rows="5"></textarea>
    </div>  

    <button id="submit" type="button" class="btn btn-warning pull-right">Unsubscribe</button>
    <button id="cancel" type="button" class="btn btn-success pull-right" onclick="window.location.href='cancel.html'">Cancel</button>

</form>

Answer 1

我不确定为什么，但是 ID 为 'submit' 的退订按钮弄乱了表单提交。如果将该按钮更改为 'sub' 的 ID，代码将起作用。

我创建了一个 jsfiddle -

https://jsfiddle.net/bbs5tffz/

$("#sub").click(function(e){                     
    //isValid = validateForm();
    if(true)
    {
        $('#unsubModal').modal('show');                     
    }
});

我不得不删除 isValid() 引用。

Answer 2

来自 Mozilla MDN：

If a form control (such as a submit button) has a name or id of submit it will mask the form's submit method.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

基本上，您将覆盖表单对象中的提交属性。

为了避免这种情况，我会将提交按钮命名为 'unsub_form_submit' 或类似的东西

JQuery submit() 函数未从 Twiiter 中触发的按钮提交 HTML 表单-Bootstrap 3 模态

JQuery submit() function not submitting HTML form from button triggered in Twiiter-Bootstrap 3 Modal

forms

jquery

modal-dialog

submit

twitter-bootstrap-3