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

Posted 2023-05-09

技术标签:

【中文标题】JQuery submit() 函数未从 Twiiter-Bootstrap 3 模态中触发的按钮提交 HTML 表单【英文标题】：JQuery submit() function not submitting HTML form from button triggered in Twiiter-Bootstrap 3 Modal 【发布时间】：2018-04-19 08:29:02 【问题描述】：

我正在创建一个取消订阅页面，其中包含一个表单元素，后跟一个 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"   ></button>
                <h4 class="modal-title"><img id="so_long" src="img/so_long_white.png"   ></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>

【问题讨论】：

请忽略 Modal 中的 onclick="form_submit()"。这是我试图通过从按钮调用单独的函数来提交表单来解决问题的一部分。使用document.getElementById('unsub_form').submit();输出错误：TypeError: document.getElementById(...).submit is not a function 好吧，我开发了一个解决方法，但它很hacky，所以如果有更好的方法请告诉我！我在表单中添加了一个type="submit" 按钮，并将其用作在单击模式按钮时由处理程序触发的代理。 $('#unsub').click(function(e) $('#unsub-proxy').trigger('click'); ); 然后我将代理按钮上的 CSS 设置为 display:none; 以隐藏它。 :// 【参考方案1】：

我不知道为什么，但是带有 id 'submit' 的取消订阅按钮弄乱了表单提交。如果您将该按钮更改为 'sub' 的 id，则代码将起作用。

我创建了一个 jsfiddle -

https://jsfiddle.net/bbs5tffz/

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

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

【讨论】：

【参考方案2】：

来自 Mozilla MDN：