CODEWITHSUNDEEP
javascriptjqueryajaxformssubmit
Jay Smoke
Jay Smoke

Reputation: 604

Change ajax form submit value and state onClick

I have an ajax form which am using to process data without refreshing the page. Everything works, except the submit button isn't animated which is a problem if you are using ajax.

I have tried several suggestions from here methods to get it animated but no luck.

My script for the ajax is;

$(document).ready(function() {
        $('#submitform').ajaxForm({
            target: '#error',
            success: function() {
            $('#error').fadeIn('slow');
            }
        });
    });

process.php looks like this;

<?php

if((strlen($_POST['fname']) < 1 )){

    if(strlen($_POST['amount']) < 1 ){
        $emailerror .= '<span>Kindly enter full name</span>';
    }

} else { ?>
<span>Thank You</span>
<?php } ?>

<?php echo $emailerror; ?>

And the form is a simple form; 

<form id="submitform" action="process.php" method="post">
<input type="text" name="fname" placeholder="Full Name" />
<select name="values"><option value="1">Value 1</option></select>
<input type="submit" value="Send" />
</form>

When I click on submit, the form is sent to process.php and after a successful validation, the form is processed and a thank you page is displayed else an error is displayed. What I want to do is, when the user clicks submit, the submit button value should change to 'processing...' and become disabled. If the validation returns an error, the submit button should return to normal state.

Update: When I add a select input to the form, the script below stops working.

Upvotes: 0

Views: 4909

Answers (2)

Juorder Gonzalez
Juorder Gonzalez

Reputation: 1652

The only thing you need is to modify the button itself, try this

$(document).ready(function() {
   var btnSubmit = $('#submitform');
   btnSubmit.ajaxForm({
     target: '#error',
     success: function() {
       $('#error').fadeIn('slow');
       btnSubmit.text("Send form"); // put your normal text
       btnSubmit.removeAttr("disabled");
     },
     error: function() {
       // enable and put the normal text in case of error
       btnSubmit.text("Send form"); // put your normal text
       btnSubmit.removeAttr("disabled");
     },
     beforeSend: function(){
        btnSubmit.text("Proccesing...");
        btnSubmit.attr("disabled", "disabled");
     }
   });
});

EDITED

Sorry for wrong post, I didn't see your HTML tags, so having your HTML, please modify your markup a little bit, just add an ID to your submit button, like this

<form id="submitform" action="process.php" method="post">
<input type="text" name="fname" placeholder="Full Name" />
<input id="submitterButton" type="submit" value="Send" />
</form>

and then you can use in the JS part.

$(document).ready(function() {
   var btnSubmit = $('#submitterButton');
   $('#submitform').ajaxForm({
     target: '#error',
     success: function() {
       $('#error').fadeIn('slow');
     },
     beforeSend: function(){
        btnSubmit.val("Proccesing...");
        btnSubmit.attr("disabled", "disabled");
     },
     complete: function(){
       btnSubmit.val("Send"); // put your normal text
       btnSubmit.removeAttr("disabled");
     }
   });
});

so beforeSend will execute before ajax execute.

Hope it can fix your problem.

Upvotes: 1

Luiz Paulo
Luiz Paulo

Reputation: 421

the snippet below does the trick

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<form id="submitform" action="process.php" method="post">
<input type="text" name="fname" placeholder="Full Name" />
<input type="submit" value="Send" disabled="disabled" />
</form>

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<script type="text/javascript">
	$(document).ready(function () {
		
		$('#submitform').submit(function (event) {
			event.preventDefault();
			$('input[type="submit"]').val('Processing...');
			$('input[type="submit"]').attr('disabled', true); //assuming that you have a CSS to do that.

			$.ajax({
				type: 'POST',
				data: $('submit').serialize(),
				url: $('submit').attr('action')
			}).done(function (result) {
				$('input[type="submit"]').val('Send');
				$('input[type="submit"]').attr('disabled', false); 
			}).fail(function (argument) {
				// handle faillure
			})

		});

	});
</script>

</body>
</html>

Upvotes: 0

Related Questions