Me gustaría que la barra de búsqueda se borre después de que el usuario presione el botón de búsqueda. ¿Existe una solución rápida que no sea invasiva?
<form method="POST" id="Submit"> <div class="inner-form"> <div class="input-field first-wrap"> <input id="search" name="input" placeholder="Paste here" type="text" required oninvalid="onInvalid(event)" /> </div> <div class="input-field second-wrap"> <button id="button" class="btn-search" onclick="searchIt()" value="press" type="submit"> SEARCH </button> </div> </div> <p class="errorMessage" id="errorMessage"></p> </form>Vincule el evento de envío al <form> :
document.forms.Submit.onsubmit = e => /* ... */ luego llame al método .reset() en el <form> a través de e.target , también envuélvalo en un setTimeout() :
/* ... */ setTimeout(() => e.target.reset(), 0) Tengo el <form> enviando datos a un servidor de prueba en vivo y un <iframe> para mostrar la respuesta para que pueda ver que después de una búsqueda se borra la <input> .
<form action='https://httpbin.org/post' method="POST" id="Submit" target='response'> <div class="inner-form"> <div class="input-field first-wrap"> <input id="search" name="input" placeholder="Paste here" type="text" required oninvalid="onInvalid(event)" /> </div> <div class="input-field second-wrap"> <button name='btn' class="btn-search" value="press" type="submit">SEARCH</button> </div> </div> <p class="errorMessage" id="errorMessage"></p> </form> <iframe name='response'></iframe> <script> document.forms.Submit.onsubmit = e => setTimeout(() => e.target.reset(), 0); </script>Puede eliminar el texto en la búsqueda de entrada.
function searchIt(){ document.getElementById('search').value=""; } <form method="POST" id="Submit"> <div class="inner-form"> <div class="input-field first-wrap"> <input id="search" name="input" placeholder="Paste here" type="text" required oninvalid="onInvalid(event)" /> </div> <div class="input-field second-wrap"> <button id="button" class="btn-search" onclick="searchIt()" value="press" type="submit"> SEARCH </button> </div> </div> <p class="errorMessage" id="errorMessage"></p> </form> function searchIt(e){ e.preventDefault(); /* do what you want submit form */ document.getElementById('Submit').reset() } <form method="POST" id="Submit"> <div class="inner-form"> <div class="input-field first-wrap"> <input id="search" name="input" placeholder="Paste here" type="text" required oninvalid="onInvalid(event)" /> </div> <div class="input-field second-wrap"> <button id="button" class="btn-search" onclick="searchIt(event)" value="press" type="submit"> SEARCH </button> </div> </div> <p class="errorMessage" id="errorMessage"></p> </form>