How to show Data from Javascript to form Modal HTML

Question

I want to ask my problem hehe: in my case I want to show my data selector from JavaScript to my modal.

From my code, I have done using console.log() to view the data and it works, but it still didn't want to show in my form modal. Please help me where i'm missing it hehe ...

This is my JavaScript

<script> 

          let namaToko = document.getElementById("namaToko").innerHTML;
          let alamatToko = document.getElementById("alamatToko").innerHTML;
          let buttonDetail = document.querySelectorAll('.view-detail');
          buttonDetail.forEach(function(_el)  {
            _el.addEventListener('click', function(e) {
              jQuery('#modalUpdate').modal('show');
              let row = document.querySelector(`[data-row-id="${e.target.dataset.id}"]`);
              let nama = row.querySelector('td:nth-child(2)');
              let alamat = row.querySelector('td:nth-child(3)');
              
              console.log(nama);
              console.log(alamat);
              
              namaToko = nama;
              alamatToko = alamat;

            });
          });

      </script>

This is my form modal and the datatable

<!-- Bagian Edit Form Modal -->
            <div class="modal fade modalUpdate" tabindex="-1" role="dialog" aria-hidden="true" id="modalUpdate">
                <div class="modal-dialog">
                <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="exampleModalLabel">Edit Data Toko</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
              <div class="modal-body">
                <form method = "post" action = "library/services/formAction.php">
                  <input type="hidden" name="pageReferrer" value="http://localhost/city/?page=store" >
                  <input type="hidden" name="actionObject" value="toko" >
                  <input type="hidden" name="actionType" value="update" >
                  <div class="form-group">
                    <label for="namaToko" class="col-form-label">Nama Toko</label>
                    <input type="text" class="form-control" id="namaToko" placeholder="Masukkan Nama Toko" name="namaToko" required>
                  </div>
                  <div class="form-group">
                    <label for="alamatToko" class="col-form-label">Alamat Toko</label>
                    <input type="text" class="form-control" id="alamatToko" placeholder="Masukkan Nama Toko" name="alamatToko" required>
                  </div>
                  <div class="modal-footer">
                <button type="submit" class="btn btn-primary" name="submit">Save</button>
              </div>
                </form>
              </div>
                  </div>
              </div>
            </div>
            <!-- Akhir Edit Bagian Modal -->
            

              <!-- /.card-header -->
              <div class="card-body">
                <table id="example1" class="table table-bordered table-striped">
                  <thead>
                  <tr>
                    <th>No</th>
                    <th>Toko</th>
                    <th>Alamat</th>
                    <th>Status</th>
                    <th>Opsi</th>
                  </tr>
                  </thead>
                  <tbody>
                  <?php
                    $n=1;
                    $toko = getDataToko();
                    while ($dataToko = mysqli_fetch_array($toko)) {
                      if($dataToko['status_ot']==1)
                      {
                        $status = "Aktif";
                        $idStatus = "1"; 
                      }
                      if($dataToko['status_ot']==2)
                      {
                        $status = "Tidak Aktif";
                        $idStatus = "2"; 
                      }
                    
                  ?>
                  <tr data-row-id="<?= $dataToko['id_ot'] ?>">
                    <td>
                    <?php echo $n++; ?>
                    </td>
                    <td>
                    <?php echo $dataToko['nama_ot'] ?>
                    </td>
                    <td>
                    <?php echo $dataToko['alamat_ot'] ?>
                    </td>
                    <td>
                    <?php echo $status ?>
                    </td>
                    <td>
                    <button type ="button" class ="view-detail btn btn-success" data-id="<?= $dataToko['id_ot'] ?>"> Edit </button>
                    <button type = "button" class = "btn btn-danger deletebtn"> Delete </button>
                    </td>
                  </tr>
                  <?php
                  }
                  ?>   
                  </tbody>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>

And this is the picture where i'm click the Edit Button, and the data was showing in the console but didn't show up in my modal form:

let namaToko = document.getElementById("namaToko"); let alamatToko = document.getElementById("alamatToko"); namaToko.value = nama.innerText; alamatToko.value = alamat.innerText; — navnath
– navnath, Commented Sep 24, 2021 at 8:36
Hey @RidhoWisnu if this or any answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. — navnath
– navnath, Commented Sep 24, 2021 at 9:16

mark_b · Accepted Answer · 2021-09-24 08:53:29Z

1

If you give your form a name you can then set its input values using their name.

<form name="myForm" method = "post" action = "library/services/formAction.php">

const myForm = document.forms.myForm;
myForm.elements.namaToko.value = namaToko;
myForm.elements.alamatToko.value = alamatToko;

answered Sep 24, 2021 at 8:53

mark_b

1,49312 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

navnath · Accepted Answer · 2021-09-24 09:11:57Z

1

To set value

jQuery("#modalUpdate #namaToko").val(nama.innerText);
jQuery("#modalUpdate #alamatToko").val(alamat.innerText);

answered Sep 24, 2021 at 9:11

navnath

3,7241 gold badge13 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to show Data from Javascript to form Modal HTML

This is my JavaScript

This is my form modal and the datatable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

This is my JavaScript

This is my form modal and the datatable

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related