skip to Main Content

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

2

Answers


  1. 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.)

    Login or Signup to reply.
  2. 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()
    })
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search