Submit a Form without Refreshing page with jQuery and Ajax

Question

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.

`alert("if");` is not php, neither `alert("else");` is, unless you have made your own function. Remove both the alerts from your contact.php code and everything **should** be fine. MOREOVER -- IMPORTANT: are you aware that mysql_* is deprecated? your code is really vulnerable to **sql injections**, please use mysqli_* instead or PDO. Check the official PHP documentation and remember to **sanitize your inputs** before filling your database! Also, having a **submit** button will force you to reload the page, some browsers doesn't like e.preventDefault, just convert your submit to a normal btn — briosheje, Aug 08 '14 at 10:25
please don't do this in production environment. SQL-injections, SQL injections everywhere. — Rebirth, Aug 08 '14 at 10:28
alert("if"); is to alert a demo value while if condition is true. also same is for the else one. this is only a string value to check if this code is being executed or not. that's it. i have changed that. — Gaurav Manral, Aug 08 '14 at 10:32
**Danger**: You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are also **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Aug 08 '14 at 10:33
@gsm11001: What I meant is that, unless you defined your own alert function, **php doesn't have any alert built-in function**, therefore it will result in a **syntax error** and the whole script won't be executed. — briosheje, Aug 08 '14 at 10:33
i got your point briosheje. I removed it, but the result is same. — Gaurav Manral, Aug 08 '14 at 10:45

score 2 · Answer 1 · edited Jan 31 '15 at 10:14

2

your AJAX code seems fine. please correct:

$contacttype=$_POST['contacttype'];

into:

$contacttype=$_POST['contactform'];

edited Jan 31 '15 at 10:14

phadej

11,947
41
78

answered Aug 08 '14 at 10:36

Anoop

61
8

Tanvir Hasan · Answer 2 · 2014-08-08T11:22:49.537

"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')

score 0 · Answer 3 · answered Aug 08 '14 at 10:54

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;

score 0 · Answer 4 · answered Aug 08 '14 at 12:08

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

?>

score -1 · Answer 5 · answered Aug 08 '14 at 10:30

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

Maybe you meant `$('#contact_form').submit(function(){` rather than `$('#contact_form').submit()`? — briosheje, Aug 08 '14 at 10:32

Submit a Form without Refreshing page with jQuery and Ajax

5 Answers5