I want to use jQuery to make a page partly refresh. Page b is loaded in page a. And page b has a mysql search which gets values depending on a URL rule. So is it possible for PHP to get a value from another page's url? Thanks.
page a:
<script type="text/javascript">
jQuery(document).ready(function(){
$('#pageContent').load('B.php');
});
</script>
<div id="pageContent"></div>
page b:
<script language="JavaScript">
function pagination(page)
{
window.location = "a.php?more="+document.form.more.value;
}
</script>
<form name="form" action="a.php" method="GET">
<input type="text" name="more" value="<? echo $_GET['more'];?>">
<input type="submit" value="Search">
</form>
Maybe you can try this:
<script type="text/javascript">
jQuery(document).ready(function(){
$('#pageContent').load('B.php?var1=test&var2=test');
});
</script>
<div id="pageContent"></div>
page B
<script language="JavaScript">
function pagination(page)
{
window.location = "a.php?var1=<?php echo $_GET['var1'];?>&var2=<?php echo $_GET['var2'];?>&more="+document.form.more.value;
}
</script>
<form name="form" action="a.php" method="GET">
<input type="text" name="more" value="<? echo $_GET['more'];?>">
<input type="submit" value="Search">
</form>
Related
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.
i write sample code to ajax post javaxcript varible to php in 2 page, test.php and validate.php.
test.php :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.min.js" ></script>
</head>
<body>
<form>
<input type="text" id="name" placeholder="enter Your name...." /><br/>
<input type="text" id="age" placeholder="enter Your age...." /><br/>
<input type="button" value="submit" onclick="post();">
</form>
<div id="result" ></div>
<script type="text/javascript">
function post()
{
var name=$('#name').val();
var age=$('#age').val();
$.post('validate.php',{postname:name,postage:age},
function(data)
{
if (data=="1")
{
$('#result').html('you are over 18 !');
}
if (data=="0")
{
$('#result').html('you are under 18 !');
}
});
}
</script>
</body>
</html>
validate.php
<?php
$name=$_POST['postname'];
$age=$_POST['postage'];
if ($age>=18)
{
echo "1";
}
else
{
echo "0";
}
?>
how can i write/change above code in same page ?? and validate.php insert in test.php ??
added after first answer :
"but i dont have/use any button or in my page.
and where can i insert validate.php code in test.php. please help by insert complete correct code."
Try adding a submit() method to your <form> rather than attaching the event to the submit button.
$(document).on('submit', 'form', function(){
post();
return false;
});
At the moment I think your form is submitted no matter what, you have to either return false on submit or preventDefaults()
A good idea is also to add an ID to your form in case you have more than one on your page and use the relevant selector in the .on event handler such as
$(document).on('submit', $('#form-id'), function(){ ... });
ajax is use for exchanging data with a server. If you want write code in same page so reload page and write validate.php code above of test.php like this
<?php
//validate.php code
?>
<form action=test.php type=POST>
<input type="text" id="name" placeholder="enter Your name...." /><br/>
<input type="text" id="age" placeholder="enter Your age...." /><br/>
<input type="button" value="submit">
</form>
I want my form to load webpages. I want to turn html textbox into address bar. Just like whenever I write URL into that, It loads webpages in the same window.
My current HTML code is:
<html>
<body>
<title>BlogSoc Browser</title>
<h1 style="font-family:verdana;font-size:50px;color:#000000;text-align:center;">Address Bar</h1>
<center><form method="GET" action="/load.php"><input type="text" name="url" value="http://" /><input type="submit" value="Go" name="submit" /></form></center>
</body>
</html>
It looks like this: (couldn't post image)
or you can just open http://blogsoc.org/load
Please tell me the appropriate load.php code. Thanks in advance.
<?php
header("Location: " . $_GET['url']);
?>
should be what you need.
Using client side scripting:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myform').submit(function(){ //when form is submitted..
window.location = $('#url').val(); //..get url from the textbox and load that url
return false; // prevent the form from being submitted
});
});
</script>
</head>
<body>
<form id="myform">
<input type="text" id="url" value="http://" />
<input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>
I used jQuery. For reference: https://developer.mozilla.org/en-US/docs/DOM/window.location
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.