CODEWITHSUNDEEP
phpjavascriptajaxjquery
sun
sun

Reputation: 1668

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

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?

Upvotes: 0

Views: 904

Answers (3)

bfavaretto
bfavaretto

Reputation: 71908

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.

Upvotes: 4

Taimur Khan
Taimur Khan

Reputation: 531

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); 
} 
?>

Upvotes: 0

sarada
sarada

Reputation: 1

chage the url to url:"response.php"

and write the code in responce.php like this

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

Upvotes: 0

Related Questions