Displaying HTML Forms via JS

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
dwessell
Forum Commoner
Posts: 62
Joined: Fri Dec 23, 2005 2:30 pm

Displaying HTML Forms via JS

Post 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
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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>
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Post 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";
}
User avatar
tasteslikepurple
Forum Commoner
Posts: 46
Joined: Thu Jan 26, 2006 3:38 am
Location: Bath, UK

Post 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.
dwessell
Forum Commoner
Posts: 62
Joined: Fri Dec 23, 2005 2:30 pm

Post 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

Code: Select all

<div class="d">Test</div>
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?? :)
User avatar
tasteslikepurple
Forum Commoner
Posts: 46
Joined: Thu Jan 26, 2006 3:38 am
Location: Bath, UK

Post 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).
dwessell
Forum Commoner
Posts: 62
Joined: Fri Dec 23, 2005 2:30 pm

Post 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?
User avatar
tasteslikepurple
Forum Commoner
Posts: 46
Joined: Thu Jan 26, 2006 3:38 am
Location: Bath, UK

Post by tasteslikepurple »

oops, sorry, my mistake, i didn't look at hte HTML, just the JS.

Code: Select all

<div class="d" id="d">Test</div>
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 :)
dwessell
Forum Commoner
Posts: 62
Joined: Fri Dec 23, 2005 2:30 pm

Post 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...
User avatar
tasteslikepurple
Forum Commoner
Posts: 46
Joined: Thu Jan 26, 2006 3:38 am
Location: Bath, UK

Post by tasteslikepurple »

can you post the code that you can see but isn't working? that would be a great help :)
dwessell
Forum Commoner
Posts: 62
Joined: Fri Dec 23, 2005 2:30 pm

Post 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
User avatar
liljester
Forum Contributor
Posts: 400
Joined: Tue May 20, 2003 4:49 pm

Post by liljester »

try changing the name of your class so its not the same as your div's id. just a thought :)
dwessell
Forum Commoner
Posts: 62
Joined: Fri Dec 23, 2005 2:30 pm

Post 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 :)
dwessell
Forum Commoner
Posts: 62
Joined: Fri Dec 23, 2005 2:30 pm

Post 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
User avatar
tasteslikepurple
Forum Commoner
Posts: 46
Joined: Thu Jan 26, 2006 3:38 am
Location: Bath, UK

Post by tasteslikepurple »

sorry about randomly dissapearing there - had to go away for a few days. glad you got it sorted :)
Post Reply