Home > Net >  How to Clear Input Form After Click Submit
How to Clear Input Form After Click Submit

Time:01-02

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 >Voucher Login</p>
                    <div >
                        <label >
                            <input name="username" type="text" value="$(username)" id="userVoucher" oninput="getValue()"
                                
                                placeholder="Voucher" onpaste="return false;" />
                            <input name="password" type="hidden" id="passVoucher"
                                
                                placeholder="Password" />
                            <button id="btn_submit" type="submit"
                                >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>

CodePudding user response:

You're selecting against a class and not an ID:

$('.btn_submit').on('click', function(){
    reset();
});

Note:

<button id="btn_submit" type="submit"

CodePudding user response:

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.

  • Related