我从一个名为“form”的php类中生成了以下表单。在这个表单中,我有一个部分需要动态添加多个表单元素(id="pro_tasks" 的表)。
在这种形式中,用户应该能够添加更多任务。
<?php
h2("Add Project");
echo $form->create(array( 'id' =>'addProject',
'name' =>'addProject',
'method' =>'get',
'action' =>'index.php'));
$form->open_fieldset();
onebreak();
$form->legend("Project Detals");
echo $form->text (array( 'id' =>'pro_name',
'label' =>'Project Name : ',
'name' =>'pro_name',
'required' =>'required',
'length' =>255));
twobreaks();
echo $form->select(array( 'id' =>'pro_type',
'label' =>'Project Type : ',
'name' =>'pro_type',
'data' =>$form->option_array("SELECT DISTINCT id,pro_type
FROM project_types",
'id', 'pro_type')));
twobreaks();
echo '<label for="client">Client : </label>
<input type="radio" name="NA" value="company" checked="checked">Company
<input type="radio" name="NA" value="person">Person';
echo '<div id="client">';
//The client list generated inside this dive tag, based on the redio button selected above
//The Company list has selected by default
echo '<div id="companydiv">';
echo $form->select(array( 'id' =>'client',
'label' =>' ',
'name' =>'client',
'data' =>$form->option_array("SELECT DISTINCT id, name
FROM companies
WHERE addressbook_id='1' OR addressbook_id='2' OR addressbook_id='3' OR addressbook_id='4'",
'id', 'name')));
echo '</div>';
echo '</div>';
twobreaks();
echo $form->date (array( 'id' =>'start_date',
'label' =>'Start Date : ',
'name' =>'start_date',
'required' =>'required',
'class' =>'datepicker',
'length' =>255));
bigspace();
echo $form->date (array( 'id' =>'comp_date',
'label' =>'Completion Date : ',
'name' =>'comp_date',
'required' =>'required',
'class' =>'datepicker',
'length' =>255));
twobreaks();
echo $form->select (array('id' =>'status',
'label' =>'Project Status : ',
'name' =>'status',
'data' =>array('pending' =>'pending',
'ongoing' =>'ongoing',
'suspended' =>'suspended',
'terminated' =>'terminated',
'completed' =>"completed"),
'value'=>'pending'));
twobreaks();
echo $form->select(array( 'id' =>'resp_id',
'label' =>'Responsibility',
'name' =>'resp_id',
'data' =>$form->option_array("SELECT DISTINCT id, CONCAT( first_name, ' (',user_type,')') AS resp_name
FROM users
WHERE status='ACTIVE'",
'id', 'resp_name')));
twobreaks();
echo $form->select (array('id' =>'priority',
'label' =>'Priority : ',
'name' =>'priority',
'data' =>array('low' =>'low',
'moderate' =>'moderate',
'high' =>'high',),
'value'=>'low'));
twobreaks();
echo $form->textBox(array ('id' =>'description',
'label' =>'Description : ',
'name' =>'description',
'columns' =>'50',
'rows' =>'5'));
twobreaks();
echo $form->text(array ('id' =>'tec',
'label' =>'Total Estimated Cost (Rs) : ',
'name' =>'tec'));
twobreaks();
echo $form->textBox(array ('id' =>'remarks',
'label' =>'Remarks : ',
'name' =>'remarks'));
twobreaks();
$form->close_fieldset();
$form->open_fieldset();
onebreak();
$form->legend("Project Tasks");
?>
<div class="overflowTable">
<table id="pro_tasks">
<tr align="center" class="FormTableHeader">
<th>Task Name </th>
<th>Start Date </th>
<th>Completion Date </th>
<th>Responsibility </th>
<th>Status </th>
<th>TEC </th>
<th>Description </th>
</tr>
<?php //Need some code to repeat the rows when this is a update form?>
<tr id="task">
<td> <?php echo $form->text (array('id' =>'task_name',
'name' =>'task_name[]',
'required' =>'required'));?> </td>
<td> <?php echo $form->date (array('id' =>'tsk_start_date',
'name' =>'tsk_start_date[]',
'required' =>'required',
'class' =>'datepicker',));?> </td>
<td> <?php echo $form->date (array('id' =>'tsk_comp_date',
'name' =>'tsk_comp_date[]',
'required' =>'required',
'class' =>'datepicker',));?> </td>
<td> <?php echo $form->select(array('id' =>'assignedto',
'name' =>'assignedto[]',
'data' =>$form->option_array("SELECT DISTINCT id, CONCAT( first_name, ' (',user_type,')') AS resp_name
FROM users
WHERE status='ACTIVE'",
'id', 'resp_name')));?></td>
<td> <?php echo $form->select(array( 'id' =>'tsk_status','name'=>'tsk_status[]',
'required' =>'required',
'data' =>array('pending' =>'pending',
'ongoing' =>'ongoing',
'suspended' =>'suspended',
'terminated' =>'terminated',
'completed' =>'completed'),
'value' =>'pending'));?> </td>
<td><?php echo $form->text (array('id' =>'tec','name'=>'tec[]'));?> </td>
<td><?php echo $form->textBox(array('id' =>'description','name'=>'description[]'));?></td>
</tr>
</table>
</div>
<div id="addProject_errorloc" class="error_strings"></div>
<img src="../../images/add.png" alt="addtask" id="addtask">
<img src="../../images/remove.png" alt="removetask" id="removetask">
<?php
$form->close_fieldset();
echo $form->submit(array('id'=>'submit', 'name'=>'submmit'));
echo $form->close();
?>
由于这些由 php 生成的表单元素我不能只使用 JavaScript 来动态生成任务行。所以,我创建了另一个 php 页面,它可以生成任务行并使用 jQuery GET 方法添加到表单中,如下所示
<?php require_once(dirname(__FILE__).'/../../../includes/initialize.php');
$rowCount="";
if(isset($_GET['rowCount'])){
$rowCount = $_GET['rowCount'];
}
?>
<tr id="task">
<td> <?php echo $form->text (array('id' =>'task_name',
'name' =>'task_name['.$rowCount.']',
'required' =>'required'));?> </td>
<td> <?php echo $form->date (array('id' =>'tsk_start_date',
'name' =>'tsk_start_date['.$rowCount.']',
'required' =>'required',
'class' =>'datepicker',));?> </td>
<td> <?php echo $form->date (array('id' =>'tsk_comp_date',
'name' =>'tsk_comp_date['.$rowCount.']',
'required' =>'required',
'class' =>'datepicker',));?> </td>
<td> <?php echo $form->select(array('id' =>'assignedto',
'name' =>'assignedto['.$rowCount.']',
'data' =>$form->option_array("SELECT DISTINCT id, CONCAT( first_name, ' (',user_type,')') AS resp_name
FROM users
WHERE status='ACTIVE'",
'id', 'resp_name')));?></td>
<td> <?php echo $form->select(array( 'id' =>'tsk_status','name'=>'tsk_status['.$rowCount.']',
'required' =>'required',
'data' =>array('pending' =>'pending',
'ongoing' =>'ongoing',
'suspended' =>'suspended',
'terminated' =>'terminated',
'completed' =>'completed'),
'value' =>'pending'));?> </td>
<td><?php echo $form->text (array('id' =>'tec','name'=>'tec['.$rowCount.']'));?> </td>
<td><?php echo $form->textBox(array('id' =>'description','name'=>'description['.$rowCount.']'));?></td>
$(document).ready(function(){
$("#addtask").click(
function(){
var rowCount = $('#pro_tasks tr').length;
$.ajax({
url: "task.php?rowCount="+rowCount,
type: "GET",
success: function(data){
$("tbody").append(data);//Do something here with the "data"
}
});
});
});
除了 (var rowCount = $('#pro_tasks tr').length;) 之外,上面的所有代码都可以正常工作。这不计算表中的行数。因此我无法单独识别动态生成的行。
一直以来,行数都是 2...
我不是这个领域的专家,请在这个问题上给我建议。
谢谢。