Multi Row Form

kavionly · #1 (**permalink**) 09-10-09, 05:21 AM

Hi,
I have a multi row form . I am not able to select the time for all rows. Can anyone help me pls?

Here is my code

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" src="mootools.v1.11.<acronym title="JavaScript"><acronym title="JavaScript"><acronym title="JavaScript">js</acronym></acronym></acronym>"></script>
<script language="javascript" src="nogray_time_picker_min.<acronym title="JavaScript"><acronym title="JavaScript"><acronym title="JavaScript">js</acronym></acronym></acronym>"></script>
<script language="javascript">
window.addEvent("domready", function (){
var tp2 = new TimePicker('time2_picker', 'time2', 'time2_toggler', {format24:true});
var tp3 = new TimePicker('time3_picker', null, null, {visible:true, onChange:function(){
if (this.time.hour < 12) var ampm = this.options.lang.am;
else var ampm = this.options.lang.pm;
var hour = this.time.hour%12;
if (hour < 10) hour = "0"+hour;
var minute = this.time.minute;
if (minute < 10) minute = "0"+minute;
//$('time3_value').setHTML(hour+":"+minute+" "+ampm);
}});
	});
</script>
<style>
* {
	font-family:Arial, Helvetica, sans-serif;
	font-size:9pt;
}
/* table list */
	.table_list {
	border-collapse:collapse;
	border:solid #cccccc 1px;
	width:100%;
}
.table_list td {
	padding:5px;
	border:solid #efefef 1px;
}
.table_list th {
	background:#75b2d1;
	padding:5px;
	color:#ffffff;
}
.table_list tr.odd {
	background:#e1eff5;
}
.time_picker_div {
	padding:5px;
	border:solid #999999 1px;
	background:#ffffff;
}
</style>
</head>
<body>
  <script type="text/javascript">
   var AdBrite_Title_Color = '0000FF';
   var AdBrite_Text_Color = '000000';
   var AdBrite_Background_Color = 'FFFFFF';
   var AdBrite_Border_Color = 'FFFFFF';
</script>
<form method="post" action="timer.php">
<table>
]<?php
$i=0;
while($i<=5)
{
  $i++;
?>  
<tr>
<td>
<input type="text" name="time2[]" id="time2" />
<a href="#" id="time2_toggler">Open Time picker</a>
<div id="time2_picker" class="time_picker_div"></div>
</td>
</tr>
<?php
}
?>
</table>
</form>
</center>
</body>
</html>

wirehopper · #2 (**permalink**) 09-10-09, 03:00 PM

Code:

<input type="text" name="time2[]" id="time2" />
<a href="#" id="time2_toggler">Open Time picker</a>
<div id="time2_picker" class="time_picker_div"></div>

Change time2_picker in these lines to look like this:

PHP Code:


			
<div id="time<?php echo $i; ?>_picker" class="time_picker_div"></div>

It looks like you want to create 5 sets of the HTML. The ids must be unique. You will have to change all the 2s to use the PHP echo of $i.

kavionly · #3 (**permalink**) 09-11-09, 01:53 AM

i changed.. still not getting

wirehopper · #4 (**permalink**) 09-11-09, 06:13 AM

Please post your updated code.

kavionly · #5 (**permalink**) 09-14-09, 12:13 AM

here is the code

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" src="mootools.v1.11.js"></script>
<script language="javascript" src="nogray_time_picker_min.js"></script>
<script language="javascript">
window.addEvent("domready", function (){
//svar statesSelectObj = document.getElementById('time[]'+number);

var tp2 = new TimePicker('time1_picker', 'time2', 'time1_toggler', {format24:true});

var tp3 = new TimePicker('time2_picker', null, null, {visible:true, onChange:function(){
if (this.time.hour < 12) var ampm = this.options.lang.am;
else var ampm = this.options.lang.pm;
var hour = this.time.hour%12;
if (hour < 10) hour = "0"+hour;
var minute = this.time.minute;
if (minute < 10) minute = "0"+minute;
//$('time3_value').setHTML(hour+":"+minute+" "+ampm);
}});
	});
</script>
<style>
* {
	font-family:Arial, Helvetica, sans-serif;
	font-size:9pt;
}
/* table list */
	.table_list {
	border-collapse:collapse;
	border:solid #cccccc 1px;
	width:100%;
}
.table_list td {
	padding:5px;
	border:solid #efefef 1px;
}
.table_list th {
	background:#75b2d1;
	padding:5px;
	color:#ffffff;
}
.table_list tr.odd {
	background:#e1eff5;
}
.time_picker_div {
	padding:5px;
	border:solid #999999 1px;
	background:#ffffff;
}
</style>
</head>
<body>
  <script type="text/javascript">
   var AdBrite_Title_Color = '0000FF';
   var AdBrite_Text_Color = '000000';
   var AdBrite_Background_Color = 'FFFFFF';
   var AdBrite_Border_Color = 'FFFFFF';
</script>
<form method="post" name="form1" id="form1" action="timer.php">
<table>
<?php
$i=0;
while($i<=5)
{
  $i++;
?>  
<tr>
<td>
<input type="text" name="time2[]" id="time<?php echo $i?>" />
<input type="button" align="top"  ></strong></td>
<a href="#" id="time<?php echo $i?>_toggler">Open Time picker</a>
<div id="time<?php echo $i?>_picker" class="time_picker_div"></div>
</td>
</tr>
<?php
}
?>
</table>
</form>
</center>
</body>
</html>