Pull data from a table for inputs on the same page

Question

Pull data from a table for inputs on the same page

Navigation

#1 by (0 votes)

1

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

I looked in other topics on the site and did not find problems similar to mine!

This is the part of the Code that I want to implement what I said 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>

mysql input table

asked by anonymous 18.05.2018 / 22:32

1 answer

Search in local api, react-native Create a custom order in SQL

score 0 · Accepted Answer

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

Second, assigning an identifier for each line, I thought it would be easier this way:

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

Third, assign an attribute to td containing the name of the respective fields that will receive the information, in my example I use data-target because 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>

Then with a function in 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 inputs that will receive the values, simply add the disabled or readonly attribute to them.

readonly attribute reference

disabled attribute reference