jQuery Submit（）函数未从Twiiter-Bootstrap 3 Modal中触发的按钮提交HTML表单

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'的取消订阅按钮搞砸了表单提交。 如果您将该按钮更改为ID“ sub”，则代码将起作用。

我创建了一个jsfiddle-

https://jsfiddle.net/bbs5tffz/

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

我必须删除isValid（）引用。

Answer 2

从Mozilla MDN：

如果表单控件（如提交按钮）具有一个名称或ID submit它会掩盖表单提交方法。

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/submit

基本上，您将重写Form对象中的Submit属性。

为了避免这种情况，我会将提交按钮命名为“ unsub_form_submit”或类似的名称