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)"
Related
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 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 have following code:
<form action="../p/padd.php" method="POST">
<input type="button" value="Náhľad" OnClick="javascript:nahlad()" />
<textarea tabindex="4" id="textra" name="text" ></textarea>
<input type="submit" value="Vložiť" />
</form>
<span id="nahlad"> </span>
<script>
function nahlad()
{
var textra = document.getElementById("textra").value;
alert (textra);
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('nahlad').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","ssnahlad.php?text=" + textra,true);
xmlhttp.send();
}
</script>
When I enter the following into the textarea (yes there is "new line" with enter)
asd
asd
and click the Nahlad button
ssnahlad.php contains
<?php
$new = $_GET['text'];
echo nl2br($new);
?>
so why does the span with id=nahlad contain
asdasd
instead of
asd
asd
Now that I'm at home and can test, this will work:
var newText = encodeURIComponent(textra);
using encodeURIComponent before you send it will correctly render your output, with no decoding on the server side
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!