表单按钮提交上的触发功能答案

【问题标题】：Trigger function on form button submit表单按钮提交上的触发功能
【发布时间】：2013-09-11 13:03:04
【问题描述】：

我有一个带有多个文本输入的表单，最后有一个提交按钮。在提交时，我想触发一个函数，但我遇到了困难。

表格如下，我尝试了以下方法：

$('#contactForm input.btn_submit').click(function(event){ // function here

$('#contactForm input.btn_submit').click(function(event){ // function here

$('#contactForm.report_row.input.btn_submit').click(function(event){ // function here

但没有运气。

这是表格：

<form action="https://example.com/index.php/contact" method="post" id="contactForm" name="contactForm">
    <input type="hidden" />

    <div class="report_row">
        <strong>Your Name:</strong><br />
        <input type="text" id="contact_name" name="contact_name" value=""  class="text" />              </div>
    <div class="report_row">
        <strong>Your Email Address:</strong><br />
        <input type="text" id="contact_email" name="contact_email" value=""  class="text" />                </div>
    <div class="report_row">
        <strong>Your Phone Number:</strong><br />
        <input type="text" id="contact_phone" name="contact_phone" value=""  class="text" />                </div>
    <div class="report_row">
        <strong>Message Subject:</strong><br />
        <input type="text" id="contact_subject" name="contact_subject" value=""  class="text" />                </div>                              
    <div class="report_row">
        <strong>Message:</strong><br />
        <textarea id="contact_message" name="contact_message"  rows="4" cols="40" class="textarea long" ></textarea>                </div>      
    <div class="report_row">
        <strong>Security Code:</strong><br />
        20 + 9 = <br />
        <input type="text" id="captcha" name="captcha" value=""  class="text" />                </div>
    <div class="report_row">
        <input name="submit" type="submit" value="Send Message" class="btn_submit" />
    </div>
</form>

我如何在有人最后点击提交按钮时触发功能？

【问题讨论】：

你包括jQuery吗？您是否将 jQuery 包装在文档就绪调用中？
不确定这是否是您问题中的拼写错误，但选择器之间似乎没有空格..即$('#contactForm .report_row input.btn_submit') 或只是$('#contactForm').find('.btn_submit').
但是你可以试试这个$('#contactForm.btn_submit')

标签： jquery jquery-selectors

【解决方案1】：

不清楚“我遇到困难”是什么意思。

可能是您没有停止表单提交，因此您可以运行您的函数。在这种情况下，您需要使用.preventDefault()。我建议你也将你的函数包装在一个准备好的函数中，这样你的代码就会在页面加载完所有 html 时运行。

喜欢：

$('#contactForm input.btn_submit').click(function(event){ 
    event.preventDefault();
    // rest of code
    alert('Working!');
});

演示here

【讨论】：

【解决方案2】：

只要提交表单，就会触发以下内容：

$(document).ready(function() {
    $('#contactForm').submit(function() { 
        //... your code here
    });
});

【讨论】：

【解决方案3】：

怎么样

$('form').submit(function(){// ...
                                    });

【讨论】：

【解决方案4】：

也许你可以尝试做这样的事情：

$('#contactForm').submit(function() {

});

或

$('#contactForm').on('submit', function() {

});

【讨论】：