Load a form by click on html table data - Javascript Advance
softetechnologies
26-08-2020    212 times
Load form click html table data

Load a form by click on html table data using Java Script and JQuery

Click on a html table row and read all the data from that row and put it in a corresponding field in an existing html form. Here we use bootstrap 4.5 for design the page and Java Script and JQuery.

<!DOCTYPE html>
<html>
 <head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap.css">
 </head>
 <body>
   <main>
     <div class="container-fluid">
        <div class="row">
          <div class="col-md-6">
             <table class="table">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Phone No</th>
                    <th>EMail</th>
                  </tr>
                </thead>
                <tbody>
                 <tr>
                    <td>Kanchan kumari</td>
                    <td>Ballygunge Kolkata</td>
                    <td>9865955550</td>
                    <td>kanchankumari@gmail.com</td>
                  </tr>
                  <tr>
                    <td>Rachna singh</td>
                    <td>Ballygunge Kolkata</td>
                    <td>9862222998</td>
                    <td>rachna34@gamil.com</td>
                  </tr>
                  <tr>
                    <td>Priya Pandey</td>
                    <td>Varanashi U.P</td>
                    <td>9865234550</td>
                    <td>varanashi@gmail.com</td>
                  </tr>
                  <tr>
                    <td>Kanchan kumari</td>
                    <td>Varanashi U.P</td>
                    <td>9865955550</td>
                    <td>varanashi2@gmail.com</td>
                  </tr>
               </tbody>
             </table>
           </div> 
           <div class="col-md-6">
             <form>
               <div class="form-group">
                 <label for="sname">NAME</label>
                 <input type="text" class="form-control" id="sname" placeholder="name">
               </div> 
                <div class="form-group">
                 <label for="sadd">ADDRESS</label>
                 <select class="form-control" id="sadd">
                  <option value="Ballygunge Kolkata">Ballygunge Kolkata</option>
                  <option value="Damdam Kolkata">Damdam Kolkata</option>
                  <option value="Varanashi U.P">Varanashi U.P</option>
                  <option value="Varanashi U.P">Varanashi U.P</option> 
                 </select>
               </div> 
               <div class="form-group">
                 <label for="cno">PHONE NO</label>
                 <input type="number" class="form-control" id="cno"
               </div> 
               <div class="form-group">
                 <label for="cemail">E-MAIL ID</label>
                 <input type="text" class="form-control" id="cemail">
                </div>
                <button type="button" id="mybtn" class="btn btn-primary">Add</button>
             </form>
           </div> 
         </div>
       </div>
     </section>
   </main>
   <script src="jquery.js"></script>
   <script src="popper.min.js"></script>
   <script src="bootstrap.js"></script>
   <script>
       $(".myTable").click(function(){
            var tableData = $(this).children("td").map(function(){return $(this).text();}).get();
            var a=tableData.toString().split(",");
            $("#sname").val(a[0])
            $('#sadd option:contains("' + a[1] + '")').attr('selected','selected');
            $("#cno").val(a[2])
            $("#cemail").val(a[3])
      });
    </script>
  </body>
</html>
Private Teacher
softetechnologies
softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post