I have written a code that contain a text box and submit button. When I hit the enter with text box value it should go to another page(q.php) using ajax, and it should return values from there to here(home.php)
here is my code. (home.php)
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","q.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form onsubmit="return myFunction(document.getElementById('fname'))">
Enter name: <input type="text"id="fname" name="fname">
<input type="submit" value="Submit">
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
My next page(q.php)
<?php
$q = $_GET['q'];
echo $q."Some Content from this page";
?>
My answer is using html+jquery+php:-
<html>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script><!-- add jquery library -->
<form method="post">
Enter name: <input type="text"id="fname" name="fname">
<input type="submit" value="Submit" class= "abc">
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
<script type = "text/javascript">
$(document).ready(function(){ //when your page is rendered completly
$('.abc').click(function(e){ //when you click on submit button this function will run
e.preventDefault();//to prevent normal submission of form
if($('#fname').val() !== ''){ //check name field have some value
$.post('q.php',{'q':$('#fname').val()},function( data ){ //send value to post request in ajax to the php page
$('#txtHint').html(data); //print the response coming from php page to the result div inside your html code
});
}
});
});
</script>
And in php file:-
<?php
$q = $_POST['q'];
echo $q."Some Content from this page";
?>
Related
I'm just learning PHP, XML, AJAX, etc., and I have a form that works fine in general. But I'm having trouble passing the value/state of a checkbox to my PHP script.
Note that my server doesn't appear to work with POST methods (I'm looking into that separately). So I'm using GET. Hopefully that isn't related, but just wanted to note that in case it is relevant.
Here is my simplified HTML file:
<html>
<head>
<script>
function showUser(u) {
alert(u.value);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","checkbox_test.php?u=" + u.value,true);
xmlhttp.send();
return false;
}
</script>
</head>
<body>
<form method="get" onsubmit="return showUser(this.checkboxID)">
<input id="checkboxID" name="checkboxName" value="checkboxValue" type="checkbox">
<input type="submit" value="Submit">
</form>
<div id="txtHint"></div>
</body>
</html>
And here is my simplified PHP file:
<!DOCTYPE html>
<html>
<body>
<?php
$check = $_GET['u'];
if(isset($check)){
echo 'True';
}else{
echo 'False';
}
?>
</body>
</html>
Use u.checked as it's the attribute used by the input to determine the state of the checkbox, u.value will return checkboxValue
<input id="checkboxID" name="checkboxName" value="checkboxValue" type="checkbox">
Messing with some code from W3 schools with PHP and Ajax. I've got a database that I am pulling last names from. I want to be able to store that last name in a variable and print it out at the bottom of the page. Since the names are dynamically created from the database, there is no "value" to reference to capture the variable that way.
The code works by the user beginning to type a name into the textbox, and the AJAX function autocompletes. If the user selects a name as the one they were searching for, how do I capture that as a variable?
<!DOCTYPE html>
<html>
<head>
<script>
//Ajax tutorial - http://www.w3schools.com/ajax/
function showHint(str)
{
var xmlhttp;
if (str.length==0){
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("browsers").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getName.php?q="+str,true);
xmlhttp.send();
}
</script>
<?php
$msg = "";
$name = "";
$test = "Test.";
if (isset($_POST['enter'])) //check if this page is requested after Submit button is clicked
{
$name = trim($_POST['']);//What do I need to select here?!?
}
?>
</head>
<body>
<h3>Start typing a name in the input field below:</h3>
<form action="3-searchName.php">
Search by Last Name:
<!--
<select name="drop" onchange="showHint(this.value)">
<option value = "">Enter last name here</option>
</select>
-->
<input type="text" list="browsers" name="drop" value="" onkeyup="showHint(this.value)" />
<datalist id="browsers" >
</datalist>
<input name="enter" class="btn" type="submit" value="Submit" />
<br/><br/>
User information will show here when the button is clicked.
<br/>
<?php echo $name ;?>
<br/>
<?php echo $test ;?>
</form>
</body>
</html>
You can use the onblur action on the text input. The assumption is that when the user leaves the input they have found the name they want. Then you can grab the value and use it however you want. You can also verify the selection via ajax if you wanted to be sure it is a valid database selection. Using the select does some of this for you by the onchange action and the dropdown is populated from the select.
Sorry, I'm new here so please forgive any bad formatting :)
I want that when the delegate from delegate.php types something in their input field and click submit, a pop up window will appear on chair's page containing the content of delegate's input field.
I've tried using AJAX but it doesn't seem to work, any help is much appreciated. I have attached delegate.php and chair.php here
delegate.php
<html>
<head>
<script src = "jquery-1.11.3.min.js"/>
<script type="text/javascript">
function validate()
{
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("textContent").innerHTML=xmlhttp.responseText;
}
};
a = document.getElementById("textContent").value;
alert(a);
xmlhttp.open("GET", "temp.php?="+a, true);
xmlhttp.send();
}
</script>
<title>Delegate Page </title>
<h1> Welcome Delegate </h1>
</head>
<form>
<input type="text" name="contents" id="textContent" name="text">
<input type="submit" onclick="validate();">
</form>
</html>
chair.php
<?php
$text = $_GET['textContent'];
print '<h1>'.$text.'<h1>';
?>
I'm trying to make a basic form that redirects users to any given web page I choose after they submit their response. Although the action element is located on a site that I can not manipulate.
How would I go about doing this?
<form method="POST" action="https://docs.google.com/forms/d/1dAp52ALtiu8tEt8UY-Rs7WcKn36pI1vBItmGl0sV0Ik/formResponse">
<input type="text" name="entry.139518212" value="">
<input type="submit" name="submit" value="Submit">
</form>
Ajax may be helpful for you. you can submit your form through Ajax, get the response and do whatever you want.
you have to create an ajax function and call it on a click event
<input id="text" type="text" name="entry.139518212" value="">
<input type="submit" name="submit" value="Submit" onclick="sendData();">
and then create a js function:
function sendData(){
///getting text from input
text=document.getElementById('text').value;
var xmlhttp;
///browser compatibility
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
///if response was retrieved and no errors occured
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
///you can access the response
///put your redirection code here
}
}
xmlhttp.open("POST","https://docs.google.com/forms/d/1dAp52ALtiu8tEt8UY-Rs7WcKn36pI1vBItmGl0sV0Ik/formResponse",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("entry.139518212="+text);
}
Try this. You will need to have jQuery for it to work.
<script type="text/javascript">
$(function() {
$('form').submit(function(){
$.post('https://docs.google.com/forms/d/1dAp52ALtiu8tEt8UY-Rs7WcKn36pI1vBItmGl0sV0Ik/formResponse', function() {
window.location = 'http://www.whereveryouwanttogo.com';
});
return false;
});
});
</script>
From HTML Form Redirect
I have this piece of Javascript:
<script type="text/javascript" src="sha512.js"></script>
<script type="text/javascript" src="forms.js"></script>
<script>
function loadXMLDoc(form, password)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
formhash(form, password);
}
}
xmlhttp.open("POST","post.php",true);
xmlhttp.send();
}
</script>
And some HTML:
<div id="myDiv">
<form action="register.php" method="post">
Email: <input type="text" name="email" /><br />
Username: <input type="text" name="username" /><br />
Password: <input type="password" name="p" id="password" /><br />
<input type="button" value="Register" onclick="loadXMLDoc(this.form, this.form.password);" />
</form>
</div>
The Javascript code above has the job to run some Ajax with PHP and after that, run a encryption function (formhash).
When the Ajax is run, it reads a page named "post.php" the post.php's job is to check if any of the fields are empty, before the password is encrypted.
My problem is that post.php can't remember that there is any values from the Register form which I posted above. post.php has to remember what the user typed in the fields, in order to see if they are empty or not. Any ideas on, how I can transfer those values to the post.php file?
You can try:
parameters= 'username='+ form.elements[0].value +'&' +'password=' +form.elements[1].value ;
xmlhttp.open("POST","post.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(parameters);
looks like you are not submitting any data to server in the below line:
xmlhttp.open("POST","post.php",true);
You can try below code to send data:
xmlhttp.open("POST","post.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("email=e#gmail.com&username=Ford&p=pass123");