Why am i getting javascript and html code when using ajax to send and return value from php?

Question

Today I tried Ajax with the below code. Logic seems to be correct because success function is triggering but i can't able to get return value from php file, instead i'm getting Javascript and html code when i alert the response.

example1.php

 <?php
    echo $_POST['name'];
 ?>
<form action="?" method="post">
<input type="text" id="d1" name="name" value="">
<input type="text" id="d2" name="place" value="">
<input id="target" type="submit" name="submit" value="send">
</form> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#target").click(function()
{
var data1=$("#d1").val();
var data2=$("#d2").val();
$.ajax
({
type:"POST",
url:"example1.php",
data:{name:data1,place:data2},
success:function(msg)
{
alert(msg);
}
});
return false;
});
});
</script>

When i run the example1.php it shows the alert message like given below Submitted name

<form action="?" method="post">
<input type="text" id="d1" name="name" value="">
<input type="text" id="d2" name="place" value="">
<input id="target" type="submit" name="submit" value="send">
</form> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#target").click(function()
{
var data1=$("#d1").val();
var data2=$("#d2").val();
$.ajax
({
type:"POST",
url:"arithmetic.php",
data:{name:data1,place:data2},
success:function(msg)
{
alert(msg);
}
});
return false;
});
});
</script>

Why am i getting this instead of name and place value from example1.php?

Why did you edit your question with <form action="?"? The operative character being >> ? << - you should explain the "why". — Funk Forty Niner
– Funk Forty Niner, Commented Jul 24, 2013 at 13:51
After your edit, the question became confusing... How many php files you're talking about now? And what "name and place value from example1.php"? You removed all php code... Could you please clarify? — bfavaretto
– bfavaretto, Commented Jul 24, 2013 at 13:52
@bfavaretto only one file. now i added php code in it. i can get value but along with the client side whole code — sun
– sun, Commented Jul 24, 2013 at 13:56
@bfavaretto thanks for your extra bit of information to use submit function. it is helpful — sun
– sun, Commented Jul 24, 2013 at 14:00

bfavaretto · Accepted Answer · 2013-07-24 14:01:07Z

4

UPDATE considering that the question changed

You're posting to the same file where the form is, so your response includes the HTML code in that page. You have to post to a different PHP file that only responds with the content you want, or change your current file to respond differently if some data was posted.

Your ajax request is not going to response.php, because you told jQuery to post to a different URL:

url:"arithmetic.php",

Change that to response.php.

To guarantee you always post with ajax, you should bind to the form's submit event, instead of the submit button click:

$('form').submit(function(e) {

    // ajax stuff

    // prevent default (submit)
    return false;
});

With your current code, the form will submit without ajax if you hit enter while focused on one of those input fields.

edited Jul 24, 2013 at 14:01

answered Jul 24, 2013 at 13:36

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

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

14 Comments

Barmar Over a year ago

Seems right, although it doesn't explain why the alert is showing the entire contents of the example1.php page.

Funk Forty Niner Over a year ago

I for one am curious. Does the action still need to be <form action="response.php" method="post"> or can that be left blank, since it's inside the Ajax?

bfavaretto Over a year ago

@Barmar I guess example1.php was just an example, and in the actual code it's arithmetic.php

Taimur Khan Over a year ago

agree with this answer, just want to add a little improvement. Instead write response code as follows <?php if(isset($_POST['name'])) {echo $_POST['name']; echo $_POST['place']; exit(0); } ?>

bfavaretto Over a year ago

@Fred Yes, if you leave it blank it will assume it should post to the current page. You should take an extra precaution to guarantee you always post with ajax, I'll update the answer.

|

sarada · Accepted Answer · 2013-07-24 14:00:19Z

0

chage the url to url:"response.php"

and write the code in responce.php like this

$name=$_POST["name"];
$place=$_POST["place"];

edited Jul 24, 2013 at 14:00

answered Jul 24, 2013 at 13:48

sarada

14 bronze badges

2 Comments

Barmar Over a year ago

You mean like bfavaretto's answer over 10 minutes ago?

Funk Forty Niner Over a year ago

@bfavaretto Seems like the "plot thickens", "as it were".

Taimur Khan · Accepted Answer · 2013-07-24 14:00:20Z

0

Change your response code as follows. You need to stop execution after writing your response.

<?php 
if(isset($_POST['name'])) {
echo $_POST['name']; 
echo $_POST['place']; 
exit(0); 
} 
?>

answered Jul 24, 2013 at 14:00

Taimur Khan

5318 silver badges21 bronze badges

Collectives™ on Stack Overflow

Why am i getting javascript and html code when using ajax to send and return value from php?

3 Answers 3

14 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

14 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related