i have two php file , test.php and test2.php
in 'test.php' i have a form and i want to get name and echo it with ajax and php here is my code , what is wrong with it?
test.php
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test2.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form method="get">
First name: <input type="text" name="fname">
<input type="submit" value="click me" onclick="showHint(fname)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
and test2.php is
<?php
$q = intval($_GET['q']);
echo $q;
?>
The button in the form is a submission input which will result in the page being reloaded. Add return false to your onclick method to prevent this from happening:
<input type="submit" value="click me" onclick="showHint(fname); return false">
Additionally, your showHint function expects a string but you are passing an HTML input. You can get the text value by adding the following to the top of the function:
if (typeof str !== 'string' && typeof str.value !== 'undefined') {
str = str.value;
}
Related
I want to prevent the main form to be submitted according to AJAX response.
HTML is like this...
<form action="test.php" method="POST">
<input type="text" name="email" id="email" onblur="ajax_check_email();">
<span id="email_alert"></span>
<input type="submit" name="submit">
</form>
Now I have a js file with ajax query -
function ajax_email_check () {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("email_alert").innerHTML=xmlhttp.responseText;
}
}
var email = document.getElementById("email").value;
xmlhttp.open("GET","ajax/check_email.php?email=" + email,true);
xmlhttp.send();
}
Now the php page returns Email Already Exists or Success.
All goes well but after showing the Text that the "email already exists...!" the main form is getting submitted when I hit submit. It should prevent me. But how am I gonna do that?
You can simply add a flag like var shouldSubmit = false, in your ajax response, if it's okay to submit, change shouldSubmit to true, then add a eventlistener to form
<script>
yourform.addEventListener("submit", function(e){
if(!shouldSubmit){
e.preventDefault();
return false;
}
});
</script>
Just catch the event and stop it.
<form id="myform" action="test.php" method="POST">
<script>
$('form#myform').submit(function(e){
e.preventDefault();
});
</script>
Just add this in form tag onsubmit="return false;"
Like this-
<form action="test.php" method="POST" onsubmit="return false;">
<input type="text" name="email" id="email" onblur="ajax_check_email();">
<span id="email_alert"></span>
<input type="submit" name="submit">
</form>
This ajax test should (by the will of about 2 hours now) return the request result into a textarea. The request is being made to the same page, and I have a $_POST isset test at the top of the body to check whether the request is coming from my POST request (I need to have the code all in one file). The result is that "text to appear in the textarea box" is returned by itself, and isn't placed inside the textarea.
//name of this page is testing.php
<html>
<head>
function loadXMLDoc()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("testTextarea").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.open("POST","testing.php",true);
xmlhttp.send("test");
}
</head>
<?
if (isset($_POST["testName"])) {
die("text to appear in the textarea box");
}
?>
<body>
<form action="testing.php" method="POST" onsubmit="loadXMLDoc(this.form); return false;">
<input class="command" type="text" name="testName" />
<div><textarea id="testTextarea"></textarea></div>
</body>
</html>
Try moving the die() to the top so that nothing else is outputted before die()
<?
if (isset($_POST["testName"])) {
die("text to appear in the textarea box");
}
?>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("testTextarea").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","testing.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("testName=blah");
}
</script>
</head>
<body>
<form action="testing.php" method="POST" onsubmit="loadXMLDoc(this.form); return false;">
<input class="command" type="text" name="testName" />
<div><textarea id="testTextarea"></textarea></div>
</form>
</body>
</html>
I have form which consists of a text field (id="txt1")
and a submit button(id="submit"). Ajax function 'showhint()' is called on 'onclick' event of submit button.
<form action="">
<input type="text" id="txt1" />
<input type="submit" id="submit" onclick="showhint()"/>
</form>
And ajax function
function showhint(){
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmllhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txthint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php",true);
xmlhttp.send();
}
Here gethint.php is page where showhint() function does its work and targeted div to write ajax respone is "txthint" .
what I want is to pass text value(form's) to ajax function. Is there any easy way?
Waiting for response, any usefull response would be highly appreciable.
thaks in adavance
var value = document.getElementById("txt1").value;
xmlhttp.open("GET","gethint.php?value="+value,true);
In gethint.php
echo $_REQUEST['value'];
If I read this properly, you are trying to get the value of the textbox and pass that to your showhint() method.
Try this:
<input type="submit" id="submit" onclick="showhint(document.getElementById('txt1').value)" value="test"/>
Then you can accept the value like this:
function showhint(value) {
// use value here
}
Hope that helps.
I don't see any errors in Firebug, and I can't figure out what's wrong with the AJAX.
PHP:
<?php
$subject = $_POST['subject'];
echo $subject;
?>
Javascript
<html>
<head>
<script type="text/javascript">
/* <![CDATA[ */
function ajax() {
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result_div").value = xmlhttp.responseText;
}
}
xmlhttp.open("POST","message.php",true);
xmlhttp.send();
return false;
}
/* ]]> */
</script>
</head>
<body>
<div id="result_div"></div>
<form action="" onsubmit="return ajax();">
<select name="teest">
<option value="hi">hi</option>
</select><br />
<input type="text" name="subject"> <br />
<input type="submit">
</form>
</body>
</html>
You are not POSTing anything. When using ajax forms are not handled automatically for you.
I'm going to get the checked radio button value using AJAX in PHP. I have done the following code, but i can't continue.
I need your help.
ajax_radio.php
<html>
<head>
<script type="text/javascript" src="ajax.js" ></script>
</head>
<body>
<input type="radio" name="radio1">Blue</input>
<input type="radio" name="radio2">White</input>
<input type="radio" name="radio3">Red</input>
<input type="button" name="btn" value="Click" onClick="hello('a')"></input><br />
<input type="text" id="btn_get" name="get_btn_value"></input>
</body>
</html>
ajax.js
var xmlHttp;
function GetXmlHttpObject(){
try{
xmlHttp = new XMLHttpRequest();
}
catch(e){
try{
xmlHttp = new ActiveXObject(Msxml2.XMLHTTP);
}
catch(e){
try{
xmlHttp = new ActiveXObject(Microsoft.XMLHTTP);
}
catch(e){
alert("doesn't support AJAX");
return false;
}
}
}
}
function hello(a){
GetXmlHttpObject();
xmlHttp.open("GET","ajax_radio.html?",true);
xmlHttp.onreadystatechange = response;
xmlHttp.send(null);
}
function response(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var radio_text = xmlHttp.responseText;
document.getElementById('btn_get').innerHTML = radio_text;
}
}
}
Do you know how to complete this? Thanks in advance. :)
Edit:
I can't post the code here right now, because of the low speed of network. I'm sorry.
I have shared it in rapidshare. Can you download it firstly, and help then? Thanks a lot.
I have to update it when i go back home. Too bad.
because I mostly use Jquery I wrote here a jquery snipped that checks radio button values because it is much easier and cleaner:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.4.0");
</script>
<script type="text/javascript">
$(function() {
$('#buttoncheck').click(function () {
var var_name = $("input[name='radio1']:checked").val();
$('#btn_get').val(var_name);
});
});
</script>
<html>
<head>
<script type="text/javascript" src="ajax.js" ></script>
</head>
<body>
<input type="radio" value="Blue" name="radio1">Blue</input>
<input type="radio" value="White" name="radio1">White</input>
<input type="radio" value="Red" name="radio1">Red</input>
<input id="buttoncheck" type="button" name="btn" value="Click"></input>
<br />
<input type="text" id="btn_get" name="get_btn_value"></input>
</body>
</html>
Take a look for jquery here: Jquery
Explanation:
This part selects the item with the ID #buttoncheck and checks if its ran: $('#buttoncheck').click(function () {
Then it will run the code in the function. This code gets the value of a input box with the name radio1. the ':checked' makes sure that it only selects the value of the checked radio button:
var var_name = $("input[name='radio1']:checked").val();
And last. This puts the value of the variable into the item with #btn_get as id:
$('#btn_get').val(var_name);