I test my first AJAX form, but when I submit my form the alert message just shows '2'. I search for sending ajax data to the same page and I found, that I can do that, but URL is optional.
my PHP code:
<html>
<body>
<form action="index.php" method="post">
<input name="name" type="text" />
<input type="submit" value="submit" name="submit">
</form>
<?php
if(isset($_POST["name"]))
{
$data="test string";
echo json_encode($data);
}
?>
<script src="jquery-2.1.0.min.js"></script>
<script src="ajax.js"></script>
</body>
</html>
my AJAX code:
$(document).ready(function() {
$('form').submit(function(event) {
$.ajax({
type : 'POST',
url : 'index.php',
data : $(this).serialize(),
dataType : 'json',
encode : true
})
.done(function(data) {
alert(1);
})
.fail(function(data) {
alert(2);
});
event.preventDefault();
});
});
I don't know where I go wrong?
It's better to delegate page generation and json-response generation to different pages. At least you should isolate it, because the following part of page also ends up in ajax-response:
<html>
<body>
<form action="index.php" method="post">
<input name="name" type="text" />
<input type="submit" value="submit" name="submit">
</form>
...
<script src="jquery-2.1.0.min.js"></script>
<script src="ajax.js"></script>
</body>
</html>
Modifiyng your script, you can do something like that:
<?
if(isset($_POST["name"]))
{
// And don't forget to specify content type!
header("Content-type: application/json");
$data="test string";
echo json_encode($data);
} else {
?>
<html>
<body>
<form action="index.php" method="post">
<input name="name" type="text" />
<input type="submit" value="submit" name="submit">
</form>
<script src="jquery-2.1.0.min.js"></script>
<script src="ajax.js"></script>
</body>
</html>
<? } ?>
And, for future, please, post the exact request and response information in your questions, which you can get on Network page for developer tools of chrome, for example.
Related
I have code with single page PHP method
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<?php
if(isset($_POST['submit'])){
$date=$_POST['date'];
}else{
$date=date('Y-m-d');
}
?>
<form action="" method="post" id="formId">
<input type="text" name="date" id="datepicker">
<input type="submit" name="submit">
</form>
<?php echo $date; ?>
<script>
$(function() {
$('#datepicker').datepicker({
autoclose: true
})
});
</script>
how, if i want to use ajax to keep the page not to reload? please help me
ok so here is quick tutorial. ajax helps you to submit your form without page loading. You have to use action="somepage.php". when you click it it will pass the values there right away. so here is basic coding
<form id="formId">
<input type="text" name="dte" id="dte">
<button type="button" id="buttonsubmit">submit</button>
</form>
and ajax should be look like. In my coding id="buttonsubmit" is button id so when user will click it it run the function and takes the values
var dte;
$("#buttonsubmit").click(function(){
dte = $("#dte").val();
$.ajax({
url:"somepage.php",
method:"POST",
data:{dte: dte},
success: function (data){
if(data == "done"){
window.location='http://somedomain.com/';
}
}
});
});
in somepage.php you will have
<?php
if(isset($_POST['dte'])){
$date=$_POST['dte'];
echo "done";
}else{
$date=date('Y-m-d');
}
?>
note: i am writing echo "done"; in success method it will come and
according to code when success will see it will redirect the page
I want to post simple form with ajax and update content of div (id result), but I get redirected to server.php file.
index.php:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<form id="wbForm" action="server.php" method="POST">
Date1: <input type="text" name="date1" value="2000-01-21"><br>
Date2: <input type="text" name="date2" value="2000-01-02"><br>
<input type="submit" name="submit" value="Submit">
<div id="result"></div>
</form>
</body>
</html>
ajax.js:
$(document).ready(function showHint(form) {
$.ajax({
type:'POST',
url: 'server.php',
data:$('#wbForm').serialize(),
success: function(response) {
$('#wbForm').find('.result').html(response);
}});
});
server.php:
<?php
$input=$_POST;
//... compute something
echo "result";
?>
String "result" should appear in div with id=result, but I get redirected to /server.php where I can see "result", why?
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<form id="wbForm" action="server.php" method="POST">
Date1: <input type="text" name="date1" value="2000-01-21"><br>
Date2: <input type="text" name="date2" value="2000-01-02"><br>
<input type="submit" name="submit" value="Submit">
<div id="result"></div>
</form>
</body>
</html>
ajax.php
$(document).on("ready", function(){
//Form action
$("#wbForm").on("submit", function(event){
// Stop submit event
event.preventDefault();
$.ajax({
type:'POST',
url: 'server.php',
data:$('#wbForm').serialize(),
success: function(response) {
$('#wbForm').find('.result').html(response);
}});
});
});
server.php
<?php
$input = $_POST;
print_r( $input );
?>
Happy Codding!!
There are several issues. First, you are getting redirected to server.php when you hit submit because of your form action "server.php". If you want the AJAX call to happen when clicking the button you should put the AJAX call in a JavaScript function and call that function onclick()
The reason the jQuery .AJAX call isn't triggering success is because it's expecting JSON. Try:
<?php
header("content-type:application/json");
$input=$_POST;
//... compute something
echo json_encode("result");
?>
Hope this helps.
I wanted to show textbox content without refreshing,so I used Jquery
I have problem with this part: name:form.name.value what does this exactly do?And why I have problem?when entering it will show nothing
<html>
<head>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
function get(){
$.post('msql.php',{name:form.name.value},
function(output){
$('#mydiv').html(output).show();
}
);
}
</script>
</head>
<body>
<form name="name">
<input type="text" name="name">
<input type="button" name="but" value="Check" onclick="get();">
<div name="mydiv"></div>
</form>
</body>
</html>
msql.php:
<?php
echo $_POST['name'];
?>
try this:
$(document).ready(function() {
$('input[name="but"]').click(function() {
alert("start");
$name = $('input[name="name"]').val();
$.post('msql.php', {
name: $name
}, function(output) {
alert(output);
$('#mydiv').html(output).show();
});
return false;
});
})
html:
<form id="form_name">
<input type="text" name="name">
<input type="button" name="but" value="Check">
</form>
<div id="mydiv"></div>
I think your problem lies in the period (.) just after html.
it should be $('#mydiv').html(output);
Also, you'll be better off using mgraph's solution but remove the period I just told you about.
I don't think jquery understand what form.name.value is unless you provide it with a proper selector like mgraph suggested.
test.html
<html>
<!--
Please see the full php-ajax tutorial at http://www.php-learn-it.com/tutorials/starting_with_php_and_ajax.html
If you found this tutorial useful, i would apprciate a link back to this tutorial.
Visit http://www.php-learn-it.com for more php and ajax tutrials
-->
<title>php-learn-it.com - php ajax form submit</title>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script>
function sendRequest() {
new Ajax.Request("test.php",
{
method: 'post',
postBody: 'name='+ $F('name'),
onComplete: showResponse
});
}
function showResponse(req){
$('show').innerHTML= req.responseText;
}
</script>
</head>
<body>
<form id="test" onSubmit="return false;">
<input type="hidden" name="name" id="name" value="value">
<input type="hidden" name="somethingElse" value="test" value="submit" onClick="sendRequest()">
</form>
Post!
<div id="show"></div>
<br/><br/>
</body>
</html>
<?php
/*
* Please see the full php-ajax tutorial at http://www.php-learn-it.com/tutorials/starting_with_php_and_ajax.html
* If you found this tutorial useful, i would apprciate a link back to this tutorial.
* Visit http://www.php-learn-it.com for more php and ajax tutrials
*/
if($_POST["name"] == "")
echo "name is empty";
else
echo "you typed ".$_POST["name"];
?>
Where is the wrong in form thanks.
A few things are wrong here:
You have an onclick on a hidden form element
The Post! anchor onclick isn't submitting anything
Suggested changes:
<head>
<script type="text/javascript" src="prototype.js"></script>
<script>
function showResponse(req){
$('show').innerHTML = req.responseText;
}
</script>
</head>
<body>
<form id="test" name="test" action="test.php">
<input type="hidden" name="name" id="name" value="cats" />
<input type="hidden" name="somethingElse" value="test" />
</form>
Post!
<div id="show"></div>
</body>
form id="test" and no name
and yet :
a href="#" onclick="myForm.submit()"
just for starters.
I want to pass both the values using ajaxForm, displaying both the values separately in test.php
-------test.php-----------------------------------------
<script language="javascript" type="text/javascript">
$('#test_form').ajaxForm({
target:'#result',
success:function() {
$('#result').show();
}
});
</script>
<form id="test_form" method="" action="test1.php">
<input type="submit" id="sub" value="sub_value">
</form>
<div id="result"></div>
-------test1.php---------------------------------------
<?
$t="test value";
$u="test value 1";
?>
Thanks
Jean
Hy Jean
Welcome to Stackoverflow
Here is the fixed code:
-------test.php-----------------------------------------
<script language="javascript" type="text/javascript">
$.post("test.php", {testval: val}, function(data){
if (data.length>0){
$('#result').show();
$("#result").html(data);
}
})
</script>
<form id="test_form" method="" action="test1.php">
<input type="submit" id="sub" value="sub_value" name="testval">
</form>
<div id="result"></div>
-------test1.php---------------------------------------
<?
// now coding in PHP is easiyer
if(isset($POST["testval"]))
{
// this is now for your Learning purposes that you see how things are
$testval = strip_tags(mysql_escape_string($POST["testval"]));
echo $testval;
}
// thats it have fun :-)
?>