Forums

Hi there,
I am working on to create a form that captures the details of about 24 soccer team members. While searching the web I came across a form that looks exactly what I am looking for. I followed the tutorial on this site http://webdesignfromscratch.com/datasheet.cfm But the form doesn't work for me.

Here are my problems:

I copied the code from the site and embaded into some other form code I have been playing with. The form looks great when displayed it. But I am unable to create tables for all the fields to capture the information. When I create new form, inserted the code, create new tables. Tables are created only for a few fields and 80% of the fields don't have table fields created?

What I'm doing wrong. I am only using two fild tabs for this form: The General tab ( where I create the form) and Code tab -where I put the HTML code) Do I have to use other tabs to make this simple form working?

Please see the code below.
thanks
John

<style type="text/css">

 legend
{
color:#000000;
background:#6699FF;
border: 1px solid #781351;
padding: 2px 6px;
}
 fieldset
{
border: 1px solid #781351;
width: 90%;
background-color:#E9FEFE

}
table.datasheet {
	width:100%;
}
.datasheet th {
	padding:3px;
	background-color:#ddd;
	border-top:1px solid #eef;
	border-left:1px solid #eef;
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	color:#003;
	font-size:.9em;
	font-weight:bold;
}
.datasheet th {
	text-align:left;
}
.datasheet tr {
	vertical-align:top;
}
.datasheet td {
	padding:0px;
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	background-color:#fff;
	font-size:.9em;
}
.datasheet td input {
	border:0px none;
	width:100%;
	height:100%;
	//width:90%;
	//height:90%;
}


.datasheet td input {
	border:0px none;
	width:100%;
	height:100%;
	//width:90%;
	//height:90%;
}

.form_groove_outer {
	padding:0px;
	margin:0px;
	border-top:1px solid #669;
	border-bottom:1px solid #fff;
	border-right:1px solid #fff;
}
.form_groove_inner {
	padding:0px;
	margin:0px;
	border-left:1px solid #669;
}

.datasheet th {
	padding:3px;
	background-color:#ddd;
	border-top:1px solid #eef;
	border-left:1px solid #eef;
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	color:#003;
	font-size:.9em;
	font-weight:bold;
	text-align:left;
}
.datasheet tbody th {
	text-align:right;
	padding:1px 3px 1px 1px;
	color:#222;
}


#changed {
	background-color:#ffa;
}
</style>
<fieldset>
<legend><strong>Team Registration Form</strong></legend>
<p><label1 for="name">Season:</label1><input type="text" name="text_1" size="40"></p>

<p><label1 for="name">Representative:</label1><input name="text_2" type="text" 

size="40"></P>

<p><label1 for="dayphone">Phone:</label1><input name="day_phone" type="text" size="40">     

    </p>

<p><label1 for="email">Team Eamil:</label1><input name="email" type="text" size="40"></p>
<p><label1 for="name">Team Name:</label1><input name="text_3" type="text" size="40"></p>
<p><label1 for="name">City & State:</label1><input name="text_4" type="text" size="40"></p>

<fieldset><legend><strong>Players Information</strong></legend>
<div class="form_background" style="width:90%;">
<div class="form_groove_outer"><div class="form_groove_inner">


<table class="datasheet" cellpadding="0" cellspacing="0">
	<thead>
		<tr>
		<th style="width: 2%;">#</th>
		<th style="width: 10%;" nowrap="nowrap">First Name</th>
		<th style="width: 20%;" nowrap="nowrap">Last Name</th>

		<th style="width: 22%;" nowrap="nowrap">Position</th>
		<th style="width: 46%;" nowrap="nowrap">Date of Birth (YYYY/MM/DD)</th>
		</tr>
	</thead>
	<tbody>
	<tr id="set1_row1" class="datasheet_row">
		<th>1</th>

		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
	<tr id="set1_row2" class="datasheet_row">
		<th>2</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
	<tr id="set1_row3" class="datasheet_row">
		<th>3</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>

		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
	<tr id="set1_row4" class="datasheet_row">
		<th>4</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>

		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
	<tr id="set1_row5" class="datasheet_row">
		<th>5</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
    <tr id="set1_row6" class="datasheet_row">
		<th>6</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
    <tr id="set1_row7" class="datasheet_row">
		<th>7</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
    <tr id="set1_row8" class="datasheet_row">
		<th>8</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
    <tr id="set1_row9" class="datasheet_row">
		<th>9</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
    <tr id="set1_row10" class="datasheet_row">
		<th>10</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
    <tr id="set1_row11" class="datasheet_row">
		<th>11</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
    <tr id="set1_row12" class="datasheet_row">
		<th>12</th>

		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
	<tr id="set1_row13" class="datasheet_row">
		<th>13</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
	<tr id="set1_row14" class="datasheet_row">
		<th>14</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>

		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
	<tr id="set1_row16" class="datasheet_row">
		<th>16</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>

		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
	<tr id="set1_row17" class="datasheet_row">
		<th>17</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
    <tr id="set1_row18" class="datasheet_row">
		<th>18</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
    <tr id="set1_row19" class="datasheet_row">
		<th>19</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
    <tr id="set1_row20" class="datasheet_row">
		<th>20</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
    <tr id="set1_row21" class="datasheet_row">
		<th>21</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
    <tr id="set1_row22" class="datasheet_row">
		<th>22</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
    <tr id="set1_row23" class="datasheet_row">
		<th>23</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
    <tr id="set1_row24" class="datasheet_row">
		<th>24</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
    <tr id="set1_row25" class="datasheet_row">
		<th>25</th>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
		<td><input value="" onChange="this.className='changed';" type="text" /></td>
	</tr>
</tbody></table>
</div></div>
</fieldset><br/>
<fieldset>
<legend><strong>The best way to contact you is</strong></legend>

<input type="checkbox" name="contact" value="phone"> By Telephone 
<input type="checkbox" name="contact" value="email"> By Email </p>
</fieldset><br/>
<fieldset>
<legend><strong>Use the space below for additional questions & comments:</strong></legend>
<p><textarea COLS="50" NAME="other_info0" id="ff_elem205" style="height: 63; width: 612" 

rows="4"></textarea>
</p>
</fieldset><br/>
<fieldset><legend><strong>AntiSpam</strong></legend>
<div align="center">{imageverification}</div>
</fieldset>
</p>

<p align="center">
  <input type="submit" value="Send to Oromia Sports" name="Submit" style="font-weight: bold">       
  <input type="reset" value="Reset (cancel form)" name="reset" style="font-size: 8pt">
</p>

Hi John,

It's late now, but it looks as though you are missing some JavaScript to give these fields distinctive names

<input value="" onChange="this.className='changed';" type="text" />

Bob

Hi Bob,
Thank for the response as you do all the time. I reallized I sent question late in the day. I live in Toronto Canada and I am not sure where you are located - may be USA.

I read something about Javascript on the website where I got the code from and I will go back read more.

Thanks.

John

I went back and read everything on the website and I couldn't find anything about javascript.

Do you have any suggestion how can fix this problem? I am not sure where to begin and search the net to find if there is any javascript I can use to make the form working.

John.

Hi John,

I'm in France, so a few time-zone hours away from you. I had a look at the site you quoted this morning and it looks as though you need to add name attributes. On the site the input code example is

<input name="record_1_fieldname" value="" type="text"
  onchange="this.className='changed';" />

while you have:

<input value="" onChange="this.className='changed';" 
type="text" />

notice the missing name="record_1_fieldname".

You need unique names for each of these fields to make the html valid.

Bob

PS Apologies for the misleading answer last night - I saw the names were missing and saw 'className' in the code and put two and two together to make five.

Greetings Bob,
You are amazing Bob. I made all the field names unique as you suggested and I am able to create table fields for the form. I can't tell you how happy I am.

One more question. I am capturing about 24 players' info with four piece of data for each person. When these records are submitted, each field is recorded one one row creating four rows for each person. Is there a way to put each person's reord to be on one line (row)? for example:
First Name, Last Name, Position, Date of Birth on one row as oppose to 4 rows.

summary:
Now 24 players records 4x24 = 98 rows

I would like to change it to 1x24 = 24 rows

Can this be done from the form html or from the form backend?
Your help is much appreciated
John

Hi John,

Yes, you need to use array names to do this.

You might need to experiment a bit but roughly it goes like this:

<input . . .name="member_1['first_name']" . . . />
<input . . .name="member_1['last_name']" . . . />
<input . . .name="member_1['position']" . . . />
<input . . .name="member_1['dob']" . . . />

In fact you could collect the whole team into a single entry.

<input . . .name="member[1]['first_name']" . . . />
<input . . .name="member[1]['last_name']" . . . />
<input . . .name="member[1]['position']" . . . />
<input . . .name="member[1]['dob']" . . . />
<input . . .name="member[2]['first_name']" . . . />
<input . . .name="member[2]['last_name']" . . . />
<input . . .name="member[2]['position']" . . . />
<input . . .name="member[2]['dob']" . . . />

and so on.

You'll need to so some post-processing with this as ChronoForms can't save a two-dimensional array in the databse without a little extra code.

These kinds of forms really lend themselves to being generated on the fly with a little php.

Bob

Hi Bob,
I see you are still online.

Thank for your help. I am applying your suggestion.
I changed some names to array as follows.I am I on the right track?
<td><input name="record_1_fieldname_1['first_name']"value="" onChange="this.className='changed';" type="text" /></td>
<td><input name="record_1_fieldname_2['last_name']"value="" onChange="this.className='changed';" type="text" /></td>
<td><input name="record_1_fieldname_3['position']"value="" onChange="this.className='changed';" type="text" /></td>
<td><input name="record_1_fieldname_4['dob']"value="" onChange="this.className='changed';" type="text" /></td>

Hi John,

Looks OK, you may need spaces where I've put the underline in here: ']"_value

Bob