Disable Button Ketika Submit Form

Snippets - 13 Aug 2018

Ketika user men-submit isian sebuah form, ada baiknya tombol submit tersebut di-disable guna menghindari banyaknya submit button yang dilakukan secara berulang. Ini juga dapat mencegah duplikatnya isian form yang di submit oleh user.

Berikut kode yang dapat Anda gunakan untuk men-disable button ketika submit form :

<html>
<head>
	<title>Disable Button Ketika Submit Form</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
	<div class="container">
		<h3>Disable Button Ketika Submit Form</h3>
		<form class="">
			<div class='row'>
			    <div class="form-group col-md-4">
			            <label for="name">Name:</label>
			            <input type='text' name='name' class='form-control'/>
			    </div>
			</div>
			<div class='row'>
			    <div class="form-group col-md-4">
			            <label for="email">Email:</label>
			            <input type='text' name='email' class='form-control'/>
			    </div>
			</div>
			<div class='row'>
			    <div class="form-group col-md-4">
			    	<button class="btn btn-primary pull-right" type="button" id="btn-submit">Submit</button>
			    </div>
			</div>
		</form>
	</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#btn-submit').on('click',function(e){
        e.preventDefault();
        $(this).html('Please wait ...').prop('disabled',true);
    });
});
</script>