send form data to php using ajax

Question

I know this is a repetitive question, but please help me. I have this code which send form data to php using ajax, but the code doesn't work and I don't know why. Any help please ?

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>

<script>
function chk(){
    var name = document.getElementById('name').value;
    var datastring = 'name = ' + name;
    $.ajax({
        type:"post",
        url:"hi.php",
        data: datastring,
        cache:false,
        success: function(html){
            $('msg').html(html);
        }
    });
    return false;
}

</script>
</head>
<body>

     <form>
       <input type="text" name="id" >
       <input type="submit" value="submit"  onclick="return chk()">

        </form>
<p id="msg"></p>
</body>
</html>

PHP

<?php
if($_POST)
{
$name=$_POST['name'];

echo $name."<br>";

}

?>

Have you watched the request / response in the browser's console? — Jay Blanchard
– Jay Blanchard, Commented Jan 27, 2016 at 16:38
Define "doesn't work". When you debug this, where does it fail? Are there any errors in the browser console? Is the AJAX request made? What is the data in that request? What is the server's response? — David
– David, Commented Jan 27, 2016 at 16:39
In your code you use this line right here: var name = document.getElementById('name').value;. But where is the element name defined? I cannot find this in your form, I see an element with the name id, but no id name... — Can O'Spam feels disassociated
– Can O'Spam feels disassociated, Commented Jan 27, 2016 at 16:49

CodeGodie · Accepted Answer · 2016-01-27 17:30:05Z

Problem: your code is looking for an element with id of name when you use this line: var name = document.getElementById('name').value; . However there are no elements with that Id in your HTML. Also, you're triggering the element with id of msg but you are not telling it its an ID, since no hash # is present.

Solution: since you are already using jQuery, I would stick with its functions, specifically submit() and serialize(). Redo your code like this:

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
    </head>
    <body>
        <form>
            <input type="text" name="name">
            <input type="submit" value="submit">
        </form>
        <p id="msg"></p>
        <script>
            $('form').submit(function () {
                $.ajax({
                    type: "post",
                    url: "hi.php",
                    data: $(this).serialize,
                    cache: false,
                    success: function (html) {
                        $('#msg').html(html);
                    }
                });
                return false;
            });
        </script>
    </body>
</html>

David · Accepted Answer · 2016-01-27 16:39:57Z

0

This won't do anything:

$('msg').html(html);

Because there are no <msg> tags in your markup. Perhaps you meant to reference the element with the id of "msg"?:

$('#msg').html(html);

answered Jan 27, 2016 at 16:39

David

221k42 gold badges245 silver badges337 bronze badges

Comments

Armon Bigham · Accepted Answer · 2016-01-27 16:41:15Z

0

In your code you are setting the html response to: $('msg').html(html); I think you mean $('#msg').html(html); Notice the '#' to reference an element by id.

answered Jan 27, 2016 at 16:41

Armon Bigham

3392 silver badges14 bronze badges

Collectives™ on Stack Overflow

send form data to php using ajax

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related