JQuery submit()函数不从Twiiter引导程序3模式中触发的按钮提交HTML表单

JQuery submit()函数不从Twiiter引导程序3模式中触发的按钮提交HTML表单,jquery,forms,twitter-bootstrap-3,modal-dialog,submit,Jquery,Forms,Twitter Bootstrap 3,Modal Dialog,Submit,我正在创建一个unsubscribe页面,其中包含一个表单元素,后跟一个TwitterBootstrap3模式,目前它只是HTML/JQuery。当单击表单类型按钮底部的按钮元素时,会触发该模式。 模式中有一个确认按钮,也有一个类型按钮,它附带了一个处理程序来提交表单。单击按钮时会触发处理程序,但提交功能似乎没有启动。如果我将处理程序更改为在表单按钮上触发,那么提交工作正常。这似乎只是因为确认按钮在模式中。我将非常感谢任何帮助获得提交触发模式按钮,谢谢 JQuery脚本: <script

我正在创建一个unsubscribe页面,其中包含一个表单元素,后跟一个TwitterBootstrap3模式,目前它只是HTML/JQuery。当单击表单类型按钮底部的按钮元素时,会触发该模式。 模式中有一个确认按钮,也有一个类型按钮,它附带了一个处理程序来提交表单。单击按钮时会触发处理程序,但提交功能似乎没有启动。如果我将处理程序更改为在表单按钮上触发,那么提交工作正常。这似乎只是因为确认按钮在模式中。我将非常感谢任何帮助获得提交触发模式按钮,谢谢

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引导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>

我不知道为什么,但id为“submit”的“unsubscribe”按钮将表单提交搞乱了。如果您将该按钮的id更改为“sub”,代码将正常工作

我已经创建了一个JSFIDLE-


我不得不删除isValid引用。

我不知道为什么,但是id为“submit”的“unsubscribe”按钮正在搞乱表单提交。如果您将该按钮的id更改为“sub”,代码将正常工作

我已经创建了一个JSFIDLE-

我必须从Mozilla MDN中删除isValid引用。

如果表单控件(如submit按钮)的名称或id为submit,它将屏蔽表单的submit方法

基本上,您正在覆盖表单对象中的submit属性

为了避免这种情况,我将提交按钮命名为“unsub_form_submit”或Mozilla MDN中的一致性按钮:

如果表单控件(如submit按钮)的名称或id为submit,它将屏蔽表单的submit方法

基本上,您正在覆盖表单对象中的submit属性


为了避免这种情况,我将提交按钮命名为“unsub\u form\u submit”或类似的东西

请忽略模式中的onclick=form\u submit。我试图通过从按钮中调用一个单独的函数来提交表单来解决这个问题;输出错误:TypeError:document.getElementById…submit不是一个函数。我开发了一个解决方案,但它很粗糙,所以如果有更好的方法,请告诉我!我在表单中添加了一个类型为“=submit”的按钮,并将其用作代理,该代理在单击模式按钮时由处理程序触发。$”unsub'.clickfunction{$'unsub-proxy'.trigger'click';};然后我将代理按钮上的CSS设置为显示:无;把它藏起来/请忽略模式中的onclick=form\u submit。我试图通过从按钮中调用一个单独的函数来提交表单来解决这个问题;输出错误:TypeError:document.getElementById…submit不是一个函数。我开发了一个解决方案,但它很粗糙,所以如果有更好的方法,请告诉我!我在表单中添加了一个类型为“=submit”的按钮,并将其用作代理,该代理在单击模式按钮时由处理程序触发。$”unsub'.clickfunction{$'unsub-proxy'.trigger'click';};然后我将代理按钮上的CSS设置为显示:无;把它藏起来/
$("#sub").click(function(e){                     
    //isValid = validateForm();
    if(true)
    {
        $('#unsubModal').modal('show');                     
    }
});