Search code examples
javascripthtmlformstextareareset

Reset input & output textarea in a form

in simple html/js (withouth jquery), I have to reset all textareas contained in a form. Here are my attempts:

<form id="myForm" action="#">

  Source:<br><br>

  <textarea id="tab_source" name="source" rows=6>
original default text
</textarea><br><br> Result:

  <br><br>

  <textarea id="tab_result" name="result" rows=6>
</textarea><br><br>

  <input name="button" type="button" value="GO!" onclick="transform()">
  <input name="reset" type="reset" value="Reset test 1">
  <input type="button" onclick="document.getElementById(" myForm ").reset();" value="Reset test 2">
  <input type="button" onclick="document.getElementById(" tab_source ").reset();" value="Reset test 3">
  <input type="button" onclick="document.getElementById(" myForm ").value=''" value="Reset test 4">
  <input type="button" onclick="document.getElementById(" tab_source ").value=''" value="Reset test 5">

</form>

"Reset test 1" button only resets the last textarea ("tab_result"). Other buttons don't work at all. Can you help me? Thanks!

Solution

  • The problem is, that you ended the input attribute with: "

    To showcase it to you, it looks like this:

    <input attribute="bla" attribute="bla" onClick="document.getElementById(" <!-- <- quotes determine end of onClick attribute.-->

    Try:

    <input type="button" onclick="document.getElementById('myForm').reset();" value="Reset test 2">
  <input type="button" onclick="document.getElementById('tab_source').reset();" value="Reset test 3">
  <input type="button" onclick="document.getElementById('myForm').value='';" value="Reset test 4">
  <input type="button" onclick="document.getElementById('tab_source').value='';" value="Reset test 5">