How to set Modal Value with ajax

Question

This is my script to call the data

<script>
$(document).ready(function() {
    $('.tmpsurat').click(function() {
      var id=$(this).data('id');
      var url ='{{URL('/cekSuratKelengkapan')}}/'+id;
      $.ajax({
        type : 'get',
        url  : url,
        dataType  : 'JSON',
        success:function(data){
          $('#surat').on('show.bs.modal', function (event) {
            console.log(data);
              modal.find("#id").val(data[0].a);
            });
        }
      });
    });
});</script>

<a class='tmpsurat' data-id='$val->idKelengkapan' data-toggle='modal' data-target='#surat'> <i class='fa fa-check' style=color:#28a745;></i></a>

    <div class="modal fade" id="surat" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content ">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Ceklist Surat</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="ill do it later" method="post" >
                        <input type="hidden" name="_token" value="{{csrf_token()}}">
                        <div class="form-group">
                            <label for="nama">Nama Reseller</label>
                            <input type="text" class="form-control" name="inputnama" placeholder="Masukan Nama Reseller" id="username">
                        </div>
                        <div class="form-group">
                            <label for="nama">Modal</label>
                            <input type="text" class="form-control" name="id" id="id">
                            <input type="text" class="form-control" name="id2" id="id2">
                            <input type="text" class="form-control" name="id3" id="id3">
                            <input type="text" class="form-control" name="id4" id="id4">
                            <input type="text" class="form-control" name="id5" id="id5">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-danger" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-outline-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

When I click the button the modal shows up but the value of #id would not show the value of the data that I get from the URL. I checked with the console log and the data are there, below are the result from the console log.

What I want is to assign each id - id 5 with idJenisSurat which I get from the URL.

[![screenshot console][1]][1]

Answer 1

You can use .each loop to iterate through your json and then use .val(v.idJenisSurat) to assign value inside inputs.

Demo Code :

 $(document).ready(function() { $('.tmpsurat').click(function() { var id = $(this).data('id'); /**var url = '{{URL(' / cekSuratKelengkapan ')}}/' + id; $.ajax({ type: 'get', url: url, dataType: 'JSON', success: function(data) {*/ //suppose this is return from ajax var data = [{ "a": 1, "status": 1, "idJenisSurat": 1 }, { "a": 5, "status": 1, "idJenisSurat": 5 }, { "a": 2, "status": 1, "idJenisSurat": 2 }, { "a": 3, "status": 1, "idJenisSurat": 3 }, { "a": 4, "status": 1, "idJenisSurat": 4 } ] //loop through jsons.. $(data).each(function(i, v) { i++; $(`#id${i}`).val(v.idJenisSurat);//assign value }) /* } });*/ }); });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <a class='tmpsurat' data-id='$val->idKelengkapan' data-toggle='modal' data-target='#surat'> <i class='fa fa-check' style=color:#28a745;>Click</i></a> <div class="modal fade" id="surat" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content "> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Ceklist Surat</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form action="ill do it later" method="post"> <input type="hidden" name="_token" value="{{csrf_token()}}"> <div class="form-group"> <label for="nama">Nama Reseller</label> <input type="text" class="form-control" name="inputnama" placeholder="Masukan Nama Reseller" id="username"> </div> <div class="form-group"> <label for="nama">Modal</label> <input type="text" class="form-control" name="id1" id="id1"> <input type="text" class="form-control" name="id2" id="id2"> <input type="text" class="form-control" name="id3" id="id3"> <input type="text" class="form-control" name="id4" id="id4"> <input type="text" class="form-control" name="id5" id="id5"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-danger" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-outline-primary">Submit</button> </div> </form> </div> </div> </div>

Answer 2

Try changing this:

modal.find("#id").val(data[0].a);

To this:

$("#id").val(data[0].a);