Using POST via AJAX and PHP to send data

Question

I have an object I am sending in an AJAX request:

 function send_value() {
    $.ajax({
        type: 'post',
        url: 'get.php',
        data: {
            source1: "some text",
            source2: "some text 2",
            uniId: 3
        },
        success: function (data) {
            console.log(data);
        }
    });
    return false;
}

I am trying to post them on click of a button

<head>
    <script src="./script.js"></script>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
    <form action="get.php" method='post' name='sendform' onSubmit='send_value()'>
        <input type='submit' value='Test1'>
    </form>
</body>

Then I print the variables using PHP:

<?php
    if (!empty($_POST["uniId"])) 
    {
        if ($_POST["uniId"] == 3) 
        {
            echo 'your logged in as '; 
            echo $_POST['uniId'];

            $src1 = $_POST['source1'];
            $src2 = $_POST['source2'];
            echo $src1;
            echo $src2;
        } 
        else 
        {
            echo 'sorry uniID is not correct';
        }
    } 
    else 
    {
        echo "Im sorry the page was not able to load ";
        var_dump($_POST);
    }

Now the uniID is 3 so I hope to see:

your logged in as 3 some text some text2

But instead I get:

Im sorry the page was not able to load
C:\wamp64\www\mysite\get.php:20:
array (size=0)
empty

What is wrong in my code that the variables are not being posted and printing out in my PHP?

Thanks

remove action="get.php" from form and add return false in ajax request at end — devpro
– devpro, Commented Oct 14, 2016 at 10:55

Avinash Singh · Accepted Answer · 2019-08-16 10:20:16Z

1

You're missing the dataType

function send_value() {
    $.ajax({
        type: 'POST',
        url: 'get.php',
        dataType: "json",
        data:({"uniId":"test"}),
        success: function (data) {
            console.log(data);
        }
    });
    return false;
}

edited Aug 16, 2019 at 10:20

Avinash Singh

5,4048 gold badges26 silver badges38 bronze badges

answered Oct 14, 2016 at 12:52

G. Mansour

6966 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Benjamin Oats Over a year ago

and form like <form action="get.php" method="post" name="sendform" onsubmit="return send_value();">

G. Mansour Over a year ago

check this post stackoverflow.com/questions/39948002/… you will find what you need

Rory McCrossan · Accepted Answer · 2016-10-14 10:54:04Z

The issue is because you're not preventing the standard form submission. Hence your form element is sent with no data as it contains no form control elements.

To fix this you can return the function output to the event handler:

<form action="get.php" method="post" name="sendform" onsubmit="return send_value()">

However and much better approach is to attach the submit event using unobtrusive JS and prevent the standard form submission. As you're using jQuery already, here's how you can do that:

$(function() {
    $('form').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: 'get.php',
            data: {
                source1: "some text",
                source2: "some text 2",
                uniId: 3
            },
            success: function (data) {
                console.log(data);
            }
        });
    });
});

<form action="get.php" method='post' name='sendform'>
    <input type='submit' value='Test1'>
</form>

Why's that? Any error messages? Which method have you attempted to use?
No its justprinting out the same as before and not getting the varibles
Have you checked the request in the console to ensure the data is being sent correctly?
@devpro nice, ill add a new jquery CDN and try again with Rory's answer. thanks

Harsh Gandhi · Accepted Answer · 2016-10-14 12:29:46Z

Please Use this form code

<head>

       <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
    <form action="get.php" method="post" name="sendform" onsubmit="return send_value();">
        <input type='submit' value='Test1'>
    </form>
</body>
 <script>

 function send_value() {
    $.ajax({
        type: 'post',
        url: '2.php',
        data: {
            source1: "some text",
            source2: "some text 2",
            uniId: 3
        },
        success: function (data) {
            console.log(data);
        }
    });
    return false;
}

</script>

"get.php" FILE

<?php
print_r($_POST);
    if (!empty($_POST["uniId"])) 
    {
        if ($_POST["uniId"] == 3) 
        {
            echo 'your logged in as '; 
            echo $_POST['uniId'];

            $src1 = $_POST['source1'];
            $src2 = $_POST['source2'];
            echo $src1;
            echo $src2;
        } 
        else 
        {
            echo 'sorry uniID is not correct';
        }
    } 
    else 
    {
        echo "Im sorry the page was not able to load ";
        var_dump($_POST);
    }
    ?>

This is the main thing:

<form action="2.php" method="post" name="sendform" onsubmit="return send_value();">

Would this work local like through wamp, as it just dose not work for me ?
I have also checked on wamp. Please make files name correct in form action attribute and in ajax url parameter.

Collectives™ on Stack Overflow

Using POST via AJAX and PHP to send data

3 Answers 3

2 Comments

9 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

9 Comments

3 Comments

Linked

Related