Editable line with PHP and Javascript

Question

Editable line with PHP and Javascript

Navigation

#1 by (1 votes)

1

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

As in this image, that prinlt of Trello.

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

Imadethefollowingcode:

functioneditarPedido(){varalterar=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 on the first line. I can not get the inputs to appear on the line the click was given and to change it.

So I had the idea to send somehow, the ID for this function in Javascript, or better, send it to getElementById . But nothing I've tried so far has worked on the mission of trying to redeem the ID in a JS function.

In this case, is my methodology correct to do this kind of thing? Or does it have security holes? Are there better ways to do this?

php mysql javascript html pdo

asked by anonymous 29.09.2016 / 20:17

1 answer

How to access variables from a previous scope in PHP? Uploading photo in java form

score 1 · Answer 1

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

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

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><pid="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 bank. If you have to submit more than one field in ajax I would suggest creating a form and using .submit of jquery.

The save.php file:

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

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

How to secure an Ajax request

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

I can 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.