CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Gaurav Manral
Gaurav Manral

Reputation: 600

Submit a Form without Refreshing page with jQuery and Ajax

I am trying to do something like this example -

My form.html -

<html><head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
 <script type="text/javascript" >
    $(function() {
        $("#Submit").click(function(e) {
            e.preventDefault();
            var contacttype = $("#contacttype").val();
            var name = $("#name").val();
            var email = $("#email").val();
            var phone = $("#phone").val();
            var comment = $("#comment").val();
            var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& comment=' + comment;

            if(name=='' || email=='' || phone=='' || comment=='' || contacttype=='Select')
            {
                $('.success').fadeOut(200).hide();
                $('.error').fadeIn(200).show();
            }
            else
            {
                $.ajax({
                    type: "POST",
                    url: "contact.php",
                    data: dataString,
                    success: function(){alert("GSM");
                        $('.success').fadeIn(200).show();
                        $('.error').fadeOut(200).hide();
                    }
                });
            }
            return false;
        });
    });
    </script>
    </head>
    <body>

<form action="" method="post" id="contact_form">
    <select id="contacttype" name="contactform">
        <option selected="selected" value="Select">Select</option>
        <option value="Franchisee">Franchisee</option>
        <option value="Enquiry">Enquiry</option>
        <option value="Feedback">Feedback</option>
        <option value="Complaint">Complaint</option>
    </select><br>
    <input type="text" name="name" placeholder="Name"><br>
    <input type="text" name="email" placeholder="Email"><br>
    <input type="text" name="phone" placeholder="Phone"><br>
    <textarea name="comment" placeholder="Comment"></textarea><br>
    <input type="submit" name="submit" id="Submit" >
    <span class="error" style="display:none"> Please Enter Valid Data</span>
    <span class="success" style="display:none"> Registration Successfully</span>
</form>

</body></html>

But code url: "contact.php", does not seem to work, as my database is not updated.

contact.php file is as follows -

<?php include("connect.php"); 


if($_POST)
{
    alert("1");
    $contacttype=$_POST['contacttype'];
    $name=$_POST['name'];
    $email=$_POST['email'];
    $phone=$_POST['comment'];
    $comment=$_POST['comment'];
    mysql_query("insert into `contact_form`(`type`, `name`, `email`, `phone`, `comment`) VALUES ($contacttype,$name,$email,$phone,$comment)");
}
else 
{ 
    alert("2");
}

?>

Can anybody help me out. I need to update my database without refreshing my html page.

Upvotes: 1

Views: 12789

Answers (5)

Anoop
Anoop

Reputation: 61

your AJAX code seems fine. please correct:

$contacttype=$_POST['contacttype'];

into:

$contacttype=$_POST['contactform'];

Upvotes: 2

Gaurav Manral
Gaurav Manral

Reputation: 600

Thanks for the suggestions from all of you. I found the solution. It was a mix up of some silly mistakes and some wrong SQL syntax.

My final correct code is like this -

form.html -

<html><head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript"> 
$(function() {
    $("#Submit").click(function(e) {
        e.preventDefault();
        var contacttype = $("#contacttype").val();
        var name = $("#name").val();
        var email = $("#email").val();
        var phone = $("#phone").val();
        var comment = $("#comment").val();
        var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& comment=' + comment;

        if(name=='' || email=='' || phone=='' || comment=='' || contacttype=='Select')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeIn(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "contact.php",
                success: function(){
                    $('#form').fadeOut(200).hide();
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }
        return false;
    });
});
</script>
</head>
<body>

<form action="contact.php" method="post" id="contact_form">
    <select id="contacttype" name="contacttype">
        <option selected="selected" value="Select">Select*</option>
        <option value="Franchisee">Franchisee</option>
        <option value="Enquiry">Enquiry</option>
        <option value="Feedback">Feedback</option>
        <option value="Complaint">Complaint</option>
    </select><br>
    <input type="text" id="name" name="name" placeholder="Name*"><br>
    <input type="text" id="email" name="email" placeholder="Email*"><br>
    <input type="text" id="phone" name="phone" placeholder="Phone*"><br>
    <textarea name="comment" placeholder="Comment*"></textarea><br>
    <input type="submit" name="submit" id="Submit" >
</form>

</body></html>

contact.php

if($_POST)
{
    $contacttype=$_POST['contacttype'];
    $name=$_POST['name'];
    $email=$_POST['email'];
    $phone=$_POST['phone'];
    $comment=$_POST['comment'];
    mysqli_query($connection,"insert into `contact_form`(`type`, `name`, `email`, `phone`, `comment`) VALUES ('$contacttype','$name','$email','$phone','$comment')");
    echo "insert into `contact_form`(`type`, `name`, `email`, `phone`, `comment`) VALUES ('$contacttype','$name','$email','$phone','$comment')";
}
else 
{ 
}

?>

Upvotes: 0

Tanvir Hasan
Tanvir Hasan

Reputation: 96

"contacttype" field missing in ajax post

var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& comment=' + comment+'& contacttype=' + contacttype

;

missing "id" attribute in these fields

  <input type="text" name="name" placeholder="Name" id='name'><br>
    <input type="text" name="email" placeholder="Email" id='email'><br>
    <input type="text" name="phone" placeholder="Phone" id='phone'><br>
    <textarea name="comment" placeholder="Comment" id='comment'></textarea><br>

May be type, name, email, phone, comment sql field datatype is varchar

       mysql_query("insert into `contact_form`
(`type`, `name`, `email`, `phone`, `comment`)
 VALUES ('$contacttype','$name','$email','$phone','$comment')");



if " phone " datatype is INT u can use 
('$contacttype','$name','$email',$phone,'$comment')

Upvotes: 1

Ashish
Ashish

Reputation: 188

add contacttype to datastring

var dataString = 'contacttype='+ contacttype +'& name='+ name + '& email=' + email + '& phone=' + phone + '& comment=' + comment;

also you have missed to include id to the input boxes eg:

<input type="text" name="name" id="name" placeholder="Name">

and also dont alert inside php tag.just echo the result and catch it in the javascript eg:

        <?php include("connect.php");


    if($_POST)
    {

        $contacttype=$_POST['contacttype'];
        $name=$_POST['name'];
        $email=$_POST['email'];
        $phone=$_POST['comment'];
        $comment=$_POST['comment'];
        mysql_query("insert into `contact_form`(`type`, `name`, `email`, `phone`, `comment`) VALUES ($contacttype,$name,$email,$phone,$comment)");
    echo $name;
    }
    else
    {
        echo("not");
    }

    ?>

javascript

$.ajax({
       type: "POST",
       url: "contact.php",
       data: dataString,
       success: function(data){
       alert(data);
       $('.success').fadeIn(200).show();
       $('.error').fadeOut(200).hide();
       }
                });
            }
            return false;

Upvotes: 0

HDT
HDT

Reputation: 2047

$("#contact_form").submit(){
var contacttype = $("#contacttype").val();
            var name = $("#name").val();
            var email = $("#email").val();
            var phone = $("#phone").val();
            var comment = $("#comment").val();
            var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& comment=' + comment;

            if(name=='' || email=='' || phone=='' || comment=='' || contacttype=='Select')
            {
                $('.success').fadeOut(200).hide();
                $('.error').fadeIn(200).show();
            }
            else
            {
                $.ajax({
                    type: "POST",
                    url: "contact.php",
                    data: dataString,
                    success: function(){alert("GSM");
                        $('.success').fadeIn(200).show();
                        $('.error').fadeOut(200).hide();
                    }
                });
            }
            return false;
});

Upvotes: -1

Related Questions