动态添加php生成的表单元素

时间:2013-06-22 09:04:04

标签: php jquery

我有一个名为'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 ......

我不是这个领域的专家,请你好好就这个问题向我提出建议。

感谢。

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+']');
    });
});

});

提交表单时,此函数会为每个名称添加行号。

由于