javascript - onclick listener working only in particular order? -
i have dynamically created table https://imgur.com/a/ndkvx on click of tick mark modal opens https://imgur.com/a/0ri1w on click of accept values must inserted database happens if in order top bottom i.e 1st person next..if start random point click accept button of 4th person in starting null values inserted..please me?
<!-- html code tick button , accept --> <td> <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#{{pl.id}}_1"><i class="fa fa-check" aria-hidden="true" style="color:green"></i></button> <!-- modal --> <div class="modal fade" id= "{{pl.id}}_1" role="dialog"> <div class="modal-dialog"> <!-- modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">do want accept <b>{pl.employee.emp_name|title }} </b> leave?</h4> </div> <form action={% url 'm_manage:accept' %} method="post"> {% csrf_token %} <div class="modal-body"> <p><input type="checkbox" name="email" id="email" > notify via email<br></p> <p><label for="message">message </label> <textarea rows="3" name="message" id="message" class="form-control input-md"></textarea></p> </div> <div class="modal-footer" id="{{pl.id}}"> <button type="button" class="btn btn-success" id="accept_{{pl.id}}" data-dismiss="modal">accept</button> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div> </form> </div> </div> </div> </td> <!--my jquery call----> $(document).on('click','[id^="accept_"]', function(e){ e.preventdefault(); var v_id=$(this).closest('div').attr('id'); // tried msg var msg=$('#message').val(); // tried getelementbyid // var msg_1=document.getelementbyid("message").value; var check=$('#email').is(':checked'); console.log(msg); // console.log(msg_1); console.log(check); console.log(v_id);
identifier in html must unique, duplicate identifiers creates invalid html.
you can use class selector target elements , dom traversal method target desired elements.
additionally use data-* custom attribute store arbitrary data can fetched using .data() method.
modify html as
<!-- modal --> <div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}"> <div class="modal-dialog"> <!-- modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">do want accept <b>{pl.employee.emp_name|title }} </b> leave?</h4> </div> <form action={% url 'm_manage:accept' %} method="post"> {% csrf_token %} <div class="modal-body"> <p><input type="checkbox" name="email" class="email" > notify via email<br></p> <p><label for="message">message </label> <textarea rows="3" name="message" class="message" class="form-control input-md"></textarea></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-success accept" data-dismiss="modal">accept</button> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div> </form> </div> </div> </div> script
$(document).on('click', '.accept', function (e) { e.preventdefault(); var modal = $(this).closest('.modal'); var v_id = modal.data('id'); var msg = modal.find('.message').val(); var check = modal.find('.email').is(':checked'); console.log(v_id, msg, check); }); 
Comments
Post a Comment