asked on

How can I change text on submit and on function completion?

I have a form that includes a file upload that I'm submitting with Ajax. When the submit button is pressed, I want to change the text of the button to "Please wait" and disable it. Whether the form is successfully submitted or not, change the text back to "submit" and re-enable it once the function completes. This is not working. I've Googled up several suggested methods and haven't managed to get any of them to work, but I may be placing them incorrectly. Can you see where I'm going wrong? Thanks!

the jQuery in the .js file:

$(document).ready(function() {
	
	// submitting the video form
  $("#video-form").submit(function(e){	 
		 
		e.preventDefault();
		 		 
    var formData = new FormData($(this)[0]);
		 
		$.ajax({
			type: "POST",
			url: "ajax-video-submit.cfm",
			
			beforeSend: function (){
      	$("#submitVideo").val("Please wait...").attr("disabled", "disabled");
      },
			
			data: formData,
      async: false,
      cache: false,
      contentType: false,
      enctype: 'multipart/form-data',
      processData: false,
      
			success: function (response) {
      	$('#video-alert').html(response);
      },
			
			complete: function () {
       
      	$("#submitVideo").val("Submit").removeAttr("disabled");
      }
			

		});
	});
});

Open in new window

the button code:

<input type="submit" name="submitVideo" id="submitVideo" value="Submit" class="btn btn-primary btn-xl mt-2">

Open in new window

lenamtl

Hi, you need the loading button state and text

loadingButton = function(button, loadingText) {
    oldText = button.text();
    button.attr("rel",oldText)
          .text(loadingText)
          .addClass("disabled")
          .attr('disabled', "disabled");
};

Open in new window

removeLoadingButton = function (button) {
    var oldText = button.attr('rel');
    button.text(oldText)
        .removeClass("disabled")
        .removeAttr("disabled")
        .removeAttr("rel");
};

Open in new window

in your ajax depending of the case

loadingButton(btn, please_wait);

removeLoadingButton(btn);

Open in new window

Chris Stanyon

There's nothing wrong with the code you've posted. I've tested it and it all works as it should. You say it's not working but haven't really said how it's not working. Check your browser console for any errors and maybe let us know exactly what's not working. Also, which browser are you using ?

SiobhanElara

ASKER

By "not working" I mean the text isn't changing -- it always says "Submit" -- and no errors show in the console. I generally use the latest build of Chrome, but it's not working for me in Edge either.

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

use the following code, itshould help :

$(document).ready(function() {

    // submitting the video form
    $("#video-form").submit(function(e){

        e.preventDefault();

        var formData = new FormData($(this)[0]);

        $.ajax({
            type: "POST",
            url: "ajax-video-submit.cfm",

            beforeSend: function (){
                $("#submitVideo").val("Please wait...").attr("disabled", "disabled");
                alert("check the button now");
            },

            data: formData,
            async: false,
            cache: false,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,

            success: function (response) {
                $('#video-alert').html(response);
            },

            complete: function () {
                $("#submitVideo").val("Submit").removeAttr("disabled");
                alert("check the button again");
            }


        });
    });
});

Open in new window

SiobhanElara

ASKER

I tested my code by taking out the parts that weren't in Chris's fiddle and it worked, then I put them back in one by one and... it eventually worked. With no changes to the original code. i don't understand, but it's working now... thanks!