SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: Dynamically building a form
Hybrid View
-
Jul 28, 2003, 03:25 #1
- Join Date
- Mar 2003
- Location
- London, UK.
- Posts
- 48
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Dynamically building a form
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
-
Jul 28, 2003, 04:33 #2
- Join Date
- Mar 2003
- Location
- London, UK.
- Posts
- 48
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
more...
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
-
Jul 28, 2003, 09:22 #3
- Join Date
- Feb 2000
- Location
- where the World once stood
- Posts
- 700
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
VinnyWhere the World Once Stood
the blades of grass
cut me still
-
Jul 28, 2003, 09:29 #4
- Join Date
- Mar 2003
- Location
- London, UK.
- Posts
- 48
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
this is what worked for me
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
-
Jul 28, 2003, 10:42 #5
- Join Date
- Feb 2000
- Location
- where the World once stood
- Posts
- 700
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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";
}
VinnyWhere the World Once Stood
the blades of grass
cut me still
-
Jul 28, 2003, 11:44 #6
- Join Date
- Mar 2003
- Location
- London, UK.
- Posts
- 48
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yes I did define theDiv.. its before the if...
Can you expand on the document.all problem?
James
-
Jul 29, 2003, 06:02 #7
- Join Date
- Feb 2000
- Location
- where the World once stood
- Posts
- 700
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi,
Yes I did define theDiv.. its before the if...
Can you expand on the document.all problem?
ie4+ = document.all[...]
new browsers = document.getElementById(...)
that's why I wrote this earlier:
Code: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).
VinnyWhere the World Once Stood
the blades of grass
cut me still
-
Jul 29, 2003, 11:08 #8
- Join Date
- Sep 2002
- Location
- Bournemouth, South UK
- Posts
- 1,551
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
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.LiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if
Bookmarks