Pass several data to modal

Question

Pass several data to modal

Navigation

#1 by (2 votes)

0

I am trying to send several variables to a modal but the question is that it only sends me 2 out of 5 variables (variable 1 and 5). Could someone throw a cable? Thank you very much

With this I call the modal

<a data-toggle="modal" data-id="<?php echo $id;?>" data-id2="<?php echo $row['contract_date'];?>" data-id3="<?php echo $amount; ?>" data-id4="<?php echo $percent; ?>" data-id5="<?php echo $fecha_pago; ?>" data-toggle="modal" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">Edit</a>

The modal that I have:

<div class="modal fade" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#333">
                    <form name="form2" role="form" method="post" enctype="multipart/form-data">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 id="myModalLabel">Edit Comission</h4>
                </div>
                <div class="modal-body" style="background-color:#111">
                    <div class="control-group">
                        <input type="text" name="idcom" class="form-control" id="comisionId" value=""/>
                    </div>
                    <div class="control-group">
                        <label>Date of contract:</label>
                        <input type="text" class="form-control" id="comisionId2" name="date" required>
                        </div>
                    <div class="control-group">
                        <label>Amount paid:</label>
                        <input type="text" class="form-control" id="comisionId3" name="total" required>
                        </div>
                    <div class="control-group">
                        <label>%:</label>
                        <input type="text" class="form-control" id="comisionId4" name="percent" required>
                        </div>
                    <div class="control-group">
                        <label>Commision payment date:</label>
                        <input type="text" class="form-control" id="comisionId5" name="datecom">
                        </div>

                </div>
                <div class="modal-footer" style="background-color:#111">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button name="update" class="btn btn-primary">Save changes</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

And the Java code

<script>
$(document).on("click", ".open-AddBookDialog", function () {
     var mycomisionId = $(this).data('id');
     var mycomisionId2 = $(this).data('id2');
     var mycomisionId2 = $(this).data('id3');
     var mycomisionId2 = $(this).data('id4');
     var mycomisionId2 = $(this).data('id5');
     $(".modal-body #comisionId").val( mycomisionId );
     $(".modal-body #comisionId2").val( mycomisionId2);
     $(".modal-body #comisionId3").val( mycomisionId3);
     $(".modal-body #comisionId4").val( mycomisionId4);
     $(".modal-body #comisionId5").val( mycomisionId5);
    $('#addBookDialog').modal('show');
});
</script>

javascript jquery html modal

asked by Vieira 17.08.2017 в 11:08

source

1 answer

show 9 items each How to add a formatter to a bootstrap-table and Angular 4?

score 2 · Answer 1

In the js code you have used the same variable for almost all:

<script>
$(document).on("click", ".open-AddBookDialog", function () {
     var mycomisionId = $(this).data('id');
     var mycomisionId2 = $(this).data('id2'); //<-- Aquí está definida mycomisionId2
     var mycomisionId3 = $(this).data('id3'); //<-- Aquí está definida mycomisionId2
     var mycomisionId4 = $(this).data('id4'); //<-- Aquí está definida mycomisionId2
     var mycomisionId5 = $(this).data('id5'); //<-- Aquí está definida mycomisionId2
     $(".modal-body #comisionId").val( mycomisionId );
     $(".modal-body #comisionId2").val( mycomisionId2);
     $(".modal-body #comisionId3").val( mycomisionId3);
     $(".modal-body #comisionId4").val( mycomisionId4);
     $(".modal-body #comisionId5").val( mycomisionId5);
    $('#addBookDialog').modal('show');
});
</script>

Try fixing the code.