如何在提交表单时调用 jquery 函数？

Posted 2023-05-09

【中文标题】如何在提交表单时调用 jquery 函数？

【英文标题】：How do I call a jquery function on submitting a form?

【发布时间】：2012-02-18 10:19:39

【问题描述】：

我有一个表格，如下所示：

 <form method="post" id="contactForm" action="">
                <fieldset class="contactFieldset">
                    <ul>
                        <li>
                            <label for="contactName" class="leftLabel">*Name:</label>
                            <input type="text" name="contactName" id="contactName" class="contactInput required" value="" />

                        </li>
                        <p></p>
                        <li>
                            <label for="email" class="leftLabel">*Email:</label>
                            <input type="text" id="email" name="email" class="contactInput email required" value="" />
                        </li>
                      <span class="simple-success">I'll be in  touch soon</span>
                        <li>
                            <label for="subject" class="leftLabel">*Subject:</label>
                            <input type="text" name="subject" id="subject" class="contactInput required" value="" />
                        </li>
                        <p></p>
                        <li>
                            <label for="message" class="leftLabel">Message:</label>
                            <textarea rows="10" cols="40" id="message" name="message" class="contactTextarea required"></textarea>

                        </li>
                       <p></p>
                        <li>


                            <input type="image" src="images/submitbutton.png"  name="submit_button" class="submit_button" id="submit_button">

                        </li>
                    </ul>
                </fieldset>
            </form>

我正在尝试通过 jquery 从此表单中提取数据，以便将其传递到 php 文件并发送电子邮件，但单击按钮时未调用 jquery 函数。代码如下：

    $(function() 
  $('.error').hide();
  $('.simple-sucess').hide();

  $(".submit_button").click(function() 





        /*get the email value*/

        var email = $("input#email").val();
        var name = $("input#contactName").val();
        var subject = $("input#subject").val();
        var message=$("input#message").val();
    //  alert("email"+email);

/* Check if the email is good or bad */

var goodEmail = email.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\.arpa)|(\.asia)|(\.cat)|(\.int)|(\.jobs)|(\.tel)|(\.travel)|(\.xxx)|(\..2,2))$)\b/gi);
    apos=email.indexOf("@");dotpos = email.lastIndexOf(".");lastpos=email.length-1;
    var badEmail    = (apos<1 || dotpos-apos<2 || lastpos-dotpos<2);

/*If the email is bad ,display the error message*/

if (email=="" || !goodEmail || badEmail) 

        $("email").focus();
      return false;
    


        var dataString = 'email='+ email + '\n Name='+ name+ '\n Subject='+ subject+ '\n message='+ message;
        alert (dataString);

        $.ajax(
      type: "POST",
      url: "mai.php",
      data: dataString,
      success: function() 
        $('.simple-sucess').fadeIn(100).show();
        $('.contact_form').fadeOut(100).hide();
        $('.simple_error').fadeOut(100).hide();


      
     );
    return false;
    );
);

关于我可能做错的任何想法？

谢谢

【参考方案1】：

您应该使用document.ready 块并且不要使用submit-button 点击；改为使用$.submit()

$(document).ready(function() 
  $("your form selector here").submit(function() 


    // do the extra stuff here
    $.ajax(
     type: "POST",
      url: "mail.php",
      data: $(this).serialize(),
      success: function() 
        $('.simple-sucess').fadeIn(100).show();
        $('.contact_form').fadeOut(100).hide();
        $('.simple_error').fadeOut(100).hide();

       
    )

  )
)

看看jQuery Form Plugin，它有像ajaxSubmit() 这样的方法来减少你的工作。

【参考方案2】：

把你的javascript代码放进去

$(document).ready(

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

      //Do stuff here

   ); 

);

【参考方案3】：

使用 onsubmit 检查表单是否已提交：

$('#contactForm').on('submit', function() 
  alert('You submitted the form!');
);

【讨论】：

它是在提交发生时触发还是在提交完成后触发？

【参考方案4】：

首先，尝试调试您的代码 - Chrome 有一个简洁的内置控制台 (Ctrl + Shift + J)，而 Firefox 有很棒的 FireBug 插件。然后，您可以在任何地方使用console.log("Message"); 来检查该功能是否已到达该区域。

alert("email" + email) 有效吗？

请务必将所有内容都包含在 $().ready( /* your code */ ); 中。现在您的代码可能正在运行在文档的其余部分被加载，因此，当它试图找到将事件绑定到的按钮时，它会失败并且事件不会被绑定对任何东西。

除了$('.submit-button').click(...)，您还可以使用$('#contactForm').submit( function() /* code that's now in the click handler */ . This would make the code a little more fail-safe, in case you might want to rename or remove that button, or if you want to manually submit the form from a piece of code. (Running$('#contactForm').submit()` 并且不传递任何事件处理程序实际上会触发表单的提交，这也适用于所有其他事件）。

希望这会有所帮助！