I've tried many ways from several threads but to no avail.
I have form code like this:
<div id="fVoucher">
<form id="myForm" name="login" action="$(link-login-only)" method="post" $(if chap-id) onSubmit="return doLogin()"
$(endif)>
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
<p class="px-3 pt-3 pb-1 font-semibold text-gray-500 text-md">Voucher Login</p>
<div class="mx-3 ">
<label class="flex flex-row justify-between space-x-2 justify-items-center">
<input name="username" type="text" value="$(username)" id="userVoucher" oninput="getValue()"
class="block w-full h-10 px-3 bg-white border-gray-300 rounded-md shadow-sm bg-opacity-70 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
placeholder="Voucher" onpaste="return false;" />
<input name="password" type="hidden" id="passVoucher"
class="block w-full h-10 px-3 bg-white border-gray-300 rounded-md shadow-sm bg-opacity-70 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
placeholder="Password" />
<button id="btn_submit" type="submit"
class="px-3 font-semibold text-gray-500 rounded-md shadow-md bg-gradient-to-br from-yellow-200 to-yellow-400">Login</button>
</label>
</div>
</form>
</div>
This is the script I tried to remove the input form after clicking submit. But it didn't work.
<script type="text/javascript">
var reset = function(){
setTimeout(function(){
$('form')[0].reset();
},3000);
}
$('.btn_submit').on('click', function(){
reset();
});
</script>When resetting a form, you have to target the form element.
You can do it inline like below.
<button type="submit" onclick="this.form.reset();">Login</button>
Or, Inside a onClick event handler.
document.getElementById("myForm").reset();
Or, (jQuery)
$('#myForm').trigger("reset");
Instead of clearing the form on 'Login' button click, I think it's better to have a separate button like 'Clear' / 'Reset' to reset the form. It's much more cleaner in this way.
You're selecting against a class and not an ID:
$('.btn_submit').on('click', function(){
reset();
});
Note:
<button id="btn_submit" type="submit"