Trying to send a value from JS to PHP - JQuery's $.ajax() method is not working

Question

I want to execute a JS function when a PHP form is submitted, and from that function, I want to return a value (which is based on user's input) to PHP, where I'd like to echo it.

This is an SSCCE. In the real code, there is more than just echoing the value, and the value is a JSON object.

Following is my code. The problem is that the $.ajax(); part is not working. Nothing happens in the browser after alert(name);. Why isn't this working properly? How can I fix this?

From index.php:

<form id="form">
  Name:
  <input id="name" type="text" />
  <input type="Submit" value="Go" />
</form>

From scripts.js:

$(document).ready(function() {

    $("#form").submit(function(event) {
        event.preventDefault();

        var name = $("#name").val();
        alert(name);

        $.ajax({
            type:'POST',
            url:'echo.php',
            data: {
                nameEntered : name
            }
        });

    });

});

echo.php:

<?php  
if (    isset($_POST["nameEntered"]) && !empty($_POST["nameEntered"])    ) {
    echo $_POST["nameEntered"];
} else {
    echo '$_POST["nameEntered"] is not set.';
}
?>

EDIT:

Console:

Network:

EDIT 2:

Added the following to $.ajax():

,
success: function(){
    alert("success");
},
error : function(){ 
    alert("error");
}

I get an alert saying success but the browser NEVER directs to echo.php =s

EDIT 3:

After the alert saying success, a ? is added to the URL in the browser. Initially the URL was http://localhost/Test12/index.php and it changed to http://localhost/Test12/index.php?.

And in the console you see? And nothing would happen as you don't define success callback. — u_mulder
– u_mulder, Commented May 6, 2016 at 18:07
He can still see the php output from the response page. Just nothing in JS. Did you include jQuery library on the page before your script? — George Irimiciuc
– George Irimiciuc, Commented May 6, 2016 at 18:08
submit(function() { here event is missing submit(function(event) { — Pardeep Poria
– Pardeep Poria, Commented May 6, 2016 at 18:12
Maybe it's a permissions issue? Can you run your PHP script without an ajax call to it? Like access it in your browser directly, like at localhost/echo.php ? — George Irimiciuc
– George Irimiciuc, Commented May 6, 2016 at 19:13

Johnny John · Accepted Answer · 2016-05-06 19:15:11Z

2

This way should show response.

JAVASCRIPT

$("#form").submit(function(event) {
    event.preventDefault();

    var name = $("#name").val();
    //alert(name);

    $.ajax({
        type:'POST',
        url:'http://localhost/Test12/echo.php',
        data: {
            nameEntered : name
        },
        success : function(data){
            console.log(JSON.parse(data));
        },
        error : function(error){
            console.log('erro', error);
        }
    });

});

PHP

<?php  

if (isset($_POST["nameEntered"]) && !empty($_POST["nameEntered"])) {
    $name = array("nome" => $_POST["nameEntered"]);
    echo json_encode($name);
} else {
    echo '$_POST["nameEntered"] is not set.';
}
?>

edited May 6, 2016 at 19:15

answered May 6, 2016 at 18:14

Johnny John

3842 silver badges10 bronze badges

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

12 Comments

Solace Over a year ago

I did this. Console is still empty, which has added to the confusion. Also, this page says success is optional?

Johnny John Over a year ago

Is optional, but you need a promisse, to say if your request fail or give success, maybe not the success function, but a done function at least, if still empty the console, the problem maybe is in the php file

Solace Over a year ago

OK I removed data and error arguments from the functions you added, and changed console.log() statements to alert("success"); and alert("error"); statements respectively. I got the alert saying "success". But this browser NEVER directs to echo.php =s

Johnny John Over a year ago

So the error is inside your php file, because if u got a success, that mean you comunicate the js to your server

Johnny John Over a year ago

I`m not making blind guesses, the error are in the url, you need specify the url where are your php file, so the ajax can send a request, and php return a response, so every change in code you need look to your network tab, to see if your app send a request to the right path. You are running a server right?

|

cssyphus · Accepted Answer · 2016-05-06 21:59:38Z

1

As a test, replace your echo.php with:

<?php  
    echo 'Incoming = ' .$_POST["nameEntered"]. "/r/n";

    if (isset($_POST["nameEntered"]) && !empty($_POST["nameEntered"])) {
        echo 'Here 01';
    } else {
        echo 'Here 02';
    }
?>

answered May 6, 2016 at 21:59

cssyphus

40.5k21 gold badges104 silver badges125 bronze badges

1 Comment

Solace Over a year ago

I changed echo 'Here 01'; to echo $_POST["nameEntered"]; and I get the correct value in the alert. This works. Someone in the answers had previously said that I had to use return statement instead of echo. I was doing that. But I guess I did not have to do that. Thank you so, so very much

Nitin · Accepted Answer · 2016-05-06 18:26:52Z

1

Try removing the document.ready() or instead of .submit use .on('submit', function(e){}); or add absolute path '/page.php'

edited May 6, 2016 at 18:26

answered May 6, 2016 at 18:20

Nitin

9161 gold badge9 silver badges25 bronze badges

3 Comments

Solace Over a year ago

Changing .submit to ` .on('submit', function(e){});` didn't change anything. Removing document.ready() results in reloading of page as soon as submit is clicked

Nitin Over a year ago

What about adding the absolute path?

Nitin Over a year ago

Try adding only a slash '/page' in case you tried the full path else last option, probably wont make a difference but have you tried setting cache to false and putting quotes around nameEntered in the js file?

Nicolas Gordillo · Accepted Answer · 2016-05-06 18:28:00Z

1

I think you need to add "event" as parameter in your submit function, in addition to the success call to show results

answered May 6, 2016 at 18:28

Nicolas Gordillo

111 silver badge5 bronze badges

2 Comments

Solace Over a year ago

Did that. No luck.

Nicolas Gordillo Over a year ago

so I can't comment on other answers, but did you try adding JSON.stringify({ nameEntered : name })

cssyphus · Accepted Answer · 2016-05-06 21:10:52Z

1

What does this give you:

$.ajax({
    type:'POST',
    url:'echo.php',
    data: {
        nameEntered : name
    },
    success: function(recd){   // <-------
        alert(recd);           // <-------
    },
    error : function(){ 
        alert("error");
    }
});

answered May 6, 2016 at 21:10

cssyphus

40.5k21 gold badges104 silver badges125 bronze badges

3 Comments

Solace Over a year ago

An alert having a blank string

cssyphus Over a year ago

Aha! That tells you something - the data being echo'd out from PHP is also blank. See new test in separate answer.

Solace Over a year ago

"the data being echo'd out from PHP is also blank" - No someone in the answers had said that I have to use return instead of echo. I was using return statement in echo.php

Aaron Cicali · Accepted Answer · 2016-05-06 19:26:23Z

0

You're calling event.preventDefault(), but you've failed to add the event to your callback's parameters... so you're not actually stopping the form from being submitted. That is why you see the question mark in the address bar.

Try:

function(e){
    e.preventDefault();
};

answered May 6, 2016 at 19:26

Aaron Cicali

1,55615 silver badges30 bronze badges

1 Comment

Solace Over a year ago

No I added it later. Lemme reflect it in question. Should already have, My bad

Collectives™ on Stack Overflow

Trying to send a value from JS to PHP - JQuery's $.ajax() method is not working

6 Answers 6

12 Comments

1 Comment

3 Comments

2 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

12 Comments

1 Comment

3 Comments

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related