CODEWITHSUNDEEP
javascriptjqueryajax
user4259777
user4259777

Reputation:

Ajax is not getting data properly

hy

i am trying to submit data using ajax and then get it. i tried this code..

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="css/bootstrap.css"/>

</head>

<body>
<div>

    <form action="voteupdown.php" id="form" method="post">
        <input type="text" name="fname" id="fname" class="form-control"/><br/>
        <input type="text" name="lname" id="lname" class="form-control"/><br/>
        <input type="submit" name="submit" id="submit" value="Submit"/>
    </form>

    <div id="result">

    </div>

</div>



<script src="js/jquery.js"></script>
<script>
    $(document).ready(function(){
        $('#form').submit(function(){
           return false;
        });
        $("#submit").click(function(){
            $.get(("voteupdown.php"), function (data) {
                $("#result").html(data);
            });
        });
    });

</script>
<script src="js/bootstrap.js"></script>
</body>
</html>

the voteupdown.php

<?php

    $name = $_POST['fname'];
    $lname = $_POST['lname'];
echo $name;

?>

when i simple echo " hy this is test" in my voteupdown.php then the code will work, but when i try to echo the first and last name then it will show the below error.

Notice: Undefined index: fname in G:\xampp\htdocs\Questiona-Step1\voteupdown.php on line 3

Notice: Undefined index: lname in G:\xampp\htdocs\Questiona-Step1\voteupdown.php on line 4

Any help will be appreciated.

Upvotes: 0

Views: 136

Answers (4)

Yogesh Shakya
Yogesh Shakya

Reputation: 355

You are using $.get method for ajax and you are trying to get val by $_POST. because of this you got this error. Try This hopefully it will help you:

$.post( "voteupdown.php", { fname: $("#fname").val(), lname: $("#lname").val() }, function( data ) {
  $("#result").html(data);
});

or if you wants to get response in json format than use this

$.post( "voteupdown.php", { fname: $("#fname").val(), lname: $("#lname").val() }, function( data ) {
  $("#result").html(data);
}, "json");

Upvotes: 0

Jamiec
Jamiec

Reputation: 136239

Your server side script is expecting data to be POSTed to it, your javascript is sending a GET request. In addition, your GET request is not actually including any of the data.

Assuming you want to keep the server side expecting POST you should change your javascript as follows

$("#submit").click(function(){
        var fname = $('#fname').val();
        var lname = $('#lname').val();
        $.post("voteupdown.php"), {
           fname: fname,
           lname: lname
        },function (data) {
            $("#result").html(data);
        });
    });

Upvotes: 1

NaijaProgrammer
NaijaProgrammer

Reputation: 2967

Use this code in your form submit call:

$("#submit").click(function(){

        $.post(("voteupdown.php"), 

        { 
       fname: $("#fname").val(), 
           lname: $("#lname").val() 
    },

        function (data)
        {
            $("#result").html(data);
        });
});

Upvotes: 0

Richard Hedges
Richard Hedges

Reputation: 1188

Your code isn't working because your PHP is expecting data in the $_POST variable.
You're also not posting any of your form data to the PHP file.
Try the following:

$('body').on('submit', '#form', function(event) {

    event.preventDefault();

    var formData = $(this).serialize();

    $.ajax({
        url: 'voteupdown.php',
        type: 'post',
        data: formData,
        success: function(result) {
            $('#result').html(result);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            # error handling here
        }
    });

});

Upvotes: 1

Related Questions