Clearing a text field on button click

Question

I have two text labels:

<div>           
    <input type="text" id="textfield1" size="5"/>
</div>

<div>          
    <input type="text" id="textfield2" size="5"/>           
</div>

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:

<div>      
    <input type="button" value="Clear Fields" onclick=SOMETHING />
</div>

Any clues on how to implement SOMETHING?

Answer 1

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:

<button type="button" onclick="ClearFields();">Clear</button>