Jquery onclick event firing once

Question

I want to submit the form in the bootstrap modal using the send button and get the response back onto the modal, then if the user clicks refresh, it should return the modal to the previous state, now that is working but the problem is that the SEND button doesn't fires again after returning to the previous state...

Here is the code

    <!-- the code that represents the modal dialog -->


  <button data-toggle="modal" data-target="#one_time_sms">LAUNCH SMS MODAL</button>

<div class="modal fade" id="one_time_sms" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" align="left">
<br><br>
    <div class="modal-dialog"  role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Send SMS</h4>
            </div>
                <div class="modal-body">
                <b>Available Unit for SMS</b> (converted from your credit) - <span style="background:green; color:white; border-radius:3px; padding:3px;">85.2</span><br><br>

                    <form id="contact_form" action="http://localhost/..." method="POST">



                      <label>Type phone no(s) below  </label><br>
                      <textarea style="width: 100%; height: 100px;" name="phone_nos" placeholder="your phone nos here, separate with commas if more than one" required></textarea>
                      <br><br>

                      <label>Type your message below</label><br>
                      <textarea style="width: 100%; height: 120px;" name="message" placeholder="your message here" required></textarea>

                      <br><br>

                      <input type="hidden" name="group_id" value="">

                      <div class="row">

                            <div class="col-sm-3"><label>Sender's Identity</label></div>
                            <div class="col-sm-9">

                            <input name="sender_id" type="text" maxlength="11" placeholder="your Sender id here" value="" required>

                            </div>

                      </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="submitForm" class="btn btn-default">Send</button>
                    <button type="button" id="refreshForm" class="btn btn-default">Refresh Form</button>
                </div>
            </div>
        </div>
    </div>




<script>

var initial_dialog_html =  document.getElementById('one_time_sms').innerHTML;


    $(document).ready(function () {
        $("#contact_form").on("submit", function(e) {
          $("#submitForm").remove();
            $('#one_time_sms .modal-header .modal-title').html("Message Sending Processing");
             $('#one_time_sms .modal-body').html('<br><center>Please wait, we are processing your request....</center></br>');
            var postData = $(this).serializeArray();
            var formURL = $(this).attr("action");
            $.ajax({
                url: formURL,
                type: "POST",
                data: postData,
                success: function(data, textStatus, jqXHR) {
                    $('#one_time_sms .modal-header .modal-title').html("Message Status");
                    $('#one_time_sms .modal-body').html(data);

                },
                error: function(jqXHR, status, error) {
                    console.log(status + ": " + error);
                }
            });
            e.preventDefault();
        });

        $("#submitForm").on('click', function () {
            $("#contact_form").submit();
        });


        $("#refreshForm").on('click', function () {
            console.log(initial_dialog_html);
            $('#one_time_sms').html(initial_dialog_html);
            //location.reload();
        });


    });

</script>                          

Answer 1

I guess this is happening because your HTML is getting revised once you submit the form. In ajax post's success handler you have following line:

$('#one_time_sms .modal-body').html(data); 

which is removing all previously created DOM element and creating new ones. So event listener bounded previously will not work. Hence your code within $("#submitForm").on('click', function() { and $("#refreshForm").on('click', function() { won't work next time. So to avoid it; you need to go with event delegation technique like below:

    $(document).on('click',"#submitForm", function() {
      $("#contact_form").submit();
    });

    $(document).on('click',"#refreshForm", function() {
      console.log(initial_dialog_html);
      $('#one_time_sms').html(initial_dialog_html);
      //location.reload();
    });

Modify the submit handler as well like below:

$(document).on("submit","#contact_form", function(e) {
    e.preventDefault(); //avoid submitting the form the usual way
    //your existing code
    $("#submitForm").remove();

Answer 2

If you want to stay on same page and 'avoid' any reloading or dismissing of existing modal than remove your "submit" implementation at first place.

I suggest to use "button" click event binding instead of triggering "submit" events and using 'action' url as you are anyway using ajax communication.

So, what's next?

1. Remove following, as I don't find it adding any benefits to you.

     $("#submitForm").on('click', function () { $("#contact_form").submit(); }); 

2. Add this, this will not dismiss your existing opened modal because it's not a form submit and you have not used data-dismiss="modal" so good to stay on same modal.

     $("#submitForm").on("click", function(e) { $("#submitForm").remove(); $('#one_time_sms .modal-header .modal-title').html("Message Sending Processing"); $('#one_time_sms .modal-body').html('<br><center>Please wait, we are processing your request....</center></br>'); var postData = $(this).serializeArray(); $.ajax({ url: 'your_url', type: "POST", data: postData, success: function(data, textStatus, jqXHR) { $('#one_time_sms .modal-header .modal-title').html("Message Status"); $('#one_time_sms .modal-body').html(data); }, error: function(jqXHR, status, error) { console.log(status + ": " + error); } }); e.preventDefault(); });