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

Question

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

风景

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

<?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" >

...

<form class="form-horizontal" method="post" action="<?php echo base_url().'people/save'?>" onSubmit="return showImage();">

  <div class="box-body">
    <div class="form-group">
      <label for="address" class="col-sm-2 control-label">Address</label>

      <div class="col-sm-10">
        <input type="text" class="form-control" id="address" name="address" readonly />
      </div>                  
    </div>
    <div class="form-group">
      <label for="Telp" class="col-sm-2 control-label">Telp</label>

      <div class="col-sm-10">
        <input type="text" class="form-control" id="Telp" name="Telp" readonly />
      </div>                  
    </div>  

  <div class="modal-footer">
    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>

  </form>
  ..

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

Answer 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>

希望这可以帮助