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.
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 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.
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>
I am learning how to call external javascript files in my PHP code. I got some codes from the internet and tried it but its not working. Can somebody pls give me some advice or explain to me this. I am not a programmer but I am studying how to program and just started learning that's why I have difficulty understanding some concepts.
I have here the codes, PHP File and JS file. They are in the same folder.
Here are the codes:
index.php
<html>
<head>
<script language="JavaScript" src="exer_1.js"></script>
</head>
<body>
<form name="myform">
<input type="text" id="input_1" name="input_1" /><br />
<input type="text" id="input_2" name="input_2" /><br />
<input type="submit" value="Check!" onclick="javascript:parseTest() return false;" />
</form>
</body>
</html>
exer_1.js
function parseTest() {
var elem_1 = document.getElementById('input_1');
var elem_2 = document.getElementById('input_2');
var inp_1 = elem_1.value;
var inp_2 = elem_2.value;
if (inp_1 == "" && inp_2 == "") {
alert("You need to enter integers!!!");
elem_1.focus();
} else if (inp_1 == ""){
alert("You need to enter Integer 1!!!");
elem_1.focus();
} else if (inp_2 == ""){
alert("You need to enter Integer 2!!!");
elem_2.focus();;
} else {
if (!parseInt(inp_1) || !parseInt(inp_2)) alert ("Enter Integers only!!!");
else {
alert("Correct Inputs!!!");
}
}
}
<script language="JavaScript" src="exer_1.js"></script>
The language attribute is deprecated, use type instead
<script type="text/javascript" src="exer_1.js"></script>
The correct syntax for inline event binding is
<input type="submit" value="Check!" onclick="parseTest(); return false;" />
You may want to consider moving the event handler to the form's submit event. Your function could then return false on error or true on success, which can then be used to determine whether the form submission continues or not, eg
<form onsubmit="return parseTest()">
You have not really specified what is not working but i am noticing something in your code.
<html>
<head>
<script language="JavaScript" src="exer_1.js"></script>
</head>
<body>
<form name="myform">
<input type="text" id="input_1" name="input_1" /><br />
<input type="text" id="input_2" name="input_2" /><br />
<!-- The following will cause an error -->
<input type="submit" value="Check!" onclick="javascript:parseTest() return false;" />
<!-- instead use this -->
<input type="submit" value="Check!" onclick="javascript:parseTest(); return false;" />
</form>
</body>
</html>
semicolon error
I would look into JQuery for a nice javascript framework. Instead of putting javascript code on the button's "onclick" event, with jquery you could do something like:
$('#submit').click(function() {
// whatever code you want to run when submit is clicked.
alert('Submit clicked');
}
<script type="text/javascript" src="exer_1.js"></script>