在表格codeigniter中按提交按钮时显示图像?

时间:2018-01-04 03:22:47

标签: javascript php jquery codeigniter

基本上我的问题与article我已经遵循这个建议相同......但它不起作用。 所以..我有一个表格,显示我从数据库中获取的名称和来源。以后可以输入其他信息。 当用户点击添加时,会有模态表单。在用户输入数据并单击“提交”后,我想显示图像(类似于成功添加的内容),但在按下提交之前,图像必须是不可见的。

视图



FROM redis
COPY redis.conf /usr/local/etc/redis/redis.conf
EXPOSE 6379
CMD [ "redis-server", "/usr/local/etc/redis/redis.conf" ]

<script language="javascript">
    function showImage() {
    var image = document.getElementById('myImg_<?php echo $i; ?>');
    image.style.display = '';
}
</script>
&#13;
&#13;
&#13;

模态

<?php  
   if(isset($results)>0){$i=1; foreach($results as $row)  {  
			?>  
		<tr>  
			<td><?php echo $i; ?></td>  
			<td><?php echo $row->name; ?></td>
			<td><?php echo $row->origin; ?></td>
			<td><img name="myImg" id="myImg_<?php echo $i; ?>" src="<?php echo base_url('images/ok.png'); ?>" width="20" height="20" style="display:none;" /></td>
			<td><button type="button" class="open-InputDataDialog btn btn-default" data-id="<?php echo $row->name;?>" data-origin-id="<?php echo $row->origin ;?>" data-toggle="modal" data-target="#InputDataDialog">Add	</button></td>
	</tr>  
<?php $i++;}}?>

...

<div class="modal fade" id="inputNilaiDialog" role="dialog" >

更新: 我想要实现的是当用户点击添加按钮并将数据作为模态框输入到表单时,图像(清单图标)将如下所示。

enter image description here

1 个答案:

答案 0 :(得分:1)

在每个按钮上添加data-rowid以提供唯一的行ID值:

<td>
    <button type="button" data-rowid="<?php echo $i; ?>" 
     class="open-InputDataDialog btn btn-default" 
     data-id="<?php echo $row->name;?>" 
     data-origin-id="<?php echo $row->origin ;?>" 
     data-toggle="modal" 
     data-target="#InputDataDialog">Add </button>
</td>

为模态表单添加输入:

<input type="hidden" id="rowid" name="rowid" value="" />

点击Add按钮,在表单上设置rowid,使其与rowid按钮具有相同的Add值。 (调用showImage()方法时将用于更改图像可见性)

<script language="javascript">
    $(document).on("click", ".open-InputDataDialog", function () {
        var rowId = $(this).data('rowid');
        $("#rowid").val(rowId);
    });
    function showImage() {
        var rowId = $('#rowid').val();
        $('#myImg_'+rowId).show();
    }
</script>

希望这有帮助