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

Question

I have a very simple question but its been bugging me for quite some time .I have a html contact us page in which I have a simple form which already has validation assigned to it.The form code is :

    <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>       

The code which I am using to try and call the php form using ajax is this

$(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;
    });
});

The thing is the alert is not even being displayed when I press the submit button..what am I doing wrong here?

The validation code is

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

Answer 1

First of all, use the submit event, not the submit button click event because the submit button is already wired up to do a normal submit. There may also be a bug, be sure to check your javascript console for errors. Either way...

What you probably really want to do is use the jQuery form plugin which will make your code a lot more simple.

Then your revised code would be as simple as:

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

In this case you would lose your email validation, but why reinvent the wheel, there are tons of validators out there that already have the bugs worked out etc.

Answer 2

the first thing is you are using :

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

in your form, and in jquery you are using .click() event,

if try to change

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

to :

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

then it will work perfectly with the .click() event
or the second option you have if you don't want to change the input type then use .submit() instead of .click()

Answer 3

OMG, so many code lines. A little suggestion: keep it simple enough to debug. A jsfiddle demo is recommended for better answers.

Here I post my solution for ajax forms, which works in basic browsers without javascript support.

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;
    })
});