How to display saved data in table after refreshing the page

Viewed 191

I'm at beginner level at Coding and got stuck at one place where I'm not able to display the content of saved data into text area once clicked on Submit button.

Please check below code for more details

$(".submitbtn").on("click", function() {
 
  var textarea_value = $(this).closest("tr").find("textarea").val();
  var select_value = $(this).closest("tr").find("select").val();
  if((textarea_value != '') && (select_value != 'completed')){
    $(this).closest("tr").find("td:eq(2)").text(textarea_value);

  }
  else{
    $(this).closest("tr").hide();
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<h1>Student Assignment Report</h1>

<div>
    <table class='table' id='table'>
        <thead>
        <th>Student Name</th>
        <th>Assignment</th>
        <th>Reason by teacher</th>
        <th>Set Status</th>
        <th>Submit</th>
        </thead>
        <tbody>
        <tr>
            <td class="StuName">Lokesh</td>
            <td class="Assignment">Ajax Assignment</td>
            <td>
                <textarea class="teachercomment" id="teachercomment" name="Reason by teacher" rows="3" cols="15" placeholder="Please describe"></textarea>
            </td>
            <td>
                <select name="set_status" class="statusclass">
                    <option disabled selected value>Select Status</option>
                    <option value="completed">Completed</option>
                    <option value="pending">Pending</option>
                </select>
            </td>
            <td>
                <button type="button" class="btn btn-primary submitbtn">Submit</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

I've shared logic of jquery as well where I got stuck. Here once I enter the content in textarea field ('Reason by teacher') having 'setStatus' dropdown selected as 'Completed' and click on Submit button then entire row should be disappear though data should get saved. However row is getting disappeared but once I refresh the page, it appears once again.

Along with this, if 'setStatus' dropdown is set as 'Pending' then data should be visible till the time 'setStatus' is not selected as 'Completed' and 'Submit' button is clicked. But when I saved the data having status as 'Pending', it is getting appeared under required column i.e. 'Reason by teacher'. But once I refresh the page, it disappears. Please let me know how to move ahead with this.

Please be noted that textarea should be editable till the time setStatus is selected as Pending.

Thanks in Advance..!!

0 Answers
Related