Get the XML data into HTML page using http get request - javascript

I need to fetch the data from the XML file. That XML file would contain simply details of a user, i.e. datails can be anything.. user name and email id.. or date of birth.. etc..
Here I create a HTML source code having 2 text boxes.. Details are :-
First text box I enter the name: ABC
In the second text box, the email id of that user must appear by fetching the XML content automatically.
I have read about the http get request and post request but unable to make them.
Kindly help me..
Here is the HTML code : -
<html>
<head>
<title> Sample XML page </title>
</head>
<body>
<div align="right">
<h1>
Sample try page
</h1>
<form name="login">
Username: &nbsp
<input type="text" name="userid"/>
<br>
<br>
Email: &nbsp
<input type="text" name="Email"/>
<br>
<br>
<input type="button" " value="Submit"/>
</form>
</div>
</body>
</html>
Here is the XML code : -
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<student>
<details>
<Name> student1 </Name>
<email> student1#abc.com </email>
</details>
<details>
<Name> student2 </Name>
<email> student2#abc.com </email>
</details>
</student>

From W3 schools
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
That is how you turn the XML into a Javscript object from a URL.

Hope this can help you bit as part of JavaScript -
<script type="text/javascript">
var useName;
var email;
function httprequest()
{
debugger;
useName = login.txtUserId.value;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "name.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
var x = xmlDoc.getElementsByTagName("CD");
debugger;
for (i = 0; i < x.length; i++)
{
if (useName == x[i].getElementsByTagName("detail1")[0].childNodes[0].nodeValue)
{
login.txtEmail.value = x[i].getElementsByTagName("detail2")[0].childNodes[0].data;
}
}
}
</script>

Related

Selecting database generated value from a drop-down list?

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.

Pass text value to another php file using ajax

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";
?>

Making a popup window appear on one client when another client clicks submit

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>';
?>

POST FormData to php using javascript and XMLHTTPRequest

At the moment I have two files, index.htm and accessdata.php.
This is what I have in index.htm:
<html>
<head>
<script>
function postData() {
var xmlhttp=new XMLHttpRequest();
var url = "accessdata.php";
var checkBoxes_formData = new FormData(document.getElementById("checkBoxes"));
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(checkBoxes_formData);
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
}
</script>
</head>
<body>
<button type="button" onclick="postData()">POST</button>
<form id=checkBoxes>
<table>
<tr><input type="checkbox" name="opt1" value="blue" checked> Blue</td>
<tr><input type="checkbox" name="opt2" value="yellow"> Yellow</td>
</table>
</form>
<p id="result"></p>
</body>
</html>
and this is what I have in accessdata.php:
<?php
$opt1=$_POST['opt1'];
echo $opt1;
echo "bla";
?>
Now, on
<p id="result"></p>
"bla" shows up, but not "blue", or "yellow".
What am I doing wrong?
THE CORRECT HTML CODE BELOW!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>POST PHP XMLHTTPRequest</title>
<script>
function postData() {
var xmlhttp=new XMLHttpRequest();
var url = "accessdata.php";
var checkBoxes_formData = new FormData(document.getElementById("checkBoxes"));
xmlhttp.open("POST",url,true);
xmlhttp.send(checkBoxes_formData);
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
}
</script>
</head>
<body>
<button type="button" onclick="postData()">POST</button>
<form id="checkBoxes">
<input type="checkbox" name="opt1" value="blue"> Blue
<input type="checkbox" name="opt2" value="yellow" checked> Yellow
</form>
<p id="result"></p>
</body>
</html>
blue doesn't show up because you are claiming:
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
But FormData objects encode data as multipart/form-data.
Remove the code that explicitly sets the content-type and let the browser generate it for you. (Don't try to explicitly set it to multipart/form-data, you have to specify what the boundary marker is going to be in the header too).
yellow doesn't show up for the same reason, but also because:
You are only looking at opt1 and it is associated with the name opt2 and
Checkbox controls are only successful (i.e. will be in the data that gets submitted) if they are checked (which the yellow one is not by default).
Complicating matters further, your HTML is invalid. Use a validator. You can't have an input as a child of a table row, you need to create a table data cell between them. (Note that it looks like you are trying to use a table for layout, you should probably get rid of the table entirely).
Tap to create a note
You should try this…
<form method=post action=accessdata.php>
<input type=checkbox value=blue name=opt1>blue
<input type=submit value=submit name=send>
</form>
In accessdata. PHP
if❨isset❨$_POST[`send']❩❩ {
$color=$_POST[`opt1'];
echo $color."bala";
}

Saving form values to another PHP page

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");

Categories

Resources