Editable line with PHP and Javascript

Question

I’m trying to create an editable line, so that when I click on it, Js brings me the inputs, allowing me to make the changes in that line and perform the Update in the database.

Like this picture I printed of Trello.

Note that it is a line, but when I click on it, the application brings me a field to edit and save.

I made the following code:

function editarPedido() {
  var alterar = document.getElementById("editar");
  alterar.innerHTML =
  "<input type='text' name='alt-nome'>"+
  "<input type='text' name='alt-causa'>"+
  "<input type='submit' name='salvar' value='Salvar'>"+
  "</form>";
}


<ul>
  <?php if(!empty($campos)):
          foreach($campos as $campo): ?>

    <li class='lista-pedidos'>Nome: <?=$campo->nome?> - Causa: <?=$campo->causa?>

      <a href="#" onclick="editarPedido()"> Editar</a>

      <form action='action.php' method='post'>
        <input type='hidden' name='id' value='<?=$campo->id?>'>
        <div id="editar"></div>
      </form>

    </li>

          <?php endforeach;
  endif; ?>
</ul>

This even works, but when I click edit, the inputs always appear in the first line. I can’t make, by clicking on any line, the inputs appear on the line the click was given and allow it to be changed.

So I had the idea of sending somehow, the ID to this function in Javascript, or better, send to the getElementById. But nothing I’ve tried so far has worked, in trying to rescue the ID in a JS function.

In this case, is my methodology correct to do this kind of thing? Or does it have security flaws? There are better ways to do this?

Answer 1

I could not understand very well, the question seems broad.

But from what I understand, you have a line, when you click on it it looks like an input to change or save the item in the database. The doubt would be in making tala effect and in question of safety.

Such an effect can be done here:

$(function(){
  $('#i-msg').hide();
  $('#b-msg').hide();
  
  $('#t-msg').click(function(){
      $('#t-msg').toggle('fast');
      $('#i-msg').val($('#t-msg').text());
      $('#i-msg').toggle('fast');
      $('#b-msg').toggle('fast');
  });
  
  $('#b-msg').click(function(){
      $('#t-msg').text($('#i-msg').val());
    
      $.post("save.php",
           "msg="+ $('#t-msg').text(),
        function (retorno) {
          if (retorno != "success") {
            // Quando der erro
          } else {
            // Quando salvar
          }
      });
    
      $('#i-msg').toggle('fast');
      $('#b-msg').toggle('fast');
      $('#t-msg').toggle('fast');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p id="t-msg">Sua mensagem<p>

<input type="text" name="msg" id="i-msg"/>
<button id="b-msg">Ok</button>

In Javascript I have an Ajax, responsible for requesting a file in PHP that will save or edit the item in the database. If you have to submit more than one field in ajax I suggest you create a form and use .submit jquery.

The save.php file:

<?php
if(isset($_POST['msg'])) {
    //salva no banco de dados
    echo 'success'; // sucesso
} else {
    echo 'fail'; // falhou
}

Now on to the security issue, you can take a look at this question:

How to protect an Ajax request

Where the main security system is a token created at the time of page generation and then checked before manipulating the database.

May I also suggest something more advanced, such as Silex Framework, a simple microframework, used a lot in Apis, in case it would be to receive your ajax requests.