PDA

View Full Version : innerHTML not working with validate textfield for "must be one of"



codehelp
Oct 15th, 2010, 08:10 PM
I have this javascript where the user enters text in a text field. On submit, the user's entered text validates for "value must be one of."

With innerHTML, I can only get the results to display if I enter text next to each possible answer. But with innerHTML I would like to enter the results as different combinations of div's for each result.

I am adding the whole page below. You can see how the validates thing is interacting badly with the display div's thing. Can someone help me? I have been trying to solve this problem for days.



<html><head></head><body onload="document.notarealform.textfield.focus()">
<script type="text/javascript">
<!--
document.write("<H>A heading</H><br /><br /><br />");
function youentered(){
var item = document.getElementById('item').value;
document.getElementById('entereditem').innerHTML = item;
document.getElementById('explanation').innerHTML = 'Your search entry: ';
}
function itemresults(){
var itemField = document.getElementById('item');
if (itemField.value == "a") {
document.getElementById("a1", "a4", "a2").innerHTML } else if (itemField.value == "b") {
document.getElementById("a2,", "a3").innerHTML } else if (itemField.value == "") {
document.getElementById("a4", "a2", "a1").innerHTML } else {
document.getElementById("a4", "a3", "a1").innerHTML }
}
//-->
</script>
<div id="a1" bgcolor="f0faf5">some text for div 1</div>
<div id="a2" bgcolor="f0faf5">some text div 2</div>
<div id="a3" bgcolor="f0faf5">other text div 3</div>
<div id="a4" bgcolor="f0faf5">different text div 4</div><p><br /><br />Enter some text.<p />
<p><i id='explanation'>Your entry: </i><b id='entereditem'>none</b></p>
<form method="post" name="notarealform">
<input type='text' name="textfield" id='item' onkeyup='youentered()' />&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;<input type='button' onclick='itemresults()' value='Look It Up'/></form>
</body></html>

Old Pedant
Oct 15th, 2010, 08:20 PM
That code is utterly bogus.

document.getElementById() can only be used with *ONE* id. ONLY. Period.

document.getElementById("a1", "a4", "a2") is not at all legal in any way shape or form.

codehelp
Oct 15th, 2010, 08:33 PM
This works with 2 id's, one after the other, in the same function. It's with rewriting text answers for each result though, and that isn't what I want. And it has an unnecessary table. Do you know how I can put responses to text entries as div's?



<html><head></head><body onload="document.notarealform.textfield.focus()">
<script type="text/javascript">
<!--
document.write("<H>A heading</H><br /><br /><br />");
function youentered(){
var item = document.getElementById('item').value;
document.getElementById('entereditem').innerHTML = item;
document.getElementById('explanation').innerHTML = 'Your search entry: ';
}
function itemresults(){
var itemField = document.getElementById('item');
if (itemField.value == "a") {
document.getElementById("show").innerHTML = "goes with a";
} else if (itemField.value == "b") {
document.getElementById("show").innerHTML = "goes with b";
} else if (itemField.value == "") {
document.getElementById("show").innerHTML = "goes with c";
} else {
document.getElementById("show").innerHTML = "goes with d";
}
}
//-->
</script>
<table><tr><td bgcolor="f0faf5" id="show"></td></tr></table>
<p><br /><br />Enter some text.<p />
<p><i id='explanation'>Your entry: </i><b id='entereditem'>none</b></p>
<form method="post" name="notarealform">
<input type='text' name="textfield" id='item' onkeyup='youentered()' />&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;<input type='button' onclick='itemresults()' value='Look It Up'/></form>
</body></html>

Kor
Oct 15th, 2010, 08:48 PM
Don't name a variable same as an id. IE will bring errors. Can you make your problem much clearer, please? Which is you final aim, after all?

Note: Why do you use document.write()? Why don't use a certain Doctype? Why don't you place your JavaScript code inside HEAD?

codehelp
Oct 15th, 2010, 09:23 PM
I want to enter parts of each answer as div's. For example "goes with", "a", and "b" would each be a div. There will end up being a lot of acceptable answers. Many of the answers contain about a paragraph of text. So the script for the page will be way, way too long as it is written below. But a lot of the text in the answers is the same as the text in other answers. That's why I want to write the answers as div's, and have the div's combine in different ways for each answer. I don't care how it is done, as long as I can figure out how to do it.

I used document.write because it worked, I don't care if it is written differently if that will help. I don't have a doctype because it is going on a website template that doesn't require one. It isn't between <head></head> because it worked fine this way. I can put stuff there if that would work.




<html><head></head><body onload="document.notarealform.textfield.focus()">
<script type="text/javascript">
<!--
document.write("<H>A heading</H><br /><br /><br />");
function youentered(){
var item = document.getElementById('item').value;
document.getElementById('entereditem').innerHTML = item;
document.getElementById('explanation').innerHTML = 'Your search entry: ';
}
function itemresults(){
var itemField = document.getElementById('item');
if (itemField.value == "a") {
document.getElementById("show").innerHTML = "goes with a";
} else if (itemField.value == "b") {
document.getElementById("show").innerHTML = "goes with b";
} else if (itemField.value == "") {
document.getElementById("show").innerHTML = "goes with c";
} else {
document.getElementById("show").innerHTML = "goes with d";
}
}
//-->
</script>
<table><tr><td bgcolor="f0faf5" id="show"></td></tr></table>
<p><br /><br />Enter some text.<p />
<p><i id='explanation'>Your entry: </i><b id='entereditem'>none</b></p>
<form method="post" name="notarealform">
<input type='text' name="textfield" id='item' onkeyup='youentered()' />&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;<input type='button' onclick='itemresults()' value='Look It Up'/></form>
</body></html>

Old Pedant
Oct 15th, 2010, 09:55 PM
I think that what Kor meant was, can you tell us, in words without code, what the user is supposed to *SEE* happen. I agree with him, in that I don't understand the point of the code, at all. So if you could tell us in words, or even provide NON-CODE examples, it would help a lot.

codehelp
Oct 15th, 2010, 10:35 PM
It is on this page: http://www.luxebuxagain.citymax.com/index.html

People should enter some text, then click submit, then it gives them a response. The response depends on what they entered. For now the correct entries are iphone, cricut cartridge, nothing, and anything else.

codehelp
Oct 15th, 2010, 11:33 PM
People should enter text and click submit. Then results appear based on what text they entered. For now the search terms that validate are "iphone", "cricut cartridge", nothing, and anything else.


http://www.luxebuxagain.citymax.com/index.html

Philip M
Oct 16th, 2010, 07:42 AM
"It works for me" - Famous last words of inexperienced web-designer :)