这段代码仍无效,我在这个论坛上有一些动态输入字段,比如这个
$(document).ready(function() {
var counter = 2;
$("#addField").click(function () {
if(counter>110){
alert("Only 110 textboxes allow");
return false;
}
var newTextDiv = $(document.createElement('div'))
.attr("id", 'TextDiv' + counter);
newTextDiv.after().html('<table class="table">'+
'<tr>' +
'<td width="400" style="padding: 10px;">' +
'<p style="color: teal; font-size: 14px;"><span class="glyphicon glyphicon-home"></span> Building '+ counter +'</p>' +
'<label class="control-label">Building name :</label>' +
'<input type="text" class="form-control input-sm" id="id_building_name' + counter +'" name="field[building_name][]'+ counter +'"/>' +
'<label class="control-label">Year build :</label>' +
'<input type="text" class="form-control input-sm" id="id_year_build'+ counter +'" name="field[year_build][]'+ counter +'"/>' +
'</td>' +
'</tr>' +
'</table>'
);
newTextDiv.appendTo("#TextGroup");
counter++;
});
$("#removeField").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextDiv" + counter).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div id='TextGroup'>
<div id="TextDiv">
<table class="table">
<tr>
<p style="margin-left: 25px; color: teal; font-size: 14px;"> <span class="glyphicon glyphicon-home"></span> Building 1</p>
<td>
<div class="form-group">
<label class="control-label">Building name :</label>
<input type="text" class="form-control input-sm" id="id_building_name1" name="field[building_name][]"/>
<label class="control-label">Year build :</label>
<input type="text" class="form-control input-sm" id="id_year_build1" name="field[year_build][]"/>
</div>
</td>
</tr>
<tr>
<td>
<div class="box-main" style="padding-bottom: 10px;">
<label>Is there any other building ?</label><br/>
<input type='button' value='Add Field' id='addField' class="btn btn-info btn-sm">
<input type='button' value='Remove Field' id='removeField' class="btn btn-danger btn-sm">
<input type='button' value='Edit Value' id='editValue' class="btn btn-warning btn-sm">
</div>
</td>
</tr>
</table>
</div>
</div>
使用jquery然后成功保存到db ..问题是如何将数据(编辑数据事务)放入动态输入字段? 请帮助..谢谢
答案 0 :(得分:0)
这不是您的确切代码,但它会介绍如何在表单中转储和填充动态字段。浏览代码片段中的评论。
这是视图文件
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<form action="<?php echo base_url()?>controller/desired_controller_dump_function">
<div class="controls">
<dynamic>
<label for="other_charges">Add Tiered Discount & Qty <small>(click the green button to add more)</small>
</label>
<br>
<?php
//assuming $dynamic_fields_form_data is result of row_array() in codeigniter;
$discount_quantity_arr=json_decode($dynamic_fields_form_data[ 'discount_quantity'],true); //converting from json string to array
$discount_percentage_arr=json_decode($dynamic_fields_form_data[ 'discount_percentage'],true);
//$discount_quantity_arr=[]; //for testing code without data
//$discount_percentage_arr=[]; //for testing code without data
if(!empty($discount_percentage_arr)){ foreach($discount_percentage_arr as $k=> $v){ ?>
<div class="entry input-group col-xs-12 form-group ">
<div class="row">
<div class="col-xs-4">
<input class="form-control" name="discount_quantity[]" type="number" placeholder="Quantity" value="<?php echo $discount_quantity_arr[$k]?>" />
</div>
<div class="col-xs-4">
<input class="form-control" name="discount_percentage[]" type="number" placeholder="percentage" value="<?php echo $discount_percentage_arr[$k]?>" />
</div>
<div class="col-xs-2">
<span class="input-group-btn">
<?php
if($k+1==count($discount_percentage_arr)){
?>
<button class="btn btn-success btn-add" type="button" style="font-size:2vh">
<span class="glyphicon glyphicon-plus"></span>
</button>
<?php } else{ ?>
<button class="btn btn-remove btn-danger" type="button" style="font-size:2vh">
<span class="glyphicon glyphicon-minus"></span>
</button>
<?php } ?>
</span>
</div>
</div>
</div>
<?php } }else{ ?>
<div class="entry input-group col-xs-12 form-group ">
<div class="row">
<div class="col-xs-4">
<input class="form-control" name="discount_quantity[]" type="number" placeholder="Quantity" value="" />
</div>
<div class="col-xs-4">
<input class="form-control" name="discount_percentage[]" type="number" placeholder="percentage" value="" />
</div>
<div class="col-xs-2">
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button" style="font-size:2vh">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
<?php } ?>
</dynamic>
</div>
<button type="submit" class="btn btn-default"> Submit</button>
</form>
<script>
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('.controls dynamic:first');
var currentEntry = $(this).parents('.entry:first');
var newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
})
</script>
这是控制器功能
public function desired_controller_dump_function(){
extract($this->input->post());
$discount_quantity=json_encode($discount_quantity); //change to json string and save in database as string
$discount_percentage=json_encode($discount_percentage);
//save this variable in database through model
$this->model_function->dumpdata($discount_quantity,$discount_percentage);
//remaining process
}
public function desired_controller_get_function(){
$data['dynamic_fields_form_data']=$this->model_function->getdata();//function to get data from database through model
$this->load->view('dynamic_field_file',$data);
}