Sending an email via PHP and jquery/ajax from a html page

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

Code Magician · Accepted Answer · 2012-01-26 06:21:44Z

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.

answered Jan 26, 2012 at 6:21

Code Magician

24.1k7 gold badges63 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mervin Over a year ago

Thanks,but wont I need to make a php call within the submit event ? The validation I am using is external i.e. using the jquery validation plugin.I'll update the code to show the validation code I am using

Code Magician Over a year ago

@MFrank2012 the jquery forms plugin will actually handle all the ajax stuff in that case. As for validation, I only saw the email validation where you used regexes to check it was valid. Maybe handle email validation in your validation plugin.

Code Magician Over a year ago

Read up on the jquery form plugin here jquery.malsup.com/form it will encapsulate all your ajax code and building your post data. The way you are building your datastring could run into problems, for example if I put a = in the name field.

jogesh_pi · Accepted Answer · 2012-01-26 06:26:34Z

0

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

answered Jan 26, 2012 at 6:26

jogesh_pi

9,7745 gold badges40 silver badges65 bronze badges

Comments

OpenGG · Accepted Answer · 2012-01-26 06:29:20Z

0

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

answered Jan 26, 2012 at 6:29

OpenGG

4,5902 gold badges26 silver badges32 bronze badges

Collectives™ on Stack Overflow

Sending an email via PHP and jquery/ajax from a html page

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related