提交时Jquery prop值更改将不起作用

Question

$( function() {
    $( "#save-chart-form" ).submit( function( event ) {
        $("#saveChartButton").prop( 'value', 'Please be patient' );
        // event.preventDefault() // works with this
        // $('#save-chart-form').submit(); // Doesn't work
    } );
} );

I run this on a form #save-chart-form when #saveChartButton is clicked. So the text of the button is changed to 'Please be patient' when button is clicked.

This doesn't work at all unless I put a preventDefault event. Is there no way to have any jQuery action performed on form submission? I tried many other solutions that all fail. Also I can't get $('#save-chart-form').submit() do anything, which would be a solution. I'm using jQuery 3.1.1

EDIT: It's a browser issue: it works correctly on Firefox. Safari doesn't process anything after unload request as mentioned by Rory McCrossan.

Answer 1

don't use $('#save-chart-form').submit() . It's redundant.

$(function(){
    $("#save-chart-form" ).submit(function(event){
        $("#saveChartButton").prop('value', 'Please be patient');
    });
});

Answer 2

The issue is because in most browsers the UI will no longer be updated once a request to unload the page is made (ie. the form submission has been made). A workaround would be to change the button text under the click event of the button itself, instead of the submit event of the form . Try this:

$("#saveChartButton").click(function() {
    $(this).prop('value', 'Please be patient');
});

Working example

Note that the change is only visible for a small time before the page is unloaded.

Answer 3

Try to show the text "please be patient" in other HTML element and not the #saveChartButton , because changin the value of a form element that is already submitted can be confusing to the js engine.

eg

$("#save-chart-form").submit(function(event) {
    $("#msgBox").html('Please be patient');
});