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">

</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.

Code:

<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.

Code:

<!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>

Thread: How Do I Make My Form Work

Thread Tools

Search Thread

How Do I Make My Form Work

The Following User Says Thank You to Jesdisciple For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions