Pull data from a table for inputs on the same page

Asked

Viewed 261 times

2

I need help to pull the values that are inside a table. I made a code using table with $sql = "select * from equipamentos"; to pull the data I implemented in the Mysql Database, but specifically in the Equipments Table. I can use the values, which are in table, on other pages but it is not the point I want. I wish that when clicking on one of the lines of Table the values on that line are directed to some Inputs which are on the same page as the Table. and if possible that the user can not change the values that arrived in inputs.

I searched in other topics of the site and found no problems similar to mine!

This is the part of the Code I wish to implement that I mentioned above

    <form >
           <div class="col-md-1 col-sm-1 col-xs-1 form-group form-group-lg">
 id:<br/>
  <div class="form-group your-equip">
    <input class="wpcf7-form-control wpcf7-text  wpcf7-validates-as-required form-control form-control" name="nomeequip" type="int">
  </div>
   </div>
           <div class="col-md-4 col-sm-9 col-xs-9 form-group form-group-lg">
 Nome Do Equipamento:<br/>
  <div class="form-group your-equip">
    <input class="wpcf7-form-control wpcf7-text  wpcf7-validates-as-required form-control form-control" name="nomeequip">
  </div>
   </div>
    <div class="col-md-5 form-group form-group-lg"> Marca:<br/>
      <div class="form-group marca">
        <input class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required  form-control form-control" name="marcaequip" >
      </div> 
    </div>
      <div class="col-md-5 col-sm-10 col-xs-10 form-group form-group-lg">
 Cor:<br/>
  <div class="form-group cor">
    <input class="wpcf7-form-control wpcf7-text  wpcf7-validates-as-required form-control form-control" name="corequip" >
  </div>
   </div>
    <div class="col-md-5 form-group form-group-lg"> Categoria<br/>
      <div class="form-group Categoria">
        <input class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required  form-control form-control" name="categoriaequip" >
      </div> 
      </div>
      
    <div>
      <div class="col-md-12 form-group form-group-lg">
      <center> <h2>Equipamentos
</h2></center>
</div>

 <table border="2"  id='table'>
 <thead>
<tr>
  <th>Id</th>
  <th>Equipamento</th>
  <th>Cor</th>
  <th>Marca</th>
  <th>Categoria</th>
</tr>
<style type="text/css">
  tbody tr:hover{background-color:#555} 

</style>
</thead>
<tfoot>
    <tr>
        <td colspan="7"><center><script language=javascript type="text/javascript">
    dayName = new Array ("domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado")
monName = new Array ("janeiro", "fevereiro", "março", "abril", "maio", "junho", "agosto", "outubro", "novembro", "dezembro")
now = new Date
document.write (" Hoje é " + dayName[now.getDay() ] + ", " + now.getDate () + " de " + monName [now.getMonth() ]   +  " de "  +     now.getFullYear () + "   ")
document.write ( + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() )
</script></center></td>
    </tr>
</tfoot>
<center>
  <?php
            include_once "conexao.php"; 
            $sql = "select * from equipamentos";
            $result = mysql_query($sql,$con);
            if($result){
            while($linha1 = mysql_fetch_array($result)){
?>

<tbody>
       <tr>
          <td> <?php echo $linha1['id_equipamento'];?></td>
           <td> <?php  echo $linha1['nomeequip'];?></td>
           <td> <?php  echo $linha1['corequip'];?></td>
           <td> <?php  echo $linha1['marcaequip'];?></td>
           <td> <?php  echo $linha1['categoriaequip'];?></td>      
       </tr>
</tbody>

<?php
          }//fim do while
          }//fim do if  
          mysql_close($con);
?>
</table> 
    </div>
  </form>

1 answer

1


First you need to reset the name of input that will receive the ID of the product that is the same as the product name

Second, assign an identifier to each line, I thought it would be easier so:

<tr id="<?php echo $linha1['id_equipamento']; ?>">

Third, attribute an attribute to td containing the name of the respective fields that will receive the information, in my example I use the data-target for the Jquery identifies using .data('target'):

<td data-target="idequip"> <?php echo $linha1['id_equipamento'];?></td>
<td data-target="nomeequip"> <?php echo $linha1['nomeequip'];?></td>
<td data-target="marcaequip"> <?php echo $linha1['corequip'];?></td>
<td data-target="corequip"> <?php echo $linha1['marcaequip'];?></td>
<td data-target="categoriaequip"> <?php echo $linha1['categoriaequip'];?></td>

Next with a function on Jquery you get the result:

<script type="text/javascript">
    $('tbody tr').click(function(){
        var id = $(this).attr('id');
        $.each($('#'+id+" td"),function(){
            var target = $(this).data('target');
            $("input[name='"+target+"']").val($(this).html());
        });
    });
</script>

To avoid editing the inputswhich will receive the values, just add the attribute disabled or readonly to them.

Reference of the attribute readonly

Reference of the attribute disabled

Browser other questions tagged

You are not signed in. Login or sign up in order to post.