Valeurs de formulaire PHP en tant que variables JS dans la fonction de rappel

update 1: strong> Sur un commentaire de l'OP, supposons que nous ayons une situation similaire - mais plus simple em>, ayant les fichiers suivants tous les mêmes dossiers: p>

• data.txt: strong> - est juste utilisé à la place de la base de données pour la démonstration em> p>

  <?php
  
  if(isset($_POST['index']) && isset($_POST['title']) && isset($_POST['comment'])){
      // if there's a POST request, we retrieve the data.txt content as an array
      // depending on the POST index value we change the corresponding item in 
      // the array to update title and comment values, then write the array as
      // new content of the data.txt with the new array $foo. 
      $index = $_POST['index'];
      $title = $_POST['title'];
      $comment = $_POST['comment'];
      //Do validation and sanitizing here
      $temp = '';
      $foo = getContent();
      $foo[$index]['title'] = $title;
      $foo[$index]['comment'] = $comment;
      for($i = 0; $i < count($foo); $i++) {
          $temp .= $foo[$i]['title'] . ' , ' . $foo[$i]['comment'] . "\n";
      }
      $temp = trim($temp);
      file_put_contents('data.txt', $temp);
  }else{
      // if no POST request, no changes happened and our array is same as file content
      $foo = getContent();
  }
  
  // we encode $foo as JSON and echo it back to javascript
  $jsonFoo = json_encode($foo);
  echo $jsonFoo;
  
  // getting data.txt content and return an array of the content
  function getContent(){
      $bar = array();
      $data = file_get_contents('data.txt');
      $rows = explode("\n", $data);
      foreach ($rows as $row) {
          $cols = explode(",", $row);
          $title = trim($cols[0]);
          $comment = trim($cols[1]);
          $bar[] = array('title' => $title, 'comment' => $comment);
      }   
      return $bar;
  }
  

• JS strong> p>

  <!-- this is usually generated with PHP --> 
  <div id="output">
      <label for="mrp-title-0">Title #0:</label>
      <input type="text" id="mrp-title-0" class="titles" value="">
      <label for="comment-0">Comment #0:</label>
      <input type="text" id="comment-0" class="comments" value="">
      <button id="btn-0" class="buttons">Save Changes</button>
      <hr>
      <label for="mrp-title-1">Title #1:</label>
      <input type="text" id="mrp-title-1" class="titles" value="">
      <label for="comment-1">Comment #1:</label>
      <input type="text" id="comment-1" class="comments" value="">
      <button id="btn-1" class="buttons">Save Changes</button>
      <hr>
      <label for="mrp-title-2">Title #2:</label>
      <input type="text" id="mrp-title-2" class="titles" value="">
      <label for="comment-2">Comment #2:</label>
      <input type="text" id="comment-2" class="comments" value="">
      <button id="btn-2" class="buttons">Save Changes</button>
  </div>
  

• html: strong> p>

  $(document).ready(function() { 
  
      // for initializing we call fetchData function as soon as DOM is ready
      // then re-call it every 10,000 milliseconds to update the input values with new
      // fetched data , that could have been changed by other users.
      fetchData();
      setInterval(fetchData, 10000);
  
  
      // on any button click we get the numeric index value, using this value
      // to pick correspnding title and comment values, then send a POST
      // request to foo.php and on response data we call updateHTML
      $('.buttons').on('click', function(){
          indexV = $(this).attr('id').replace('btn-', '');
          titleV = $('#mrp-title-' + indexV).val();
          commentV = $('#comment-' + indexV).val();
          $.post('foo.php', { index : indexV, title:titleV, comment: commentV}, function(data){
             if(data){
                  updateHTML(data);
              }
          });
      });
  
  
      // Making a get request to fetch fresh data
      function fetchData(){
          $.get('foo.php', function(data){
              updateHTML(data);       
          });
      }
  
      // Update title and comment inputs values
      function updateHTML(data){
          var titleID, titleV, commentID, commentV, indexV, content;
          // using jQuery parseJSON function to convert the JSON response
          // to and array, then loop through this array to update inputs
          // with new title and comment values.
          content = $.parseJSON(data); 
          for(var i = 0; i < content.length; i++){
              titleID = '#mrp-title-' + i;
              titleV = content[i].title,
              commentID = '#comment-' + i;
              commentV = content[i].comment;
              $(titleID).val(titleV);
              $(commentID).val(commentV);
          }
      }
  });
  

  • foo.php: strong> p>

    title 0 , comment number 0
    title 1 , comment number 1
    title 2 , comment number 2