admin管理员组

文章数量:1389779

I am trying to do something like this example -

My form.html -

<html><head>

<script type="text/javascript" src=".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 ment = $("#ment").val();
            var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& ment=' + ment;

            if(name=='' || email=='' || phone=='' || ment=='' || 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="ment" 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['ment'];
    $ment=$_POST['ment'];
    mysql_query("insert into `contact_form`(`type`, `name`, `email`, `phone`, `ment`) VALUES ($contacttype,$name,$email,$phone,$ment)");
}
else 
{ 
    alert("2");
}

?>

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

I am trying to do something like this example -

My form.html -

<html><head>

<script type="text/javascript" src="http://ajax.googleapis./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 ment = $("#ment").val();
            var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& ment=' + ment;

            if(name=='' || email=='' || phone=='' || ment=='' || 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="ment" 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['ment'];
    $ment=$_POST['ment'];
    mysql_query("insert into `contact_form`(`type`, `name`, `email`, `phone`, `ment`) VALUES ($contacttype,$name,$email,$phone,$ment)");
}
else 
{ 
    alert("2");
}

?>

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

  • javascript
  • php
  • jquery
  • html
  • ajax
Share Improve this question edited Aug 8, 2014 at 10:30 Gaurav Manral asked Aug 8, 2014 at 10:23 Gaurav ManralGaurav Manral 6004 gold badges7 silver badges24 bronze badges 6
  • 6 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 Commented Aug 8, 2014 at 10:25
  • 1 please don't do this in production environment. SQL-injections, SQL injections everywhere. – Rebirth Commented Aug 8, 2014 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 Commented Aug 8, 2014 at 10:32
  • Danger: You are using an obsolete database API and should use a modern replacement. You are also vulnerable to SQL injection attacks that a modern API would make it easier to defend yourself from. – Quentin Commented Aug 8, 2014 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 Commented Aug 8, 2014 at 10:33
 |  Show 1 more ment

5 Answers 5

Reset to default 2

your AJAX code seems fine. please correct:

$contacttype=$_POST['contacttype'];

into:

$contacttype=$_POST['contactform'];

"contacttype" field missing in ajax post

var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& ment=' + ment+'& 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="ment" placeholder="Comment" id='ment'></textarea><br>

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

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



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

add contacttype to datastring

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

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['ment'];
        $ment=$_POST['ment'];
        mysql_query("insert into `contact_form`(`type`, `name`, `email`, `phone`, `ment`) VALUES ($contacttype,$name,$email,$phone,$ment)");
    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;

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./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 ment = $("#ment").val();
        var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& ment=' + ment;

        if(name=='' || email=='' || phone=='' || ment=='' || 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="ment" 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'];
    $ment=$_POST['ment'];
    mysqli_query($connection,"insert into `contact_form`(`type`, `name`, `email`, `phone`, `ment`) VALUES ('$contacttype','$name','$email','$phone','$ment')");
    echo "insert into `contact_form`(`type`, `name`, `email`, `phone`, `ment`) VALUES ('$contacttype','$name','$email','$phone','$ment')";
}
else 
{ 
}

?>

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

            if(name=='' || email=='' || phone=='' || ment=='' || 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;
});

本文标签： javascriptSubmit a Form without Refreshing page with jQuery and AjaxStack Overflow

版权声明：本文标题：javascript - Submit a Form without Refreshing page with jQuery and Ajax - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744598583a2614928.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。