Question 44369 in Html Question posted in
Some basic documentation can be found here.

how to clear text from an html input

I want to clear my text from an input in html input, but it doesn’t work.

I tried this but it shows up with ‘error 404, page does not exist’ when I click submit.

<sub> <h3>
    <hr>
    Tell me what <strong>your</strong> favorite colours is!
  </h3>
  <form name='cols'>
    <input type='text' id='col1'>
    <input type='text' id='col2'>
    <input type='text' id='col3'>

    <input type="submit" value="Submit" id="submit" onclick="clear()">

    <script>
      function clear() {
         var frm = document.getElementsByName('cols');
      frm.reset();
      return false;
      }

    </script>
    </form>
</body>
</sub>

error404

website snippet

Tags:

2

Answers


  1. 0

    If you want to reset when you click the submit button change the name to id in form then just change the function into this:

     <sub> <h3>
    <hr>
    Tell me what <strong>your</strong> favorite colours is!
  </h3>
  <form id='cols'>
    <input type='text' id='col1'>
    <input type='text' id='col2'>
    <input type='text' id='col3'>

    <input type="submit" value="Submit" id="submit" onclick="clear()">

    <script>
      function clear() {
         document.getElementById("cols").reset();
      }

    </script>
    </form>
</body>
</sub>
    Login or Signup to reply.
  2. 0

    The reason you encounter a 404 error is because the browser was actually trying to submit the <form> to a server, which is the expected behaviour for a submit <button> (it is preferable to use <button type="submit"> over <button type="submit">, even if they act the same way).

    The server URL it tried to submit the form is the same as the one of the current page by default, unless you explicitly specify an action for the form. For example:

    <form action="/submit-color">

    If you want to reset the form without submitting any data, you don’t need any JavaScript: instead, you can use the native HTML reset button:

    <button type="reset">Reset the form</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search