How do I retrieve a value from local storage and set it in an HTML input field?

I am building a prescription maker. But I am facing a problem. I want to show to localstorage data in the select box. But I can’t. So I need help. Actually i just need a function that detects my row index of table and print the data according to the index in the input field. Thanks in advance

function editpres(){   
    var aha = JSON.parse(localStorage.getItem('books'));
    
    
    document.getElementById('name').value = aha[0].name;
    document.getElementById('age').value =aha[0].age;
    document.getElementById('sex').value = aha[0].sex;
    document.getElementById('date').value = aha[0].date;
    document.getElementById('disease').value = aha[0].disease;
    document.getElementById('dignosis').value = aha[0].dignosis;
    
    }
    
    <html>
    <div>      
        <table class="table table-success table-striped ">
        <thead>
          <tr>
            <th>Patient Name</th>
            <th>Age</th>
            <th>Sex</th>
            <th>Date</th>
            <th>Disease</th>
            <th>Dignosis</th>
            <th>Medicine</th>
            <th>Test</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="book-list"></tbody>
      </table>
    </div>
    </html>

<form class="row g-3" id="book-form">
  <div class="col-md-5" >
     <input type="text" id="name" class="form-control" required  placeholder="Give The Patient Name" style="margin-left: 30px; margin-top: 10px;"/>
</div>
<div class="col-md-6">
     <input type="number" id="age" class="form-control " required  placeholder="Give The Patient Age" style="margin-left: 30px; margin-top: 10px;"/>
</div>
<div class="col-md-5">
     <input type="text" id="sex" class="form-control " required  placeholder="Give The patient sex" style="margin-left: 30px;"/>
</div>
<div class="col-md-6">
     <input type="date" id="date" class="form-control " required  placeholder="Give The Vist Date" style="margin-left: 30px;"/>
</div>
<div class="col-md-11">
     <input type="text" id="disease" class="form-control" required placeholder="Give The Cheif Complain" style="margin-left: 30px;"/>
</div>
<div>
    <input type="button" value="Submit Patient Info" onclick="fillForm();" class="btn btn-success" id="butt" style="margin-left: 30px;"/>
</div>
<div class="col-md-11">
    <input type="text" id="dignosis" class="form-control" required placeholder="Give The Dignosis *Submit one at a time" style="margin-left: 30px;"/> 
</div>
<div>
     <input type="button" value="Submit Dignosis" onclick="newDigno();" class="btn btn-success" id="butt" style="margin-left: 30px;"/>
</div>
<div>
<div class="col-md-11">
 <input type="text" id="Medicine" class="form-control" placeholder="Give The Meidicne" style="margin-left: 30px;"/>
</div>
</div>
    <div>
      <div class="col-md-11">
      <select class="form-select" aria-label="Default select example" id="time" style="margin-left: 30px;">
        <option selected>Choose...</option>       
        <option value="">  রাতে খাবার আগে</option>
        <option value="">  রাতে খাবার পরে</option>
        <option value="">  দুপুরে খাবার আগে</option>
        <option value="">  দুপুরে খাবার পরে</option>
        <option value="">  সকালে খাবার আগে</option>
        <option value="">  সকালে খাবার পরে</option>
        <option value="">  তিন বেলা খাবার আগে</option>
        <option value="">  তিন বেলা খাবার পরে</option>
      </select>
    </div>
    </div>
  <div>
    <div class="col-md-11">
        <select class="form-select" aria-label="Default select example" id="duration" style="margin-left: 30px;">
          <option value="">  ১ দিন</option>
          <option value="">  ৩ দিন</option>
          <option value="">  ৫ দিন</option>
          <option value="">  ৭ দিন</option>
          <option value="">  ১৪ দিন</option>
          <option value="">  ১৫ দিন</option>
          <option value="">  ১ মাস</option>
          <option value="">  ২ মাস</option>
          <option value="">  চলবে</option>
        </select>
      </div>
    </div>

You have two problems here:

  1. Retrieving the data.
  2. Displaying the date.

Have you confirmed that you are retrieving the data OK?

Have you confirmed that you can display dummy data?

Break problems into smaller problems, until they are easy to understand.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.