How to select the ids of a table with checkbox and save in the bank?

Asked

Viewed 2,812 times

1

How to select some items from a dimanica table coming from the mysql database and loaded into a table using javascript or jquery and set those marked with checkbox to category as 'sport' in the database? below has a code sketch

<table border="1">
  <thead>
      <tr>
        <th>Id</th>
        <th>Nome</th>
        <th>Categoria</th>
        <th>Editar</th>
      </tr>
  </thead>
  <tbody>
      <tr>
        <td><input type="checkbox" id="<?php echo $id ?>" value="<?php echo $id ?>"></td>
        <td>Fifa 2017</td>
        <td>Não definido</td>
        <td><button name="Editar">Editar</button></td>
      </tr>
      <tr>
        <td><input type="checkbox" id="<?php echo $id ?>" value="<?php echo $id ?>"></td>
        <td>Formula 1</td>
        <td>não definido</td>
        <td><button name="Editar">Editar</button></td>
      </tr>
  </tbody>
</table>

In the example above I want to select the two items and edit them so that the category is sport.

I think about retrieving the ids from the selected checkbox and writing to an Array() and then taking this Array() and updating the database with the data.

I need to select several and edit only 1 time and not line by line.

php javascript jquery html

  • It’s a little confusing to understand.

  • @Leocaracciolo I will try to explain better, I want to select some rows of a table that belong to the same category and when clicking on a button open a window with an input to put the category name and save in the category column of the selected lines, instead of editing item by item

  • Let’s see if this is how I understood its purpose, Fifa 2017 and also Formula 1. I click on one of the two "Edit" buttons to open, for example, a floating window with an input, put the name of the category and save in the category column. Can you tell me what column category this is?

  • perfect exactly this, this category column is in the database, will not be visible in the html table in question, I made a floating to save but I can only do row by row, but now I’ve come across a situation where the multi-line information is the same so I think I have a way to edit several in a single way

  • as it is, the ids and values of inputs are the same. Remember that Ids are unique. Each element can have only one ID. Each page can have only one element with that ID. Your code will not pass through the validator if you use the same ID in more than one element.

  • input id is dynamic, it brings the database id, corresponding to each line.

  • I had forgotten that detail.

Show 2 more comments

1 answer

2


You so to collect the Ids you want to change, then send the new array with Ids for your PHP saved in the database.

function coletaDados(){
   var ids = document.getElementsByClassName('editar');
   coletaIDs(ids);         
}  
        
function coletaIDs(dados){
   var array_dados = dados; 
   var newArray = [];
   for(var x = 0; x <= array_dados.length; x++){     
        if(typeof array_dados[x] == 'object'){
          if(array_dados[x].checked){
             newArray.push(array_dados[x].id)          
          }          
        }
   }
  if(newArray.length <= 0){
    alert("Selecione um pelo menos 1 item!");     
  }else{
    alert("Seu novo array de IDs tem os seguites ids [ "+newArray+" ]");
  }  
}
<table border="1">
  <thead>
      <tr>
        <th>Id</th>
        <th>Nome</th>
        <th>Categoria</th>
      </tr>
  </thead>
  <tbody>
      <tr>
        <td><input class="editar" type="checkbox" id="01" value="Fifa"></td>
        <td>Fifa 2017</td>
        <td>Não definido</td>
      </tr>
      <tr>
        <td><input class="editar" type="checkbox" id="02" value="Formula 1"></td>
        <td>Formula 1</td>
        <td>não definido</td>
      </tr>
    <tr>
      <td colspan="3">
        <button style="width:100%;" onclick="coletaDados()">Editar</button>
      </td>
    </tr>
  </tbody>
</table>

  • I appreciate the attention and it was exactly my need.

Browser other questions tagged php javascript jquery html

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