I just tried sending data from javascript to php using ajax. Here is my code in show.html:
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#post-button").on("click", function(){
$.ajax({
type: "POST",
url: "get_test.php",
data: {name: "John"}
});
})
});
</script>
<body>
<input type="text" name="name"/>
<button name="post" id="post_button">Test Post</button>
</body>
</html>
And the php code:
<?php
if(isset($_POST['post_button'])){
$name = $_POST['name'];
print($name);
}
?>
I've tried to run it, but there is no changing and also no error. Nothing is happening. Could you tell me the problem? And also I want to get data from a form in which there is a text field inside. I will put before the button. How to get the data from that text field using javascript?
kmario23
62.1k17 gold badges174 silver badges160 bronze badges
asked Jun 20, 2014 at 7:57
Lupita Noyra
2212 gold badges3 silver badges12 bronze badges
4 Answers 4
Use serialize function:
function showValues() {
var str = $( "form" ).serialize();
$( "#results" ).text( str );
}
answered Jun 20, 2014 at 7:58
SergeevDMS
8216 silver badges15 bronze badges
Sign up to request clarification or add additional context in comments.
1 Comment
Lupita Noyra
How if I have the text field, so won't create text field in the js?
You shouldn't wrap document.ready() event in a function as it most likely won't ever fire and nothing will happen. All you need to do is this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#post-button").on("click",function(){
$.ajax({
type: "POST",
url: "get_test.php",
data: {name: "John"}
});
});
});
</script>
<body>
<button name="post" id="post-button">Test Post</button>
</body>
6 Comments
JKurcik
Please adjust the code according to the example, You need to adjust the HTML, too, not only the javascript. Check if your selectors really find the required element.
JKurcik
<button name="post" id="button-post" >Test Post</button> - you have swapped the words inside the ID attribute :) Use id="post-button" instead.
biswajitGhosh
First of all make sure that your ajax call is working fine from Network (in chorme).
JKurcik
Is your problem solved then? Or is there still a problem? If the problem persists then there is a problem either with your PHP file or your url. Is your php file hosted locally or is it accessible from the internet? if yes, can you post the full url here so I can see the response code?
|
html
<input type="text" name="name" id="somename"/>
<button name="post" onclick=post();>Test Post</button>
<div id="someid"></div>
javascript:
function post(){
$.ajax({
type: "POST",
url: "get_test.php",
data: {name: $("#somename").val()},
success:function(data){
$("#someid").html(data);//this will be the data returned from php
//console.log(data);
}
});
}
answered Jun 20, 2014 at 7:59
Susheel Singh
3,8546 gold badges34 silver badges69 bronze badges
8 Comments
Lupita Noyra
what is console.log(data) use for? and, can I don't use the
success?Lupita Noyra
I'm sorry sir, I wanna send the data to PHP. Not for show the data in html page.
Susheel Singh
its being sent already. you don't need a click inside a function because your calling it from button anyhow. i updated again check
Susheel Singh
your question is not complete by the way
Lupita Noyra
Yes, please. Thanks before
|
In your get_test.php file
<?php
parse_str($_POST['data'], $data);
if(isset($data['name'])){
$name = $data['name'];
print($name);
}
exit;
?>
Please try with this code, this may helps you.
answered Jun 20, 2014 at 8:36
biswajitGhosh
1571 gold badge2 silver badges17 bronze badges
5 Comments
Lupita Noyra
I've tried it, but still nothing happened. Any other way?
biswajitGhosh
This 'data' is from your post send from ajax, and $data is a variable name. Simple !:)
biswajitGhosh
Are you sure about your ajax are call when the event occur..? If sure then it should work.
Lupita Noyra
Yes, I'm sure. I've tried to alert name from the text field, and it works.
biswajitGhosh
I have updated my answer, please use a exit with existing code, and use your console or network in browser to view the output from the ajax as your code have no return handler, like success or error.
default
$(document).ready(function(){wrapper... it's already inside a function.id="post"and can trigger the$("#post").click(function(){ }and to get the value you can usevar val= $("#text_box_id").val();