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 : 
html javascript jquery
1 Jawaban, 348 view
Apakah ingin menghapus konten ini?
Apakah ingin menghapus komentar ini?
Paling Banyak Dibaca Pada Forum
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
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>