Mengubah text submit button ketika di klik

Hai coders apa kabar ?, kembali lagi bersama kinta mahadji, kali ini kami mau share tutorial jQuery tentang mengubah text submit ketika di klik.

Studi kasus, ketika form submit di klik, ada kalanya data terinput lebih dari satu kali, hal ini sering terjadi ketika user gak sabar melihat respon dari server yang lambat, padahal dari sisi client sudah mengirimkan data, dan server sedang memproses respon data yang diminta, karena di halaman proses terlihat seperti hang, user mengklik tombol submit berkali-kali.

Untuk mensiasati persamalahan di atas, salah satu solusinya adalah menjadikan tombol submit disabled ketika sudah di klik satu kali. Bagaimana caranya ? pelajari kode berikut ini :

HTML



<form>


<div class="form-group">
					<label for="exampleInputEmail1">Email address</label>
					<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
				</div>



<div class="form-group">
					<label for="exampleInputPassword1">Password</label>
					<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
				</div>


				<input type="submit" class="btn btn-info"/>
			</form>


Javascript

		// memberikan function on submit pada tag form
		$('form').on('submit', function(){

			// inisiasi tombol submit
			var submit_button = $('input[type="submit"]');

			// change submit button text
			submit_button.val('Processing');

			// disable submit button
			submit_button.prop('disabled', true);

		});

Download code

submit-text-onchange

Happy coding 🙂

About Author:

One thought on “Mengubah text submit button ketika di klik

  1. Gan minta tutorial dunk
    Bagaimana kita menampilkan paragraf(data yg berparagraf)didatabase menggunakan php..maksh sblmnya

Leave A Comment

Your email address will not be published. Required fields are marked *