Page 1 of 1
Displaying HTML Forms via JS
Posted: Fri Jan 27, 2006 5:31 pm
by dwessell
Hey all..
What I'm interested in doing is something along these lines..
Code: Select all
<input type="radio" name="listPref" value="ours">
<input type="radio" name="listPref" value="yours">
If ours is picked, display one grouping of input options.. If yours is picked, display a totally seperate group of input options.. With each group of input options appearing on the page, only when the indicated listPref is picked..
I'm new to JS, but have tried several different options, including one using XMLHTTPRequest.. But I'm falling short of the mark.. I thougt I would just ask, instead of posting my half baked code examples.. Those can come later

Any suggestions would be appreciated..
Thanks
David
Posted: Fri Jan 27, 2006 6:32 pm
by raghavan20
This is not the better way to do it...but it works..looks out for more DHTML to include hierarchial elements...
Code: Select all
<html>
<head>
<script type = 'text/javascript'>
function displayOptions(stringValue){
alert(stringValue);
var inputString = "";
if (stringValue == "ours"){
inputString = "<input type = 'text' name = 'option1' value = 'option1' /><br />";
inputString += "<textarea rows = '5' cols = '60'>Hello all</textarea>";
}else{
inputString = "<input type = 'text' name = 'option2' value = 'option2' /><br />";
inputString += "Sample check box<input type = 'checkbox' name = 'password' value = 'hello' />";
}
inputString += "<br /><input type = 'submit' name = 'submitName' value = 'Submit' />";
document.getElementById("placeControls").innerHTML = inputString;
}
</script>
</head>
<body>
<form name = 'formOptions'>
<div id = 'placeControls'>
Click on any of the radio buttons<br />
Ours<input type = 'radio' name = 'listPref' value = 'ours' onclick = 'displayOptions(this.value);' /><br />
Yours<input type = 'radio' name = 'listPref' value = 'yours' onclick = 'displayOptions(this.value);' />
</div>
</form>
</body>
</html>
Posted: Sat Jan 28, 2006 12:07 am
by josh
It also might be easier to put the options in a div with it's visibility set to off (and height set to 0 and overflow at hidden so there is no "empty page" where the div is going to show up), then show them with this code:
Code: Select all
function show(id) {
if (document.all)
{
x = document.all[id];
} else if (document.getElementById)
{
x = document.getElementById(id);
}
else if (document.layers)
{
x = document.layers[id];
}
x.style.overflow = "visible";
x.style.visibility = "visible";
x.style.height = "auto";
}
Posted: Sat Jan 28, 2006 4:00 am
by tasteslikepurple
I would do it the same way as jshpro2. You'll probably need a script to do the reverse, i.e. to hide the div just incase they select one then choose to select the other.
Posted: Sat Jan 28, 2006 7:42 am
by dwessell
Hey guys.. Thanks for those tips... I learned a lot by going to Google, and typing in each bit... This is obviously my first attempt with JS..
Just a quick follow up question.. I'm getting a document "d" is undefined using jshpro2's code.
I've defined the div as
and I'm calling it as
Code: Select all
<input type="radio" name="listPref" value="yours" onclick="show(d)">
I'm missing something simple, aren't I??

Posted: Sat Jan 28, 2006 7:51 am
by tasteslikepurple
Code: Select all
<input type="radio" name="listPref" value="yours" onclick="show('d')">
(quote marks around the d)
p.s. make sure they're single quote marks otherwise it will end the onClick attribute (hope that makes sense).
Posted: Sat Jan 28, 2006 8:01 am
by dwessell
lol, that did it.. The semantics of a new language are always difficult
I'm getting now x.style is null or not an object..
I have the div that I gave before defined in an inline CSS.. Does it have to be defined when the div is declared?
Posted: Sat Jan 28, 2006 8:28 am
by tasteslikepurple
oops, sorry, my mistake, i didn't look at hte HTML, just the JS.
the id attribute is so that the javascript knows which element to do stuff to. the class is for the CSS styling when the page is first loaded.
each id needs to be unique otherwise javascript will get confused, if there are 2 divs with the same id, which one to do stuff to?!?! so if you make any more divs and use javascript with them, remember to give them a different id

Posted: Sat Jan 28, 2006 10:09 am
by dwessell
lol, don't apoligize to me!! Your helping me out!! This is my first foray into JS, and I appreciate all the help i can get.. I've never needed JS before, but I"m growing to like it, and learning how useful it can be..
Where I'm at now..
I changed the function, just a tad..
Code: Select all
function show(id,id2) {
if (document.all)
{
x = document.all[id];
y = document.all[id2];
} else if (document.getElementById)
{
x = document.getElementById(id);
y = document.getElementById(id2);
}
else if (document.layers)
{
x = document.layers[id];
y = document.layers[id2];
}
x.style.overflow = "visible";
x.style.visibility = "visible";
x.style.height = "auto";
y.style.overflow = "hidden";
y.style.visibility = "hidden";
y.style.height = "0 px";
}
Then I call it like this:
Code: Select all
<p align="center"><input type="radio" name="listPref" value="ours" onclick="show('a','b')">
<input type="radio" name="listPref" value="yours" onclick="show('b','a')">
And then here are the actual div's
Code: Select all
<div class="a" id="a">Random things will be display here<br>
Random things will be display here<br>
Random things will be display here<br>
Random things will be display here<br>
</div>
<div class="b" id="b">
<?php
for($i=0;$i<$numberItems;$i++){
echo 'Item To Be Found ';
echo '<input type="text" name="itemNumber'.$i.'" size="35" maxlength="30"><br>';
}
?>
</div>
All is working well, ecept for that id=b area.. It echo's out Item To Be Found, but isn't echoing the form.. I can see it in the source of the page, but it's not being displayed in the browser.. It appears that there is a 'block' that's the appropriate size, but it isn't clickable (I can see it if I highlight, else it's invisible)...
Addendum, it's working in FF, but not in IE...
Posted: Mon Jan 30, 2006 7:05 am
by tasteslikepurple
can you post the code that you can see but isn't working? that would be a great help

Posted: Mon Jan 30, 2006 7:56 am
by dwessell
Why I certainly will
Code: Select all
<div class="b" id="b">
Item To Be Found <input type="text" name="itemNumber0" size="35" maxlength="30"><br>
</div>
Item To Be Found is being displayed, but not the input field.. It's being echo'ed out from the php code block. I've used the code block without the JS, and it works fine. It's only when used in conjunctino with the JS for hiding/viewing that it does not display..
Thanks
David
Posted: Mon Jan 30, 2006 8:58 am
by liljester
try changing the name of your class so its not the same as your div's id. just a thought

Posted: Mon Jan 30, 2006 11:16 am
by dwessell
liljester wrote:try changing the name of your class so its not the same as your div's id. just a thought

Heyas liljester.. I've been playing with that, and can't quite get it nailed down.
I have
Code: Select all
<div class="d" id="a">
</div>
<div class="c" id="b">
</div>
It's styled in the CSS as:
Code: Select all
div.c {
overflow: hidden;
visibility: hidden;
height: 0px;
position: relative;
}
div.d {
overflow: hidden;
visibility: hidden;
height: 0px;
position: relative;
}
I've tried referencing by id instead of class, but to no avail.. Again, the text echo's out, just not the input box..
Strangeness abounds

Posted: Mon Jan 30, 2006 12:42 pm
by dwessell
Solved.... The program I was using had placed a relative position in the css, which when removed, allowed the input box room to be there..
Oh the small things
Thanks to all who helped.
dw
Posted: Fri Feb 03, 2006 4:49 am
by tasteslikepurple
sorry about randomly dissapearing there - had to go away for a few days. glad you got it sorted
