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>
Related
I have a simple text file:
Text1
Text2
Text3
TextN
And would like to create an interface where each time the user presses the next button the text area will be populated with the next text. I guess I have to use an array for that but I am having problems changing the text with the next button. Moreover the code I have only works on Firefox. Does this mean that when I put the website on a server this will be interpreted by Firefox clients only?
function test() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
var contents = xmlhttp.responseText;
myArray = contents.split("\n");
}
}
xmlhttp.open("GET", "deeds.txt", true);
xmlhttp.send();
}
function nextDeed() {
document.getElementById('deed').innerHTML = myArray[0]
}
<html>
<body>
<h1 align="center" style="font-family:Arial;">RELATION TAGGING </h1>
<textarea id="deed" rows="15" cols="160"></textarea>
<input type="button" value="next" onclick="nextDeed()" /><br/>
<div id="result">Result</div>
</body>
</html>
step = 0;
$("#next").click(function(){
step = step +1;
$.ajax({
url: "./text.php?"+"step="+step,
success: function(data){
$("#deed").val(data);
}
});
});
;
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1 align="center" style="font-family:Arial;" >RELATION TAGGING </h1>
<textarea id="deed" rows="15" cols="160">
</textarea>
<input type="button" id="next" value="next" /><br/>
<div id="result">Result</div>
</body>
</html>
PHP code : <?php $data = file_get_contents("file".$_GET["t"].".txt"); echo $data;?>
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 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.
I can't figure out why the getMoreInfoResults() function doesn't pass on the value of the radio button (when one is selected) to the GET request. Anyone know why?
<form name="question_form">
<input type="radio" name="vote" value="1" onclick="getVote(this.value)" />Yes<br />
<input type="radio" name="vote" value="2" onclick="getVote(this.value)" />No<br />
<textarea rows="3" name="moreInfo" onkeyup="getMoreInfoResults(document.question_form.vote.value, this.value)" /></textarea><br />
<input type="submit" value="Submit" />
<div id="otherAnswers"></div>
</form>
This is my javascript:
function getMoreInfoResults(vote, input) {
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("otherAnswers").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","phpPoll/phpPoll_userDefined/functions/getMoreInfoResults.php?vote=" + vote + "&moreInfo=" + input,true);
xmlhttp.send();
}
Thanks.
document.question_form.vote expression will give you a NodeList object, not a Node one. Obviously, its value property is undefined.
One possible workaround is to create a function that will retrieve value of the checked radio button:
function getCheckedValue(radioNodes) {
for (var i = 0, l = radioNodes.length; i < l; i++) {
if (radioNodes[i].checked) {
return radioNodes[i].value;
}
}
}
... and use it instead of querying the value directly:
onkeyup="getMoreInfoResults(getCheckedValue(document.question_form.vote), this.value)"
This section of code is to first get the data and display the data from the XML file. After that there is a button below named submit. When I press submit, it calls the function add() and it will copy the first node from the XML file:
<html>
<body>
<link rel="stylesheet" type="text/css" href="test.css" />
<table>
</tr class="top">
<td>ID</td>
<td>Orgin</td>
<td>Type</td>
<td>Color</td>
</tr>
<script type="text/javascript">
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","test.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("product");
for (i=0;i<x.length;i++)
{
document.write("<tr class=a><td>");
document.write(x[i].getElementsByTagName("orgin")[0].getAttribute("id"));
document.write("</td><td>");
document.write(x[i].getElementsByTagName("orgin")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("color")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
function add()
{var id=document.getElementById('idProduct').value;
var time=document.getElementById('Time').value;
var org=document.getElementById('orgin').value;
var color=document.getElementById('color').value;
var type=document.getElementById('type').value;
xmlDoc=loadXMLDoc("test.xml"); //Problem happen here, the code doesn't functioning
oldNode=xmlDoc.getElementsByTagName('product')[1];
newNode=oldNode.cloneNode(true);
xml.Doc.documentElement.appendChild(newNode);
}
</script>
<br>
Inputs:
<br>
Time: <input type="text" id="time"><br>
ID: <input type="text" id="idProduct"><br>
Orgin: <input type="text" name="orgin"><br>
Type: <input type="text" name="type"><br>
Color: <input type="text" name="color"><br>
<input type="button" value="submit" onclick="add()"></input>
</body>
</html>
This is the XML file:
<?xml version="1.0" encoding="Big5" ?>
<set>
<product time="5">
<orgin id="1">sony</orgin>
<type>comp</type>
<color>red</color>
</product>
<product time="6">
<orgin id="2">apple</orgin>
<type>others</type>
<color>blue</color>
</product>
</set>
Here is the W3Schools loadxmldoc.js file:
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}
Add that to your script block and it may start working (or get you a little further along).