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

本文介绍了如何在提交表单时调用jquery函数?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有下面的表格:

<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" alt="Submit button" name="submit_button" class="submit_button" id="submit_button"> </li> </ul> </fieldset> </form>

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

I am trying to extract the data from this form via jquery so that I can pass it on to the php file and send an email but the jquery function is not being called on clicking the button.The code is given below:

$(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+@).+((\)|(\)|(\.edu)|(\.mil)|(\.gov)|(\)|(\.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; }); });

关于我可能做错了什么的任何想法?

Any ideas on what I might be doing wrong ?

谢谢

推荐答案

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

You should use a document.ready block and don't use submit-button click; instead use $.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表单插件，其中有类似ajaxSubmit()的方法可以减少您的工作.

Take a look at the jQuery Form Plugin, whic has methods like ajaxSubmit() to reduce your work.