Some text some message..
Some text some message..
Some text some message..
Some text some message..

Silahkan atau queue Daftar disini.

Mengsubmit Form Menggunakan Elemen Span

Toby Sandra

Toby Sandra

06 Nov 2022, 10:09:48

Bagimana cara mengirim atau mengsubmit form menggunakan elemen HTML span? Saya mempunyai form pencarian yang tidak menggunakan tombol submit sama sekali karena untuk memudahkan pengaturan tampilan CSSnya. Namun ada kendala bagaimanakah form tersebut dapat dikirim menuju server tanpa harus menggunakan tombol submit?

Terima kasih..

<!DOCTYPE html>
<html>
<head>
<title>Search</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/838e53.js" crossorigin="anonymous"></script>
<style>
body{
	margin:20px;
}
.input-group{
	width:75%;margin-left:auto;margin-right:auto;
}
</style>
</head>
<body>
	<form id="myForm" action="" method="post">
	<div class="input-group">
	<input type="text" name="qword" class='form-control' autocomplete="off"><span id="s_search" class='input-group-addon'><i class='fas fa-search'></i> Search</span>
	</div>
	</form>
<script>
	// form submit ??????
</script>
</body>
</html>

Tags : tag iconhtml tag iconjavascript tag iconjquery

  

facebooktwitterwhatapplinkedinpinterest

comment1 Jawaban, 44 view

Richard Aja

Richard Aja

06 Nov 2022, 10:11:50

Untuk mengirim form dengan elemen HTML span, dapat menggunakan Jquery. Caranya dengan inisiasi berupa ID span yang bersangkutan dan jika di klik akan memanggil fungsi event pada form submit. Tapi sebelumnya formnya harus diberi ID.

<script>
$(document).ready(function(){
	$('#s_search').click(function(){
		if( $('#qword').val()==""){
			$('#qword').focus();
			return false;
			}
		$("#myForm").submit();
	});
});
</script>

Input pencarian pada saat elemen sedang focus dan jika dilakukan penekan tombol ENTER juga akan memicu terjadinya form terkirim menuju server. Untuk menghindari hal ini juga perlu dilakukan penulisan ulang script..

<script>
$(document).ready(function(){
	$('#s_search').click(function(){
		if( $('#qword').val()==""){
			$('#qword').focus();
			return false;
			}
		$("#myForm").submit();
	});
	$('#myForm').submit(function(){
		if( $('#qword').val()==""){
			$('#qword').focus();return false;
		}
	});
});
</script>
  
Forum ini dibuat untuk menanyakan seputar permasalahan yang sering terjadi pada proses pembuatan halaman web pada HTML, desain web (CSS), pemrograman sisi client (JavaScript), pemrograman sisi server (PHP, ASP) beserta framework turunannya seperti codeigniter, Laravel, Yii. Forum ini tidak membatasi pertanyaan lainnya untuk bahasa program yang berbeda dengan orientasi website pada perangkat desktop dan smartphone.

Silahkan atau queue Daftar disini.

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami

Forum ini dibuat untuk menanyakan seputar permasalahan yang sering terjadi pada proses pembuatan halaman web pada HTML, desain web (CSS), pemrograman sisi client (JavaScript), pemrograman sisi server (PHP, ASP) beserta framework turunannya seperti codeigniter, Laravel, Yii. Forum ini tidak membatasi pertanyaan lainnya untuk bahasa program yang berbeda dengan orientasi website pada perangkat desktop dan smartphone.