Clearing a text field on button click

Question

I have two text labels    lt div gt                  lt input type  text  id  textfield1  size  5   gt   lt  div gt    lt div gt                 lt input type  text  id  textfield2  size  5   gt              lt  div gt    I would like to have a button called  Clear  that would erase both these fields   To my knowledge  I know that to implement a button I should use a code like this    lt div gt             lt input type  button  value  Clear Fields  onclick SOMETHING   gt   lt  div gt    Any clues on how to implement SOMETHING

User · Accepted Answer

How about just a simple reset button    lt form gt      lt input type  text  id  textfield1  size  5  gt     lt input type  text  id  textfield2  size  5  gt      lt input type  reset  value  Reset  gt    lt  form gt

User · Answer

Something like this will add a button and let you use it to clear the values   lt div gt              lt input type  text  id  textfield1  size  5   gt            lt  div gt    lt div gt             lt input type  text  id  textfield2  size  5   gt              lt  div gt    lt div gt       lt input type  button  onclick  clearFields    value  Clear  gt   lt  div gt     lt script type  text javascript  gt  function clearFields         document getElementById  textfield1   value        document getElementById  textfield2   value       lt  script gt

User · Answer

If you are trying to  Submit and Reset  the the  form  with one Button click  Try this   Here I have used jQuery function  it can be done by simple JavaScript also              lt form id  form data  gt              lt input type  anything   name  anything    gt              lt input type  anything   name  anything    gt                 lt  -- Save and Reset button -- gt              lt button type  button  id  btn submit  gt Save lt  button gt              lt button type  reset  id  btn reset  style  display  none   gt  lt  button gt           lt  form gt    lt script type  text javascript  gt    function            btn submit   click function               Do what ever you want            btn reset   click        Clicking reset button              lt  script gt

User · Answer

If you want to reset it  then simple use    lt input type  reset  value  Reset    gt    But beware  it will not clear out textboxes that have default value  For example  if we have the following textboxes and by default  they have the following values    lt input id  textfield1  type  text  value  sample value 1    gt   lt input id  textfield2  type  text  value  sample value 2    gt    So  to clear it out  compliment it with javascript   function clearText           document getElementById  textfield1   value           document getElementById  textfield2   value             And attach it to onclick of the reset button   lt input type  reset  value  Reset  onclick  clearText      gt

User · Answer

A simple JavaScript function will do the job   function ClearFields           document getElementById  textfield1   value            document getElementById  textfield2   value           And just have your button call it    lt button type  button  onclick  ClearFields     gt Clear lt  button gt

[html] Clearing a text field on button click

Examples related to html