我有一个名为'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生成的这些表单元素不能仅使用JavaScripts动态生成任务行。所以,我创建了另一个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 ......
我不是这个领域的专家,请你好好就这个问题向我提出建议。
感谢。
答案 0 :(得分:3)
应该是
var rowCount = $('#pro_tasks tr').length;
你忘了哈希标志(对于一个id)。
答案 1 :(得分:1)
我认为,我的javascript中有一个缓存。
因此,我使用以下代码,而不是使用url发送rowCount。问题解决了。 :)
$(document).ready(function(){
$("#addtask").click(
function(){
$.ajax({
url: "task.php",
type: "GET",
success: function(data){
$("tbody").append(data);
}
});
});
$('#submit').click(function(){
$('#pro_tasks tr').each(function(index,item){
$('input#task_name',item).attr('name','task_name['+index+']');
$('input#tsk_start_date',item).attr('name','tsk_start_date['+index+']');
$('input#tsk_comp_date',item).attr('name','tsk_comp_date['+index+']');
$('select#assignedto',item).attr('name','assignedto['+index+']');
$('select#tsk_status',item).attr('name','tsk_status['+index+']');
$('input#tec',item).attr('name','tec['+index+']');
$('textarea#description',item).attr('name','description['+index+']');
});
});
});
提交表单时,此函数会为每个名称添加行号。
由于