I can’t get edited text from the input in a data-table to update the database

Asked

Viewed 42 times

-3

I am trying to update using a data-table, this data-table is by default disabled for editing, and on each line has a button named 'Edit' when clicking the button on the line and enabled for editing, and the name of the button changes to 'Save'. So far so good, but when clicking the 'Save' button you should take the edited values to do the update, return the name of the button to 'Edit', and disable the edit again.

js

function botaoEditar(button_edit){
   
   if($(button_edit).parents("tr").find('button span').text() == "Editar"){
      var _row = null;
      _row = $(button_edit).parents("tr");
      var cols = _row.children("td");
      
      $(button_edit).parents("tr").find('input').prop('readonly', false);
      
      alert($("input[name='cabo']").val());

      $(button_edit).parents("tr").find('button').removeClass('btn_editar');
      $(button_edit).parents("tr").find('button').addClass('btn_salvar');  
      $(button_edit).parents("tr").find('button span').text('Salvar');      
   
   } else{
      var _row = null;
       _row = $(button_edit).parents("tr");
       
       $(button_edit).parents("tr").find('input').prop('readonly', true);
     
      
       alert($("input[name='cabo']").val());
       
       $(button_edit).parents("tr").find('button').removeClass('btn_salvar'); 
       $(button_edit).parents("tr").find('button').addClass('btn_editar');
       $(button_edit).parents("tr").find('button span').text('Editar');
   }

Obs. the Alert() in both if conditions returns the same value that comes from the database.

HTML /php

foreach($listaRamais as $listRamal){ 
    echo"    
          <tr>
               <td><input typ='text' id='cabo' name='cabo' maxlength='5'style='width:100%;text-align: center;' readonly='readonly' value='".$listRamal['cabo']."'/></td>
               <td><input typ='text' name='par' maxlength='5'style='width:100%;text-align: center;' readonly='readonly' value='".$listRamal['par']."'/></td>
               <td id='ramal'><input typ='text' name='ramal' maxlength='9'style='width:100%;text-align: center;' readonly='readonly' value='".$listRamal['numero_ramal']."'/></td>
               <td><input typ='text' name='setor' maxlength='30' style='width:100%;text-align: center;' readonly='readonly' value='".$listRamal['setor_ramal']."'/></td>
               <td>
                  <button id='btn_edite' type='button' onclick='botaoEditar(this);' class='btn_editar'> 
                     <span class='glyphicon glyphicon-edit'>Editar</span>
                  </button>
               </td>
               <td style='display:none;'>".$listRamal['id_unidade']."</td>                              
          </tr>
      
";                    
}

Someone would tell me how to get the new values typed?

javascript jquery html5

  • That $("input[name='cabo']") will always return this element <input typ='text' id='cabo' name='cabo' maxlength='5'style='width:100%;text-align: center;' readonly='readonly' value='".$listRamal['cabo']."'/>

  • Even by typing another text into the input? I thought that clicking the button again would get the new text typed. What would be the right way to do this?

  • No he searches the tree of the document.

  • please, friend, would you have an example of how I could pick up the data, typed?

  • I can even set an example, but at the moment I am helping someone else. You will have to wait a little.

  • All right Augusto, it can be later, I’m waiting. Thank you!

Show 1 more comment

1 answer

1

thanks for the help Augusto, analyzing your comment I found my error, I was setting the element outside the object "button_edit" thus:

alert($("input[name='cabo']").val());

I switched to:

alert($(button_edit).parents("tr").find("input[name='cabo']").val());

now it’s working perfectly!

    1. To mark as solved, wait to pass the 24h period imposed by the system and mark the answer as accepted, do not put in the title meta-tags(Solved) because it confuses the search engines and knowledge generated here gets lost. 2)Excuse me, I forgot your question, I got to mount the server with your code, but so much came up....

Browser other questions tagged javascript jquery html5

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