在您可以修改/编辑表单的同时，将输入字段，文本区域，下拉列表添加到表单

时间：2018-09-03 06:57:21

标签： javascript php jquery html ajax

我如何修改此表单（以能够添加文本区域，下拉列表，甚至将文本区域编辑为下拉列表）

enter image description here

我知道我应该使用javascript，但是我尝试了几次，但是没有用。

下面是我的代码。**

我正在使用MVC编码方法

这位于ModifyVersantExam.php

中 
<?php 
$this->layout = '~/views/shared/_mainLayout.php';
$this->section['title'] = 'Versant Exam';
$this->section['username'] = $user['name'];
?>


<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <h3><strong><center><?php echo $exam[0]['versant_exam_title'];?></center></strong></h3>
            <br />
            <form id="form" class="form-horizontal form-label-left" method="POST" action="./">
                <?php $display = 'style="display:none"';

                      foreach($question as $ques){

                ?>

                <!-- Input Area -->
                <div class="form-group" id='' name='' <?php echo $i = ($ques['versant_examquestions_type']==1)? "":"$display";?> >
                    <label class="col-sm-2 control-label" for="<?php echo $ques['versant_examquestions_id'];?>"><?php echo $ques['versant_examquestions_question'];?></label>
                    <div class='col-sm-8'>
                        <input class='form-control' type='text' id='<?php echo $ques['versant_examquestions_id'];?>' name='<?php echo $ques['versant_examquestions_id'];?>' required>
                    </div>
                </div>

                <!-- Textarea Area -->
                <div class="form-group" id='' name=''  <?php echo $i = ($ques['versant_examquestions_type']==2)? "":"$display";?> >
                    <label class="col-sm-2 control-label" for="<?php echo $ques['versant_examquestions_id'];?>"><?php echo $ques['versant_examquestions_question'];?></label>
                    <div class='col-sm-8'>
                        <textarea class='form-control' id='<?php echo $ques['versant_examquestions_id'];?>' name='<?php echo $ques['versant_examquestions_id'];?>' required></textarea>
                    </div>
                </div>

                <!-- Select Area -->
                <div class="form-group" id='' name='' <?php echo $i = ($ques['versant_examquestions_type']==3)? "":"$display";?> >
                    <label class="col-sm-2 control-label" for="<?php echo $ques['versant_examquestions_id'];?>"><?php echo $ques['versant_examquestions_question'];?></label>
                    <div class='col-sm-8'>
                        <select class="form-control" id="<?php echo $ques['versant_examquestions_id'];?>" name="<?php echo $ques['versant_examquestions_id'];?>" required>
                            <option value="0">---Select---</option>
                            <?php
                                foreach($options as $loopoption){
                                    if($loopoption['versant_examoptions_questionid'] == $ques['versant_examquestions_id']){ ?>
                                        <option value="<?php echo $loopoption['versant_examoptions_id']; ?>"><?php echo $loopoption['versant_examoptions_options']; ?></option>
                                    <?php }
                                }
                            ?>
                        </select>
                    </div>
                </div>

                <!-- Radio Button Area -->
                <div class="form-group" <?php echo $i = ($ques['versant_examquestions_type']==4)? "":"$display";?> >
                    <label class="col-sm-2 control-label" for="">Radio Button 1:</label>
                    <div class="radio">
                      <label>
                        &nbsp;&nbsp;&nbsp;<input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios"> Option one. only select one option
                      </label>
                    </div>
                    <label class="col-sm-2 control-label" for="blank"> </label>
                    <div class="radio">
                      <label>
                        &nbsp;&nbsp;&nbsp;<input type="radio" value="option2" id="optionsRadios2" name="optionsRadios"> Option two. only select one option
                      </label>
                    </div>
                </div>

                <?php }?>
                <br /><br />
                     <?php 
                     $i=1;
                     $k = 0;?> 
                    <td><input name='title[]' type='text' placeholder='Title' class='form-control input-md'  width = "30" autocomplete='off'/> </td>
            <td data-name=\"sel\">
                <select class='form-control chos' name='sel[]'><option value=''>Select Option</option>
                <option value='1'>Input</option>
                <option value='2'>Text Field</option>
                <option value='3'>Dropdown</option></select>
                <br /> 
                <div class='row ' style='display:none;' id='options'>
                    <div class='form-group form-group-options col-xs-11 col-sm-8 col-md-12'>
                        <div class='input-group input-group-option col-xs-12'>
                            <input type='text' name='option["<?php $k+1 ?>"][]' class='form-control' placeholder='Type here' autocomplete='off'>
                            <span class='input-group-addon input-group-addon-remove'>
                                <span class='glyphicon glyphicon-remove'></span>
                            </span>
                        </div>
                    </div>
                </div>
                <td id='require0'>
                    <div>
                        <center><label><input type='checkbox'id='versant_required' name= 'versant_examquestions_required["<?php $k+1 ?>"]' value='1'/> Required? </label></center> 
                    </div>
                </td>
            </td>

                    <br><br>
                    <center>
                    <button id="add_row" onclick = "addrow()" class="btn btn-info">Add Row</button>
                    <a id="delete_row" class="btn btn-danger">Delete Row</a>
                    <br><br>
                    <a class="btn btn-danger pull-right">Cancel</a>
                    <a class="btn btn-primary pull-right">Save</a>
                    </center>
            </form>


        </div>
    </div>
</div>



<?php
$this->section['script'] = "
<script src='/emsTest/lib/datatable/jquery.dataTables.min.js'></script>
<script src='/emsTest/lib/datatable/dataTables.bootstrap.js'></script>
<script src='/emsTest/lib/datatable/dataTables.keyTable.min.js'></script>
<script src='/emsTest/lib/datatable/dataTables.responsive.min.js'></script>
<script src='/emsTest/lib/datatable/dataTables.scroller.min.js'></script>
<script src='/emsTest/lib/datatable/responsive.bootstrap.min.js'></script>
<script src='/emsTest/custom_scripts/Recruitment/VersantModifyExamBuilder.js'></script>
<script src='/emsTest/custom_scripts/Recruitment/versant.js'></script>";

$（document）.ready（function（）{

$('#options').hide();

//Add Rows
var i=1;
var k = 0;
$("#add_row").click(function(){

    $('#addr'+i).html("<td><center>"+ (i+1) +"</center></td>\n\
        <td><input name='title[]' type='text' placeholder='Title' class='form-control input-md'  autocomplete='off'/> </td>\n\
        <td data-name=\"sel\">\n\
            <select class='form-control chos' name='sel[]'><option value=''>Select Option</option>\n\
            <option value='1'>Input</option>\n\
            <option value='2'>Text Field</option>\n\
            <option value='3'>Dropdown</option>\n\</select>\n\
            <br /> \n\
            <div class='row ' style='display:none;' id='options'>\n\
                <div class='form-group form-group-options col-xs-11 col-sm-8 col-md-12'>\n\
                    <div class='input-group input-group-option col-xs-12'>\n\
                        <input type='text' name='option["+(k+1)+"][]' class='form-control' placeholder='Type here' autocomplete='off'>\n\
                        <span class='input-group-addon input-group-addon-remove'>\n\
                            <span class='glyphicon glyphicon-remove'></span>\n\
                        </span>\n\
                    </div>\n\
                </div>\n\
            </div>\n\
            <td id='require0'>\n\
                <div>\n\
                    <center><label><input type='checkbox'id='versant_required' name= 'versant_examquestions_required["+(k+1)+"]' value='1'/> Required? </label></center> \n\
                </div>\n\
            </td>\n\
        </td>");
    $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
    i++; 
    k++;
});

$(document).on('change','[data-name="sel"] select',function(){

    $(this).parent().find('div:first').show();

    var type = $(this).val();

    if(type == 3 || type == 4 ){
        $(this).parent().find('div:first').show();
    }else{
       $(this).parent().find('div:first').hide();
    }


});

//Delete Rows
$("#delete_row").click(function(){
    if(i>1){
        $("#addr"+(i-1)).html('');
        i--;
    }
});

//Focus dynamic
$(document).on('focus', 'div.form-group-options div.input-group-option:last-child input', function(){

    var sInputGroupHtml = $(this).parent().html();
    var sInputGroupClasses = $(this).parent().attr('class');
    $(this).parent().parent().append('<div class="'+sInputGroupClasses+'">'+sInputGroupHtml+'</div>');
    $('.input-group-addon.input-group-addon-remove').show();
    $('.form-group-options').each(function(){
        $(this).find('.input-group-addon.input-group-addon-remove:last').hide()
    });
});

$(document).on('click', 'div.form-group-options .input-group-addon-remove', function(){

    $(this).parent().remove();

});

}）;

0 个答案:

没有答案
相关问题
最新问题