[英]different result comes in same field
这是在使用Dynamic-Form-Element-Creation-And-Deletion-Plugin-Addel
插入更多值及其工作方式,但是这里面临的问题是,当我从addel使用的选择框中选择一个值时,相应的数据就会出现在其中相应的框,如果我通过单击添加按钮选择另一个选择框,则相应的值将出现在第一个字段中而不是相应的字段中。 这是我的看法
<div class="form-group ">
<label class="col-lg-3 control-label">Select Tools<span
class="required">*</span></label>
<div class="col-lg-6">
<div class="addel">
<div class="form-group target">
<div class="input-group">
<div class="col-lg-6"> <select class="form-control tools" style="width: 100%" name="tool_id[]" id="tools" onchange="tool(this)" required>
<option value="">Select</option>
</select></div>
<div class="col-lg-3">
<input type="text" class="form-control" required name="quantity[]" id="quantity" placeholder="Quantity">
</div>
<div class="col-lg-3" id="avail">
<input type="text" class="form-control" name="available" id="available" placeholder="Available" value="0 available">
</div>
<span class="input-group-btn">
<button type="button" class="btn btn-danger addel-delete"><i class="fa fa-remove"></i>
</button>
</span>
</div>
</div>
<button type="button" class="btn btn-success addel-add"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
这是我的剧本
<script>
function tool(sel)
{
var tools=sel.value;
alert(tools);
var url='<?php echo base_url(); ?>admin/tool/ajax_available';
$.post(url, {tools:tools}, function(data)
{
alert("Value: " + $("#avail").html(data));
});
}
</script>
这是我的控制器
public function ajax_available()
{
$data['available']=$this->Tool_model->view_available_by_type($_POST['tools']);
//var_dump($data['available']);
$this->load->view('admin/tool/ajax_available',$data);
}
这是我的ajax_available视图
<input type="text" class="form-control" name="available" id="available" placeholder="" value="<?php echo $available->available;?> available">
我的图片如下所示: 有效的XHTML http://spdc.in/demo/spectra/assets/images/s-tool.PNG 。
您没有为元素提供唯一标识符。 每次您添加带有下拉列表和文本框的新行时,它都会为这些新元素再次生成相同的ID。 这是无效的HTML,所有元素都必须具有唯一的ID。
所以当你这样做
$("#avail").html(data)
它找到具有该ID的元素的第一个实例-因为应该只有一个。 就javascript而言,其他都不存在,因为它们无效。
由于页面中将有多个“可用”文本框,因此您不能依靠ID来填充正确的文本框。 给您的“可用” div一个类而不是一个id,然后告诉脚本通过使用其在标记中的位置来找到相关的一个:
<div class="col-lg-3 avail">
<input type="text" class="form-control available" name="available" placeholder="Available" value="0 available">
</div>
然后在您的代码中,而不是$("#avail").html(data)
:
$(this).parent().parent().find(".avail").html(data);
这种上升的DOM由两个div,找到共同的祖先都选择( this
在函数的上下文中),并且要更改,然后在div内它会搜索与元素avail
类,以及用数据填充它。
您还应该从任何其他可重复的元素中删除“ id”属性,例如“ quantity”。
PS我不确定为什么要为此“可用”属性使用文本框-好像状态值来自数据库,用户不应更改。 因此,它实际上应该是标签或跨度。 文本框用于输入,而不用于输出。 另外,您的用户可能会键入和更改值,这可能会使他们感到困惑。 但我会留给你排序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.