-3

I have a PHP code and JSON as shown below:

PHP Code:

<?php if (!empty($_POST) && isset($_POST['savechanges']) && $_POST['savechanges'] == 1 && isset($_SESSION['pageadmin'])) {
      $output = array();     
      $output['en_desc']=$_POST['en_desc'];
      $output['code']=$_POST['code'];

      $fp = fopen('../feeds/ptp-ess_landing_scommittees.json', 'w');
      fwrite($fp, json_encode($output));
      fclose($fp);
   }
   if(file_exists('../feeds/ptp-ess_landing_scommittees.json')){
       $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_scommittees.json'));
   }
?> 
<?php if($data) { ?>
    <form method="post" id="myform" style="text-align:left;">
      <input type="hidden" id="savechanges" name="savechanges" value="1">
       <div style="text-align:center; margin-right:9px; margin-bottom:24.703px;">
         <button type="submit">Save</button>
       </div>
        <?php foreach ($data->code as $key => $value) { ?>
        <div class="house-senate-committee" style="text-align:center; margin-top:15px;">
            <button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
            <input type="text" name="code[]" style="margin-right:10px;" value="<?= $data->code[$key] ?>">
            <input type="text" name="en_desc[]" value="<?= $data->en_desc[$key] ?>">
        </div>
        <?php } ?>
    </form>
<?php } else { echo 'Cannot read JSON settings file'; }?>

JSON:

{"code":["AEFA","AGFO"], "en_desc":["Foreign Affairs and International Trade","Agriculture and Forestry"]}

The following DOM is generated through the PHP/JSON code above:

DOM (HTML):

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
  <button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
  <input type="text" name="code[]" style="margin-right:10px;" value="AEFA">
  <input type="text" name="en_desc[]" value="Foreign Affairs and International Trade">
</div>

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
  <button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
  <input type="text" name="code[]" style="margin-right:10px;" value="AGFO">
  <input type="text" name="en_desc[]" value="Agriculture and Forestry">
</div>

The following JS code deletes a row from the DOM on click of a delete button. On refreshing the page, the deleted row comes back again as everything is rendered through JSON.

JS code:

<script>
function removeRow(el) {
  el.parentNode.remove();
}
</script>

Problem Statement:

The above JS code is deleting the row (on click of a delete button) from the DOM but on refresing the page, everything is rendered again.

I am wondering what PHP code I need to add so that it delete the values from the JSON on saving the form when row is deleted from DOM through JS.

Step 1: User delete the row from the DOM on click of a delete button.
Step 2: On saving the form and rendering the page, that deleted row should not be present.

I know I have to use unset function in order to remove the values from the JSON but I am not sure how I can integrate it in the form.

unset($data->code);
unset($data->en_desc);
flash
  • 1,455
  • 11
  • 61
  • 132

1 Answers1

1

You have a typo here:

   $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_scommittees.json'));

it should be

       $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_committees.json'));

Look at the "s" :)

Edit: you also were saving the new file without actually checking if there is a post happening, here is the full code:

<?php

if (isset($_POST['submit'])) {
  $output = array();
  $output['en_desc'] = $_POST['en_desc'];
  $output['code'] = $_POST['code'];

  $fp = fopen('../feeds/ptp-ess_landing_committees.json', 'w');
  fwrite($fp, json_encode($output));
  fclose($fp);
}

if (file_exists('../feeds/ptp-ess_landing_committees.json')) {
  $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_committees.json'));
}

?>
<?php if ($data) { ?>
  <form method="post" id="myform" style="text-align:left;">
    <div style="text-align:center; margin-right:9px; margin-bottom:24.703px;">
      <button type="submit" name="submit">Save</button>
    </div>
    <?php foreach ($data->code as $key => $value) { ?>
      <div class="house-senate-committee" style="text-align:center; margin-top:15px;">
        <button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
        <input type="text" name="code[]" style="margin-right:10px;" value="<?= $data->code[$key] ?>">
        <input type="text" name="en_desc[]" value="<?= $data->en_desc[$key] ?>">
      </div>
    <?php } ?>
  </form>
<?php } else {
  echo 'Cannot read JSON settings file';
} ?>

<script>
  function removeRow(el) {
    el.parentNode.remove();
  }
</script>
  • Are you aware of onclick event in Javascript ? – flash Feb 17 '20 at 22:48
  • [onclick event](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick) On click of button, it do the activity but on refreshing the page it comes back to the original state. – flash Feb 17 '20 at 22:49
  • I know what an onclick event is. but don't you want the json to be updated when you click on save? – Ebrahim Mohammed Feb 17 '20 at 22:50
  • What changes you did ? Also, I haven't pasted the complete code. It is just a snippet. – flash Feb 17 '20 at 22:52
  • You had a typo in your .json file, I also added a "name" to the button so you make sure you only delete/update the json when a post has happened. – Ebrahim Mohammed Feb 17 '20 at 22:53
  • That was unintentional typo. Everywhere it should be **../feeds/ptp-ess_landing_scommittees.json**. I updated the question. I am wondering why adding **name="submit"** is updating/deleting the JSON ? – flash Feb 18 '20 at 17:17
  • I copied this line **name="submit"** and it started working so just curious why adding that line is updating/deleting the JSON. – flash Feb 18 '20 at 17:21
  • well is the unintentional typo was in the code? or did you make a mistake when copying it on stackoverflow? the name="submit" and the isset($_POST['submi']) is doing nothing but making sure you are actually posting values – Ebrahim Mohammed Feb 18 '20 at 17:56
  • I made a mistake while copying it on Stackoverflow. – flash Feb 18 '20 at 20:29
  • I also updated my question. Check the updated part.I added the following line: **if (!empty($_POST) && isset($_POST['savechanges']) && $_POST['savechanges'] == 1 && isset($_SESSION['pageadmin']))** – flash Feb 18 '20 at 20:29
  • At last, I am still unable to get why adding **name="submit"** was deleting values from JSON. – flash Feb 18 '20 at 20:59
  • At this moment, I don't know why there are so many things inside if block as it is not coded by me. – flash Feb 18 '20 at 21:05
  • Oh. it makes sense why this wasn't working then, there is no variable/input in the form with the name: savechanges - which caused the script not to even update - I have no idea why the name="submit" made it work - and it shouldn't have, because you are checking if there is "savechanges" and checking if it is 1, and it doesn't even exist in the form. – Ebrahim Mohammed Feb 18 '20 at 21:35
  • well it makes sense for the current stuff inside the if statement to be there, the first one checks if $_POST array isn't empty, and then the next one check if savechanges exists, and the next one checks if savechanges is equal to one, and the final one probably check if the admin is logged in. – Ebrahim Mohammed Feb 18 '20 at 23:39
  • you can remove: !empty($_POST) && and it should still work – Ebrahim Mohammed Feb 18 '20 at 23:40