I have a panel that has 3 textareas for a user to add certain information. It then goes through the process of being saved to the database. On every click of a button, I want the same empty panel to appear which will allow the user to enter multiple entries
I put together this little code for you, hope it helps you
//Simple HTML with 3 textarea
<div>
<form action="">
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<span id="btn">Click me!</span>
</form>
</div>
So anytime the button #btn is clicked, first the form is submitted and then the textarea is cleared.
// The Javascript
const
btn = document.querySelector('#btn'),
form = document.querySelector('form'),
textarea = document.querySelectorAll('textarea')
function clearFields() {
for (let i = 0; i < textarea.length; i++) {
textarea[i].value = '';
}
}
btn.addEventListener('click', function() {
// functionality to asynchronously submit and save user entry to DB
submitFormToServer()
// Clear all the textarea
clearFields()
})
After button click event you could call a Redirect to the same page which will clear out the textboxes or explicitly clear them out (Textbox1.Text = "" etc.)