form is getting submmited when cleared

Question

I have a JSP page with multiple form elements (textbox,drpdown menu,textarea etc), I want to clear them on click of a button, i have written the below JavaScript code:

function clearForm(frm){
    alert("in clear form");
     $("textarea").val("");
     document.getElementById("City").selectedIndex = 0;
     document.getElementById('STREET_NAME').value="";
     return false;
    }

JSP code:

<form action="<%=request.getContextPath()%>/insertData.htm" id="myForm">
//here i have form elemetns like textbox, dropdown meny,text area etc.

  <button name="clearButton" id="clearButton" onclick="return clearForm(this.form);">CLEAR</button> 
  <button name="buttonName" type="submit" id="submitButton" value="submit">SAVE</button>

</form>

When I click on CLEAR button, its going to JavaScript clearForm(frm) function ,clear the fields, then the form is getting submitted and the control is going to the controller class(Spring controller).Where I am going wrong, the form should not get submitted.

--EDITED--

When I use the below code , only textarea field is getting cleared.

function clearForm(frm){

     $("textarea").val("");
     document.getElementById("City").selectedIndex = 0;
     document.getElementById('STREET_NAME').value="";
     return false;
    }
<button type="button" style="font-size:9px; height:20px;text-transform:uppercase;" name="clearButton" id="clearButton" onclick="return clearForm()">CLEAR</button>

Please find the same in jsfiddle

Answer 1

According to the MDN , without specifying a type attribute, a <button> element defaults to type="submit" .

Add type="reset" to your button, and you won't need any JavaScript to clear out the form.

<button type="reset"  name="clearButton" id="clearButton">CLEAR</button>

Otherwise, add type="button" …

<button type="button" name="clearButton" id="clearButton" onclick="return false;">CLEAR</button>

DEMO: http://jsfiddle.net/7TBW2/2/

---

EDIT:

As per OP's comments as to why his jsFiddle is not working.

OP's HTML:

<input type="text" name="relName" value="REL100" required="true" />
<textarea name="NOTES" cols="50" rows="4" />aklsdjj</textarea>

OP's JavaScript:

document.getElementById('relName').value = "";
$("textarea").val("");

You have lots of errors and inconsistencies:

1) document.getElementById('relName') is looking for the id attribute, but you don't have an id on this input , only a name attribute.

Add an id :

<input type="text" name="relName" id="relName" value="REL100" required="true" />

2) $("textarea") is a jQuery selector but you don't have any jQuery library included in your jsFiddle. Not sure why you would be mixing jQuery selectors with getElementById() in the first place, so I assume you're not really using jQuery for anything.

Use jQuery or don't, just be consistent:

document.getElementById("NOTES").value = "";

3) Your HTML is invalid on the textarea . You do not need a "self-closing" slash inside the opening tag since textarea is a container element.

It should be:

<textarea name="NOTES" id="NOTES" cols="50" rows="4">aklsdjj</textarea>

FIXED : http://jsfiddle.net/z9uGv/2/