Javascript Onclick function In conflict with the form?

Question

I have a form that sends data to another page, I would like to reset some inputs after sending the form:

<form name='protocolo' id='protocolo' class='excluirclienteform' action='makeprotocolo.php'  target="_blank" method="POST" enctype="multipart/form-data">
                    <br>
                    <label>Selecione uma empresa</label><br>
                    <select name='id' class="selects2"  required>
                        <option value="">selecione a empresa</option>
                            <?php
                            $buscarid=$pdo->prepare("SELECT ID,nome FROM usuario WHERE permissao = 1 ORDER BY ID ASC");
                            $buscarid->execute();
                            while($linha=$buscarid->fetch(PDO::FETCH_ASSOC)){
                                echo "<option  value=".$linha["ID"].">".$linha["ID"]." ".$linha["nome"]."</option>";
                            }
                            ?>
                        </option>
                    </select>
                    <br>
                    <label>Selecione um item</label>
                    <br>
                    <select name='item' class="selects2"  required>
                        <option value="">selecione a empresa</option>
                            <?php
                            $buscarid=$pdo->prepare("SELECT id,nome FROM protocolo_item order by nome asc");
                            $buscarid->execute();
                            while($linha=$buscarid->fetch(PDO::FETCH_ASSOC)){
                                echo "<option  value=".$linha["id"].">".$linha["id"]." ".$linha["nome"]."</option>";
                            }
                            ?>
                        </option>
                    </select>
                    <br>
                    <label>Quantidade</label>
                    <br>
                    <input type='number' step="1" name='quantidade' id='quantidade' size='20' maxlength="10">
                    <br>
                    <label>Descrição</label>
                    <br>
                    <textarea rows="4" cols="50" name="descricao" id='descricao' maxlength="500"></textarea>
                    <br><br>
                    <button type='submit' id='inseriritem' name='enviar' onsubmit="document.getElementById('#descricao').reset();">Inserir</button>
                    <br><br>
                </form>

However I was not successful, I tried to reset the input several ways, putting in a function js (which would be right in the case), I tried to use jquery among others but I was not successful, so I believe that there may be some conflict within my form that may be causing this function problem not generating the expected result (which in case is reset the text area).

Answer 1

The onsubmit is in the wrong place. You should put it in the tag <form>. Another problem is that the reset() is only applicable to the object <form>, and not an individual form element.

Since you cannot clear the field in Submit (otherwise it will be sent empty), call a function after a small one delay using setTimeout in the onsubmit:

<form onsubmit="setTimeout(limpa, 100)"...
                  ^^^^^^^

And put the function limpa() in Javascript clearing the field with value = '':

<script>
function limpa(){
   document.getElementById('descricao').value = '';
}
</script>  

Or you could also do everything on onsubmit without calling function:

<form onsubmit="setTimeout(function(){ document.getElementById('descricao').value = '' }, 100)"...