CODEWITHSUNDEEP
phpjsonformsjqueryemail-validation
user1200468
user1200468

Reputation: 65

jquery email form using AJAX/JSON/PHP?

I'm new to forms but I feel like I'm missing something simple. No 'success' at all other than an alert for 'error's.

Here's the form code in the index.html file.

<form id="contact-form" name="contact-form" method="post">
    <div id="formResponse"></div>

    <label for="name">NAME:</label>
    <input type="text" name="name" id="name" /><br/>

    <label for="email">EMAIL:</label>
    <input type="text" name="email" id="email" /><br/>

    <label for="message">MESSAGE:</label>
    <textarea name="message" rows="20" cols="20" id="message"></textarea><br/>

    <input type="submit" name="submit" value="SEND" class="submit" />
</form>

Ajax code in my .js file

$('.submit').click(form_registration);

function form_registration () {

    var input_data = $('#contact-form').serialize(); 

$.ajax({    
    type: 'post',
    url: '../contact.php',
    data: input_data,
    dataType: 'json',
    success: function( msg ){
        alert('SUCCESS!');
    },
    error: function(){ 
        alert('ERROR!');
        alert(input_data);
    }
});   

}

The contact.php file

< ?php 

    if($_POST) {

    $name = trim($_POST['name']);
    $email = trim($_POST['email']);
    $msg = trim($_POST['msg']);

    <!-- //email address settings -->
    $my_address = "MY EMAIL ADDRESS GOES HERE";
    $headers = "From: ".$email;
    $message = "Contact name: $name\nContact Email: $email\nContact Message: $msg";

    $to = $my_address;

    if ( $name == "")
    {
        echo 'Name field is required';
        <!-- $result = "Name field is required"; -->
    }
    else if (!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/", $email))
    {
        echo 'Enter a valid email address';
        <!-- $result = "Enter a valid email address"; -->
    }
    else if ( strlen($msg) < 10 )
    {
        echo 'Write more than 10 characters';
        <!-- $result = "Write more than 10 characters"; -->
    }

    else
    {
    mail($to, $subject, $message, $headers);
    echo "Your mail has been sent succesfully!";
    }

    if ($javascript_enabled == "true") {
        echo 'javascript enabled';
        die();
    }   
}
?>

Here's the EXAMPLE. Click the contact link at the bottom. Much thanks for any help!

Upvotes: 0

Views: 4784

Answers (2)

Nitish Thakrar
Nitish Thakrar

Reputation: 515

Try this code. I have made some changes in your code and its working perfectly now.

Contact.html

<head>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
    <form id="contact" action="contact.php" name="contact" method="post">

<div id="formResponse"></div>

<label for="name">NAME:</label>
<input type="text" name="name" id="name" /><br/>

<label for="email">EMAIL:</label>
<input type="text" name="email" id="email" /><br/>


<label for="sub">SUBJECT</label>
<input type="sub" name="sub" id="subject" /><br/>

<label for="message">MESSAGE:</label>
<textarea name="message" rows="20" cols="20" id="message"></textarea><br/>

<input type="submit" name="submit" value="SEND" class="submit" />
</form>
</body>

Contact.php

<?php
 if($_POST) {

    $name = trim($_POST['name']);
    $email = trim($_POST['email']);
    $msg = trim($_POST['message']);
    $subject = trim($_POST['sub']);
    //email address settings
    $my_address = "[email protected]";
    $headers = "From: ".$email;
    $message = "Contact name: $name\nContact Email: $email\nContact Message: $msg";
    $to = $my_address;
    if ( $name == "")
    {
        echo 'Name field is required';
        $result = "Name field is required"; 
    }
    else if (!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/", $email))
    {
        echo 'Enter a valid email address';
        $result = "Enter a valid email address"; 
    }
     else if( strlen($subject) == "")
    {
        echo 'Please Write Subject';
        $result = "Please Write Subject"; 
        }
        else if ( strlen($msg) < 10 )
    {
        echo 'Write more than 10 characters';
        $result = "Write more than 10 characters"; 
    }
    else
    {
        mail($to, $subject, $message, $headers);
        echo "Your mail has been sent succesfully!";
    }
}
?>

Contact.js

$('.submit').click(form_registration);
function form_registration () {

var input_data = $('contact-form').serialize(); 
            $.ajax({
            type: 'post',
            url: 'contact.php',
            data: input_data,
            dataType: 'json',
            success: function( msg ){
            alert('SUCCESS!');
        },
        error: function(){
            alert('ERROR!');
            alert(input_data);
        }
});  
 return false; 
}

Upvotes: 2

Sal
Sal

Reputation: 1655

Alright,first your have add to return false to form_registration() before the closing bracket } to prevent the form from submitting

second, your contact.php doesn't have a valid opening PHP tag change < ?php to <?php

give it a go...

Upvotes: 0

Related Questions