I would like the search bar to be cleared after the user presses the search button. Is there a quick workaround that is not invasive?
<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>
Bind the submit event to the <form>:
document.forms.Submit.onsubmit = e => /* ... */
then call the .reset() method on the <form> via e.target, also wrap it in a setTimeout():
/* ... */ setTimeout(() => e.target.reset(), 0)
I have the <form> sending data to a live test server and an <iframe> to display the response so you can see that after a search the <input> is cleared.
<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>You can delete the text on input search.
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>