Dynamically building a form

[jcarruthers]

Hi,



Im trying to make a "step through" form.

The form consists of 3 headings with fields in each.

For the first heading it has a Browse button and a text field... what I want to happen is that as soon as the user has typed in to the text field - the next part of the form appears.

In the next part of the form the user has to select 4 different options from a drop down menu - once all of these are filled in I want the next part of the form to come up - which is a Submit button.

Can anyone give me any pointers with this?




James

[jcarruthers]

I'm new to javascript - so this is what I bashed out just now... it doesnt work though... its probably something stupidly simple though:


<SCRIPT LANGUAGE="JavaScript"><!--
function showLayer(){
if (document.form1.text1.value.length > 0) {
document.layers['layer1'].visibility="visible";
}
}
//--></SCRIPT>




<form name="form1" id="form1">
<input name="text1" type="text" onChange="showLayer();" size="50" maxlength="50">
</form>
<br>
<div id="layer1" style="position:absolute; z-index:1; visibility: hidden;">
This is a test</div>





Thanks,



James

[Vincent Puglia]

Hi,

Is something like this what you need?

<SCRIPT LANGUAGE="JavaScript">
<!--
var divObj = (document.layers) ? document.layers : ( (document.all) ? document.all : document.getElementById) ;

function showLayer(divID)
{
var divStyleObj = (document.getElementById) ? divObj(divID).style : ( (document.layers) ? document.layers[divID] : document.all[divID].style );
//if (document.form1.text1.value.length > 0) {
divStyleObj.visibility = 'visible';
//document.all['layer1'].style.visibility="visible";
//}
}
function submitIt(url)
{
window.open(url);
}
//--></SCRIPT>


<form name="form1" id="form1">
<input name="text1" type="text" onChange="showLayer('layer1');" size="50" maxlength="50">
</form>
<br>
<div id="layer1" style="position:absolute; z-index:1; visibility: hidden;">
<select name="a" onChange="submitIt(this.options[selectedIndex].value)">
<option value="return(false">Select a site</option>
<option value= "http://members.aol.com/grassblad"> GrassBlade</option>
</select>
</div>

If interested, you might look at the "Validating Forms" tutorial/script at my site (GrassBlade) to see how to submit from a function (without using the onsubmit handler) You also might want to look at the dHTML tutorials.

Vinny

[jcarruthers]

Thanks Vincent. I figured this out about 2 minutes ago...

This worked for me:


function showLayer(){
if(document.layers){
if (document.uploadform.description.value.length > 0) {
document.layers['layer1'].visibility = "visible";
}
else
{
document.layers['layer1'].visibility = "hidden";
}
} else {
theDiv = document.getElementById('layer1');
if (document.uploadform.description.value.length > 0) {
theDiv.style.visibility = "visible";
}
else
{
theDiv.style.visibility = "hidden";
}
}
}



Then the extra part of the form was in div tags....

The extra part of the form was triggered by onKeyUp on the text field form element.



James

[Vincent Puglia]

Hi,

if you just copied the following from your code, it will not work since you didn't define theDiv (as you did for "...ElementBy..."

else
{
theDiv.style.visibility = "hidden";
}

Also, you neglected 'document.all[...' (IE 4+)
Vinny

[jcarruthers]

Yes I did define theDiv.. its before the if...

Can you expand on the document.all problem?




James

[Vincent Puglia]

Hi,

Yes I did define theDiv.. its before the if...

So you did. Guess I need new eyeballs.

Can you expand on the document.all problem?

nn4+ = document.layers[...]
ie4+ = document.all[...]
new browsers = document.getElementById(...)

that's why I wrote this earlier:

var divObj = (document.layers) ? document.layers : ( (document.all) ? document.all : document.getElementById) ;

function showLayer(divID)
{
var divStyleObj = (document.getElementById) ? divObj(divID).style : ( (document.layers) ? document.layers[divID] : document.all[divID].style );

If still confused, see the dHTML tutorials/scripts at my site (GrassBlade).

Vinny

[Markdidj]

A warning using "visibility:hidden".
Search engines penalize sites that they find this in.
Make sure that all objects load as visible, then make them hidden onload. Do this and it'll save you alot of work in the future.