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.
Related
<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.
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>
Is it possible to have 2 input fields search a list from XML, but they can also depend on each other for the results...
example,
input brand - Heinz
but then
input item - tomato
How do i need to adapt my form/JS to do so?
function showResult(str,IdtoEdit,item) {
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
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("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","<?php echo SITE_URL; ?>test.php?q="+str+"&item="+item+"&id="+IdtoEdit,true);
xmlhttp.send();
}
brand <input type="text" id="brandsearch" value="" onkeyup="showResult(this.value,currCount,document.getElementById('itemsearch').value); showsearch('livesearch');" autocomplete="off" onKeyPress="return disableEnterKey(event)" />
-
item <input type="text" value="" id="itemsearch" onkeyup="showResult(getElementById('brandsearch').value,currCount,this.value); showsearch('livesearch');" autocomplete="off" onKeyPress="return disableEnterKey(event)" >
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)"
I am using jQuery to do an autocomplete on a text field. Based on the user click from that auto complete I want to call another function that does an ajax request. How can this be accomplished.Here is first autocomplete function:
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("ajax/autocomplete.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
and the second ajax call:
function showCar(str)
{
if (str=="")
{
document.getElementById("inputString").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("carchoice").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax/getcar.php?q="+str,true);
xmlhttp.send();
}
and the initial call to the function from the form:
<input type="text" size="50" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();"/>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
You can call it using these lines of code:
$('#autoSuggestionsList').children('div').click(function () {
showCar(this.innerHTML);
});
Of course in case that you're putting each result in a new div which is child to #autoSuggestionsList:
<div class="suggestionList" id="autoSuggestionsList">
<div>First result</div>
<div>Second result</div>
</div>
And a fiddle: http://jsfiddle.net/NaYzm/
Best regards!