Log in

View Full Version : How Do I Make My Form Work


bigkga
08-03-2008, 11:35 PM
This is what I have done. Now my question is that I have the friend one working but cannot get a repeat with another question which has another question and has a second box that needs to come up. How do i achieve this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function SelectCng(sel,id){
document.getElementById(id).style.display=sel.selectedIndex==3?'':'none';
}
//-->
</script></head>

<body>
<form>
<table border="1">
<tr>
<td>Your Name </td><td><input type="text" name="Name" /></td></tr>
<tr>
<td>Email Address</td><td><input type="text" name="Email" /></td></tr>
<tr>
<td>First Time Here?</td><td><select size="1" name="First">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</td>
</tr>
<tr>
<td>
How did you find us?
</td>
<td>
<select size="1" name="Found_by" onchange="SelectCng(this,'Friend');" >
<option value="Newspaper">Newspaper</option>
<option value="Search Engine">Search Engine</option>
<option value="Flyer">Flyer</option>
<option value="Friend">Friend</option>
</select>
</td>
</tr>
<tr id="Friend" style="display:none;" >
<td>
Friends Name
</td>
<td>
<input name="FriendName">
</td>
</tr>
</form>
</table>

</body>

</html>
Jesdisciple
08-04-2008, 03:33 AM
I must admit this is a tough situation to describe, but please use a more descriptive title next time - e.g. Doubling this DOM Modification.

EDIT: BTW, your <form> and <table> tags are out of order; the form opens before the table and closes before the table. I prefer the form on the outside, personally.

Anyway, note that all I did was copy the rows and change the IDs to keep them unique.
<tr>
<td>
How did you find us?
</td>
<td>
<select size="1" name="Found_by" onchange="SelectCng(this,'Friend1');" >
<option value="Newspaper">Newspaper</option>
<option value="Search Engine">Search Engine</option>
<option value="Flyer">Flyer</option>
<option value="Friend">Friend</option>
</select>
</td>
</tr>
<tr id="Friend1" style="display:none;" >
<td>
First Friend's Name
</td>
<td>
<input name="FriendName">
</td>
</tr>
<tr>
<td>
How did you find us?
</td>
<td>
<select size="1" name="Found_by" onchange="SelectCng(this,'Friend2');" >
<option value="Newspaper">Newspaper</option>
<option value="Search Engine">Search Engine</option>
<option value="Flyer">Flyer</option>
<option value="Friend">Friend</option>
</select>
</td>
</tr>
<tr id="Friend2" style="display:none;" >
<td>
Second Friend's Name
</td>
<td>
<input name="FriendName">
</td>
</tr>
bigkga
08-04-2008, 04:58 AM
Thanks.

I tried doing that but Friend number 2 does show on my drop down list. What shows up is

Search Engine
Newspaper
Flyer
Friend (and a box shows if selected)

I want it to show as follows
Search Engine
Newspaper
Flyer
Friend (box shows for text input if selected, otherwise it is hidden)
Friend #2 (box shows for text input if selected, otherwise it is hidden)
Jesdisciple
08-04-2008, 04:22 PM
You should have been clearer about what you wanted in the first place. Also, please study this to understand my changes, and ask any questions about it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function SelectCng(sel,ids){
for(index in ids){
document.getElementById(ids[index][1]).style.display =
sel.selectedIndex == ids[index][0] ? '' : 'none';
}
}
//-->
</script></head>

<body>
<form>
<table border="1">
<tr>
<td>Your Name </td><td><input type="text" name="Name" /></td></tr>
<tr>
<td>Email Address</td><td><input type="text" name="Email" /></td></tr>
<tr>
<td>First Time Here?</td><td><select size="1" name="First">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</td>
</tr>
<tr>
<td>
How did you find us?
</td>
<td>
<select size="1" name="Found_by" onchange="SelectCng(this,[[3, 'Friend1'], [4, 'Friend2']]);" >
<option value="Newspaper">Newspaper</option>
<option value="Search Engine">Search Engine</option>
<option value="Flyer">Flyer</option>
<option value="Friend">Friend</option>
<option value="Friend">Friend</option>
</select>
</td>
</tr>
<tr id="Friend1" style="display:none;" >
<td>
Friends Name
</td>
<td>
<input name="FriendName1">
</td>
</tr>
</tr>
<tr id="Friend2" style="display:none;" >
<td>
Friends Name
</td>
<td>
<input name="FriendName2">
</td>
</tr>
</table>
</form>

</body>

</html>