We Do Laravel

Data into bootstrap modal from table row using javascript

 

<table id="example" class="table table-striped table-bordered nowrap">

  <thead>

    <tr>

      <th>ACTIONS</th>

      <th>HQ</th>

      <th>STOCKIEST</th>

      <th>CHEMIST</th>

      <th>INVOICE NUMBER</th>

      <th>INVOICE AMOUNT</th>

      <th>INVOICE DATE</th>

      <th>INVOICE IMAGE</th>

      <th>CHEQUE AMOUNT</th>

      <th>CHEQUE IN FAVOUR OF</th>

      <th>CHEQUE NUMBER</th>

      <th>CHEQUE DATE</th>

      <th>BANK'S NAME</th>

      <th>COURIER NAME</th>

      <th>STATUS</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td class="text-center">

        <button class="btn btn-icon btn-primary btn-xs zz-modal" data-toggle="modal" data-target="#con-close-modal" >Close</button>

      </td>

      <td>Hyderabad</td>

      <td>Balaji Pharmacon</td>

      <td>Sanjeevan Medical</td>

      <td>368</td>

      <td class="invoice-amt">Rs.21,239</td>

      <td>22-10-2017</td>

      <td>INV-368</td>

      <td class="cheque-amt">Rs.2124</td>

      <td>Santhosh Kudalkar</td>

      <td>531034</td>

      <td>22-11-2017</td>

      <td>IDBI</td>

      <td>DTDC</td>

      <td>Approved</td>

    </tr>

    <tr>

      <td class="text-center">

        <button class="btn btn-icon btn-primary btn-xs zz-modal" data-toggle="modal" data-target="#con-close-modal" >Close</button>

      </td>

      <td>Hyderabad</td>

      <td>Balaji Pharmacon</td>

      <td>Sanjeevan Medical</td>

      <td>743</td>

      <td class="invoice-amt">Rs.21,245</td>

      <td>21-10-2017</td>

      <td>INV-743</td>

      <td class="cheque-amt">Rs.2125</td>

      <td>Santhosh Kudalkar</td>

      <td>531035</td>

      <td>22-11-2017</td>

      <td>IDBI</td>

      <td>DTDC</td>

      <td>Approved</td>

    </tr>

  </tbody>

  <div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

      <div class="modal-content">

        <div class="modal-header">

          <h4 class="modal-title">Cheque Confirmation</h4>

        </div>

        <div class="modal-body">

          <div class="form-group row">

            <label class="col-sm-4 control-label">Invoice Amount</label>

            <div class="col-sm-8">

              <input type="text" class="form-control input-sm invoice-amt" Placeholder="Enter Invoice Amount" onkeypress="return isNumber(event)">

            </div>

          </div>

          <div class="form-group row">

            <label class="col-sm-4 control-label">Cheque Amount</label>

            <div class="col-sm-8">

              <input type="text" class="form-control input-sm cheque-amt" Placeholder="Enter Cheque Amount" onkeypress="return isNumber(event)">

            </div>

          </div>

          <div class="form-group row">

            <label class="col-sm-4 control-label">Cheque Number</label>

            <div class="col-sm-8">

              <input type="text" class="form-control input-sm" Placeholder="Enter Cheque Number" onkeypress="return isNumber(event)">

            </div>

          </div>

          <div class="form-group row">

            <label class="col-sm-4 control-label">Name of the Bank</label>

            <div class="col-sm-8">

              <input type="text" class="form-control input-sm" value="IDBI">

            </div>

          </div>

          <div class="form-group row">

            <label class="col-sm-4 control-label">Name of the Courier</label>

            <div class="col-sm-8">

              <input type="text" class="form-control input-sm" value="DTDC">

            </div>

          </div>

          <div class="form-group row">

            <label class="col-sm-4 control-label">Cheque Date</label>

            <div class="col-sm-8">

              <input type="text" class="form-control input-sm" placeholder="mm/dd/yyyy" value="11/23/2017" id="datepicker">

            </div>

          </div>

        </div>

        <div class="modal-footer">

          <button type="button" class="btn btn-info waves-effect waves-light">Confirm and Approve</button>

          <button type="button" class="btn btn-primary waves-effect waves-light">Close</button>

        </div>

      </div>

    </div>

$(document).ready(function() {

  //$(".zz-modal").click(function() {

  //  $("#con-close-modal").modal('show');

  //});

  

  $('#con-close-modal').on('show.bs.modal', function (e) {

  // console.log(e);

    // console.log(e.relatedTarget);

    

  var _button = $(e.relatedTarget); // Button that triggered the modal

    

    // console.log(_button, _button.parents("tr"));

    var _row = _button.parents("tr");

    var _invoiceAmt = _row.find(".invoice-amt").text();

    var _chequeAmt = _row.find(".cheque-amt").text();

    // console.log(_invoiceAmt, _chequeAmt);

    

    $(this).find(".invoice-amt").val(_invoiceAmt);

    $(this).find(".cheque-amt").val(_chequeAmt);

  });

  

});