Question

我有一个非常简单的问题，但它已经困扰了我很长一段时间。我有一个HTML联系我们页面，其中我有一个简单的表格，已经分配了验证。表格代码是：

    <div class="contact_form">      
  <form method="post" id="contactForm" name="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="submit" alt="Submit button" name="submit" class="submit" id="submit">

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


</div>

我用来尝试使用ajax调用php表单的代码就是这个

$(document).ready(function() {

    //if submit button is clicked
    $('#submit').click(function () { 

 alert("test i am here");



        /*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,
      //Do not cache the page
            cache: false,
      success: function(html) {
        $('.simple-sucess').fadeIn(100).show();
        $('.contact_form').fadeOut(100).hide();
        $('.simple_error').fadeOut(100).hide();


      }
     });
    return false;
    });
});

当我按下提交按钮时，警报甚至没有显示出来......我在这里做错了什么？

验证码是

<script type="text/javascript">
    jQuery(document).ready(function($){
        $("#contactForm").validate();
    });

Answer 1

首先，使用submit事件，而不是提交按钮click事件，因为提交按钮已经连线以进行正常提交。可能还有一个错误，请务必检查您的javascript控制台是否有错误。无论哪种方式......

您可能真正想要做的是使用jQuery form plugin，这将使您的代码更简单。

然后您的修改后的代码就像：

$('#contactForm').ajaxForm(function() { 
            $('.simple-sucess').fadeIn(100).show();
            $('.contact_form').fadeOut(100).hide();
            $('.simple_error').fadeOut(100).hide()
        });

在这种情况下，您将失去您的电子邮件验证，但为什么要重新发明轮子，那里有tons验证器，已经有错误解决等等。

Answer 2

首先是你正在使用：

<input type="submit" alt="Submit button" name="submit" class="submit" id="submit">

在您的表单中，在jquery中，您正在使用.click()事件，

如果尝试更改

<input type="submit" alt="Submit button" name="submit" class="submit" id="submit">

到：

<input type="button" alt="Submit button" name="submit" class="submit" id="submit">

然后它将与.click()事件完美配合或者如果您不想更改输入类型，则使用第二个选项，然后使用.submit()代替.click()

Answer 3

OMG，这么多代码行。一点建议：保持简单到足以调试。建议使用jsfiddle演示以获得更好的答案。

在这里，我发布了我的ajax表单解决方案，它可以在没有javascript支持的基本浏览器中运行。

HTML：

<form method="post" id="contactForm" action="somewhere">
    Name: <input type="text" name="contactName" />
    <br />
    <input type="submit" value="Submit this form" />
</form>

的javascript：

jQuery(function($){
    $('#contactForm').submit(function(e){
        e.preventDefault?e.preventDefault():false;
        $.post(this.action,$(this).serialize(),function(text){
            //callbacks
            console.log(text);
        });
        return false;
    })
});

通过PHP和jquery / ajax从html页面发送电子邮件

3 个答案: