<html>
<head>
<title>List</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Javascript code -->
<script>
function showUser(str) {
if (str == " ") {
document.getElementById("txtHint").innerHTML = " ";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
<!-- CSS for HTML table -->
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;
}
</style>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value=" ">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<div id="txtHint">Result from PHP script should appear here</div>
</body>
</html>
When I run the following HTML page in the Google Chrome Browser via Netbeans, I am met with this error (see Title) when I try to select a person from the list.
xmlhttp.onreadystatechange = function()
This line of code and the one below seems to be the areas of concern based on Chrome's Developer tools.
select name="users" onchange="showUser(this.value)
Can anyone pinpoint what needs to be changed?
Right underneath:
// code for IE7+, Firefox, Chrome, Opera, Safari
Add:
xmlhttp = new XmlHttpRequest();
That way, you'll satisfy web browsers with javascript engines that have XMLHttpRequest defined.
Also, xmlhttp needs to have a valid value (handle) before xmlhttp.onreadystatechange = function() can be properly executed.
If your browser (especially very old IE browsers) is still picky then change xmlhttp to var xmlhttp since var before a variable name means to define a new variable.
Related
I have a drop-down menu that I am dynamically adding options to (based on an AJAX call) on an onfocus event. For some reason, the first time I click on the box, the options appear condensed into a tiny box, but the second time it works just fine. Does anyone know what might be causing this phenomenon? (Note: Because it involves AJAX, I can't insert a fiddle that could simulate the error, but I will post the code itself)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Remove Class | IMS</title>
<link rel="stylesheet" type="text/css" href="../css/form.css"/>
</head>
<body>
<form>
<label for="class">Class:</label>
<select name="class" onfocus="loadClasses(this)" id="drop" required>
<option>Sample Value</option>
</select>
<hr/>
<button type="button" onclick="sendData()">Remove Class</button>
</form>
</body>
</html>
JS Code:
function genDrop(e, json) {
e.innerHTML = "";
var data = eval("({data: " + json + "})");
data = data.data;
for (var i = 0; i < data.length; i++) {
var option = data[i];
var o = document.createElement("option");
o.value = option.id;
o.innerHTML = option.name;
o.setAttribute("descript", option.descript);
o.style.width = "500px !important"
o.style.maxWidth = "200%";
e.appendChild(o);
}
}
function loadClasses(e) {
var http = new XMLHttpRequest();
http.onreadystatechange = function() {
if (http.readyState === 4 && http.status === 200) {
genDrop(e, http.responseText);
}
}
http.open("GET", "getclasses.php", true);
http.send();
}
Use onload instead of onfocus
<select name="class" onload="loadClasses(this)" id="drop" required>
<option>Sample Value</option>
</select>
I am developing a simple log in form by using XML file values. I have an XML with values last name and first name. I am accessing the file and checking the values against the given values in order to validate log in.
It works fine in chrome, IE and safari. But, In mozilla it is not getting forwarded to the next page. The page just stays in the same page and shows a loading URL icon for indefinite time.
Here is my CODE:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link href="css/stylemp3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form onsubmit="return myFunction()" action="action.html">
First name:<br/>
<input type="text" required="required" name="firstname" id="firstname"/>
<br>
Last name:<br>
<input type="password" required="required" name="lastname" id="lastname"/>
<br/>
<select class="dropdown" id="ddl">
<option value="haha" selected="selected">show</option>
<option value="hihi" >hide</option>
</select>
<br/>
<input type="text" name="hide" id="hidee" class="hide"/>
<br/>
<input button type="submit" value="Submit"/>
</form>
<div></div>
<script>
window.onload = function() {
document.getElementById("firstname").focus();
};
$( "#ddl" )
.change(function () {
if($( "select option:selected" ).text() == "hide")
{
$("#hidee").hide();
}
else
{
$("#hidee").show();
}
})
.change();
</script>
<script>
function myFunction() {
var lastname = document.getElementsByName('lastname')[0].value;
var firstname = document.getElementsByName('firstname')[0].value;
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","login.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("login");
for (i=0;i<x.length;i++)
{
alert(x[i].getElementsByTagName("firstname")[0].childNodes[0].nodeValue);
if((x[i].getElementsByTagName("firstname")[0].childNodes[0].nodeValue) == firstname)
{
alert("Smileeee.....:-))");
if((x[i].getElementsByTagName("lastname")[0].childNodes[0].nodeValue) == lastname)
{
alert("login Successful!!!!!");
return true;
break;
}
}
}
return false;
}
</script>
</body>
</html>
we are making a web UI in JSP and using a bit of Javascript .
I need to load the xml file contents in text box and allow to edit it and write the changes to xml file.
In my code i am able to edit it but the changes are not written back to the xml file. I am putting my .jsp file below..
.jsp file
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse:collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
Title: <input type="text" id="title" value=""><br>
Id: <input type="text" id="id" value=""><br>
Updated: <input type="text" id="updated" value=""><br>
<button onclick="myFunction()">Save Changes</button>
<script>
//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","values.xml",false);
try {
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
}
catch(err) {
alert( err.message);
}
//document.write("<table><tr><th>Title</th><th>Updated</th><th>Id</th></tr>");
var x=xmlDoc.getElementsByTagName("feed");
for (i=0;i<x.length;i++)
{
document.getElementById("title").value=x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
document.getElementById("id").value=x[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;
document.getElementById("updated").value=x[i].getElementsByTagName("updated")[0].childNodes[0].nodeValue;
/*document.write("<tr><td>");
document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("updated")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("id")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
*/
}
//document.write("</table>");
function myFunction() {
try{
//document.getElementById("title").value="Hello";
x[0].getElementsByTagName("title")[0].childNodes[0].nodeValue = document.getElementById("title").value;
x[0].getElementsByTagName("id")[0].childNodes[0].nodeValue = document.getElementById("id").value;
x[0].getElementsByTagName("updated")[0].childNodes[0].nodeValue = document.getElementById("updated").value;
//document.write("<table><tr><th>Title</th><th>Updated</th><th>Id</th></tr>");
document.write("<p>");
document.write(x[0].getElementsByTagName("title")[0].childNodes[0].nodeValue);
document.write("</p><p>");
document.write(x[0].getElementsByTagName("updated")[0].childNodes[0].nodeValue);
document.write("</p><p>");
document.write(x[0].getElementsByTagName("id")[0].childNodes[0].nodeValue);
document.write("</p>");
xmlDoc.save("values.xml");
return(xmlDoc);
}
catch(err) {
alert( err.message);
}
//document.write("</table>");
}
</script>
</body>
</html>
.xml file
<?xml version="1.0" encoding="utf-8"?>
Example Feed
2003-12-13T18:30:02Z
urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6
Helo work
I have this code of my admin page. Earlier this code used to work on my system. But now it ain't working anymore. My client needs to update this page and now when I tried running this page it does not perform JQuery requests.
What it does is on focus or change of value of first dropdown other category and subcategory dropdown gets updated by making Jquery requests to another php file which returns the category values. Also just to mention, I tried to run this page in different browsers with no success.
Also facing issue in posting the code through code snippet So writing the code right here..
The code is below-
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cracktitude-Admin</title>
<script src="scripts/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "GET",
url: "admin-adddata.php",
data: data
}).done(function( msg ) {
alert( "Data Saved: " + msg );
location.reload(true);
});
});
});
</script>
<script>
function categorylist(str)
{
if (str=="")
{
document.getElementById("category").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("category").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","admin-getdata.php?choice="+str,true);
xmlhttp.send();
}
</script>
<script>
function subcategorylist(str1)
{
if (str1=="")
{
document.getElementById("subcategory").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("subcategory").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","admin-getdata1.php?choice="+str1,true);
xmlhttp.send();
}
</script>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #333;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
background-color: #FFF;
margin: 0 auto;
}
.content {
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
form{
font-size:14px;
font-family:Verdana, Geneva, sans-serif;
color:#333;
}
form p{
vertical-align:top;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>Admin Panel</h1>
<form>
<p>Section:
<select name="section" id="section" tabindex="1" onchange="categorylist(this.value)" onfocus="categorylist(this.value)" autofocus="autofocus">
<option value="Aptitude">Aptitude</option>
<option value="1">Engineering</option>
<option value="2">GK</option>
<option value="3">Interview</option>
<option value="4">Puzzle & Mind Games</option>
</select>
</p>
<p>Question:
<textarea name="question" id="question" cols="45" rows="5" tabindex="2" required="required"></textarea>
</p>
<p>Option A:
<input type="text" name="optiona" id="optiona" required="required"/>
</p>
<p>Option B:
<input type="text" name="optionb" id="optionb" required="required"/>
</p>
<p>Option C:
<input type="text" name="optionc" id="optionc" required="required"/>
</p>
<p>Option D:
<input type="text" name="optiond" id="optiond" required="required" />
</p>
<p>Correct Answer:
<label>
<input type="radio" name="answer" value="A" id="answer_0" />
Option A |</label>
<label>
<input type="radio" name="answer" value="B" id="answer_1" />
Option B |</label>
<label>
<input type="radio" name="answer" value="C" id="answer_2" />
Option C |</label>
<label>
<input type="radio" name="answer" value="D" id="answer_3" />
Option D</label>
<br />
</p>
<p>Explanation:
<textarea name="explanation" id="explanation" cols="45" rows="5" required="required"></textarea>
</p>
<p>Category:
<span name="category" id="category">
<select name="cat">
<option></option>
</select>
</span>
</p>
<p>Sub-category:
<span name="subcategory" id="subcategory">
<select name="subcat">
<option></option>
</select>
</span>
</p>
<p>Type:
<select name="type" id="type">
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
</select>
</p>
<p>
<input type="submit" name="add" id="add" value="Add" />
<input type="reset" name="reset" id="reset" value="Clear" />
</p>
</form>
</div>
<!-- end .container -->
</div>
</body>
</html>
Following on from comments, this may help: http://jsfiddle.net/TrueBlueAussie/4s4d1qgu/1/
Rather than use onchange= and onfocus= attribute handlers in the HTML, use jQuery to connect the events to your controls. e.g. like this:
$('#section').on('focus change', function () {
var str = $(this).val();
if (str == "") {
document.getElementById("category").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("category").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "admin-getdata.php?choice=" + str, true);
xmlhttp.send();
});
If you view the console (in say Chrome), you will see the php is being called in the current directory, so please ensure your page is in the same folder as the admin-adddata.php & admin-getdata.php files. Use a tool like Fiddler2 or the Chrome F12 debug Network panel to see what is being sent and what the response is from the server. It may be as simple as a 404 (not found).
I just need an event or action for my code to not show information when the value is "0" please. typically when the value is greater than 1 it shows the XML information and even when X is choosen it shows previous XML data but I would like it to be empty.
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" /></head>
<body>
<form>
<select id="pullDownList" onchange="myFunction();">
<option value="0">Please Choose a Country</option>
<script>
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","./cords_data.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var xmlDocument=xmlDoc.getElementsByTagName("Row");
for (i=0;i<xmlDocument.length;i++)
{
document.write("<option value='");
document.write(i+1);
document.write("'>");
document.write(xmlDocument[i].getElementsByTagName("Country")[0].childNodes[0].nodeValue);
}
</script></select>
<p />
<div id=fieldInfo1></div>
<div id=fieldInfo2></div>
<div id=fieldInfo3></div>
<div id=fieldInfo4></div>
</p>
<script>
function myFunction()
var z = document.getElementById("pullDownList").selectedIndex-1;
if (pullDownList.value == "0"){
}else {
document.getElementById("fieldInfo1").innerHTML = xmlDocument[z].getElementsByTagName("Country")[0].childNodes[0].nodeValue;
document.getElementById("fieldInfo2").innerHTML = xmlDocument[z].getElementsByTagName("Voltage")[0].childNodes[0].nodeValue;
document.getElementById("fieldInfo3").innerHTML = xmlDocument[z].getElementsByTagName("Freq__Hz")[0].childNodes[0].nodeValue;
document.getElementById("fieldInfo4").innerHTML = xmlDocument[z].getElementsByTagName("Cord_Designator")[0].childNodes[0].nodeValue;
}
</script>
Try doing this instead:
if (document.getElementById("tagThatHoldsValueOfZero").innerHTML == "0") {
document.getElementById("tagThatHoldsValueOfZero).style.display = "none";
}
Using .innerHTML will get the content/text of that element.