TAG
CSS
JavaScript
Result
Run
License
<form id="myform" class="nottransmitted"> <input type="text" id="name" name="name" required /> <button type="button" id="btn-reset">Reset</button> </form>
.nottransmitted { padding: 30px 20px; position: relative; } .nottransmitted::before { content: "Not transmitted"; position: absolute; background: #454545; top: 0; padding: 3px 10px; color: yellow; border-radius: 5px; }
window.addEventListener("load", () => { const $elBtnReset = document.querySelector("#btn-reset"); $elBtnReset.addEventListener("click", e => { const $elForm = e.currentTarget.form; let val; [...$elForm.elements].forEach(control => { if(control.value) val = control.value; }); if(!val) { console.log("Enter any text."); return; } $elForm.reset(); }); $elBtnReset.form.addEventListener("reset", () => { console.log("The form has been reset."); }); });
Console
expand_less
License
License
by DevDic
Close