Django , open modal form with value , using javascript

Question

I'm new at django and javascript , I try to open modal with value of rowid , I could pass value at last but can't open form with it here my code downbelow ;

inside HTML:

<thead>
      {% for customer in object_list %}
      <tr>
        <td>{{ customer.id }}</td>
        <td>{{ customer.name }}</td>
        <td>{{ customer.surname }}</td>
        <td>{{ customer.gender }}</td>
        <td>{{ customer.email }}</td>
        <td>{{ customer.phone }}</td>
        <td>{{ customer.bloodtype }}</td>
        <td><a href=# data-target="#my_modal" data-toggle="modal" class="identifyingClass" data-id="{{ customer.id }}">Open Modal</a> </td>
      </tr>
      {% endfor %}
    </thead>

My Modal

<h2>Modal</h2>
<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="my_modalLabel">
<div class="modal-dialog" role="dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
        </div>
        <div class="modal-body">

          <form method="post">
            {% csrf_token %}
              {{ form.as_p }}
              <input type="submit" value="Update">
          </form>

            <input type="hidden" name="hiddenValue" id="hiddenValue" value="{{ customer.id }} />
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary">Yes</button>
        </div>
    </div>
</div>

Javascript

<script type="text/javascript">
$(function () {
 $(".identifyingClass").click(function () {
     var my_id_value = $(this).data('id');
     $(".modal-body #hiddenValue").val(my_id_value);
 })
});
</script>

Answer 1

Just to show modal this code works. Also added function for button "No", closing modal form. Do you need help on other stuff?

 $(function () { $(".identifyingClass").click(function () { $('.main-modal').show(); var my_id_value = $(this).data('id'); $(".modal-body #hiddenValue").val(my_id_value); }) }); $(function () { $("#close-modal").click(function () { $('.main-modal').hide(); }) }); 

 .main-modal{ display:none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <thead> <tr> <td>1</td> <td>a</td> <td>as</td> <td>male</td> <td>email@asdasd.com</td> <td>asdasd</td> <td>A</td> <td><a href=# data-target="#my_modal" data-toggle="modal" class="identifyingClass" data-id="1">Open Modal</a> </td> </tr> </thead> <div class="main-modal"> <h2>Modal</h2> <div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="my_modalLabel"> <div class="modal-dialog" role="dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal Title</h4> </div> <div class="modal-body"> <form method="post"> {% csrf_token %} {{ form.as_p }} <input type="submit" value="Update"> </form> <input type="hidden" name="hiddenValue" id="hiddenValue" value="{{ customer.id }} /> </div> <div class="modal-footer"> <button id="close-modal" type="button" class="btn btn-default" data-dismiss="modal">No</button> <button type="button" class="btn btn-primary">Yes</button> </div> </div> </div> </div>