jquery: how to change text on button when click and when is clicked

Question

i have this button who send a form via ajax (without change page)

<button name="btn_invio" id="btn_invio-<?=$id_hotel?>" type="submit" class="btn btn-success btn-sm shadow-none" style="margin-top:5px; margin-left:5px; margin-right:5px; width:100%;">Send</button>

Now i change the text when user click on the button so the button change from "send" to "sending..."

$("#btn_invio-<?=$id_hotel?>").click(function(){
$('#btn_invio-<?=$id_hotel?>').html('Sending...');
});

This is working

Now i want to show again the word "send" (for send another message) after the form is sent

How i can do it? Thank you

Answer 1

You should use a submit event for your form. Then $.ajax . Something like:

$("#yourForm").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var actionUrl = form.attr('action');

    $('#btn_invio-<?=$id_hotel?>').html('Sending...');
    
    $.ajax({
        type: "POST",
        url: actionUrl,
        data: form.serialize(), // serializes the form's elements.
        success: function(data)
        {
          $('#btn_invio-<?=$id_hotel?>').html('Send');

        }
    });
    
});