Develop Reference

form is getting submmited when cleared

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

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/

javascript only executes once

I'm writing a cms page for my site. part of it is writing a preview component for my blog. I have a form, and a preview button, that activates a Javascript, which places the html typed in the text-area in a div element to test it. Everything works fine but the problem is that it only works once for each pageload. So I can't test something, add some code and retest it. Any ideas how to make multiple testing possible ?
Code Form:
<form>
<textarea rows="30"cols="30" name="blogpost" style="width:500px;resize:none;" autofocus placeholder="Enter your new blogpost here!"></textarea>
</br>
<input type = "submit" value="post">
<input type = "button" id="testknop" value="previeuw" onclick="previeuwpost(this.form, this.form.blogpost);">
<input type="reset" />
</form>
Javascript Code:
function previeuwpost(form, text){
$("#previeuwbox").replaceWith(text.value);
}
Thanks a lot folks

replaceWith means replaced.
Therefore, after you click, the $("#previeuwbox") is gone.
Please use :
$("#previeuwbox").html(text.value);

Customizing the appearance of a file input in an HTML form

I've been trying to figure out how to customize the appearance of a file input in an HTML form so that the button will match with the rest of the buttons on my site. Looking around here I found a solution that I would expect to work, but it's having some strange behavior.
I took my file input and set display:none, and created a new text input and button within the form.
<form method="post" action="../Entry/Create" enctype="multipart/form-data" onsubmit="return aentryValidate()">
<input type="text" id="EntryTitle" name="EntryTitle" maxlength="50" />
<div id="invalidTitle" class="invalidData"></div>
<p id="char-remaining">(50 characters remaining)</p>
<input type="file" id="ImageFile" name="ImageFile" style="display:none;" />
<input type="text" id="ImageFileMask" name="ImageFileMask" disabled="true" />
<button type="button" onclick="HandleFileButtonClick()" id="ImageFileButton" style="margin-left:10px;padding-bottom:0px;height:20px;width:100px;font-size:14px;">browse...</button>
<div id="invalidImage" class="invalidData"></div>
<p id="file-desc">(image to represent your entry, jpg, png, or gif)</p>
<textarea id="EntryDesc" name="EntryDesc"></textarea>
<div id="invalidDesc" class="invalidData"></div>
<br />
<input type="checkbox" id="isPrivate" name="isPrivate" value="true" />
<input type="hidden" name="isPrivate" value="false" />
Make my entry private.
<button id="new-entry-save">save</button>
</form>
Then my javascript to handle the ImageFileButton button being clicked:
function HandleFileButtonClick() {
document.getElementById("ImageFile").click();
document.getElementById("ImageFileMask").value = document.getElementById("ImageFile").value;
}
It appears to work fine. I click the button, the window pops up for me to select a file. When I select a file, it appears in the text box.
The weird behavior comes when I hit the save button on the form. I noticed that it has to be clicked twice to actually submit for some reason now. And, when it submits it is no longer posting the file.
So I made the file input visible again to see what was happening. If I use the ImageFileButton button to select a file, the file shows up in the file input. But when save is clicked, the file input clears and the form doesn't submit. You then have to click again to submit, and of course now there is no file.
Anybody know what is happening here?

No, its not possible. File inputs are generally browser dependant. You might have to use JavaScript replacement or Flash replacement like uploadify.
Article: Input File
Of all form fields, the file upload field is by far the worst when it comes to styling. Explorer Windows offers some (but not many) style possibilities, Mozilla slightly less, and the other browsers none at all. The "Browse" button, especially, is completely inaccessible to CSS manipulation.

How to prevent form submit from triggering `button:first.onclick()`?

Every time I submit a form by pressing enter, the click() function on the first <button> in the associated form is getting triggered. The problem (other than the fact that I just find this behavior odd) is that it is literally a click event, indistinguishable from actually clicking on the button. If it triggered the even on my submit button, I'd be fine with it.
The issue is that in this case the first button has nothing to do with the actual form, it's actually in a hidden popup.
So the exact question: Why is this happening? How do I prevent it? How do I distinguish this "fake click" event from a real one?
(this is a very simplified example; actual code is using jQuery (in case jQuery happens to acknowledge this and there is a fix for it), but the actual issue has nothing to do with jQuery)
<form>
<input>
<button onclick="alert('button A click');">Button A</button>
<button onclick="alert('button B click');">Button B</button>
<input type="submit" value="Submit Button">
</form>
http://jsfiddle.net/NexHC/2/
Please, no suggestions to "move the button"

-snip-
Edit
<form>
<input>
<button type="button" onclick="alert('button A click');">Button A</button>
<button type="button" onclick="alert('button A click');">Button B</button>
<input type="submit" onclick="alert('button Submit click');" value="Submit Button">
</form>
Actually I take it back... the reason is a lot more concrete and simple than that. Submit is the default type for <button> as specified by the w3c. Therefore, by leaving the button type attributes blank on your form, you were making three submit buttons and it was picking the first when you hit enter (love the <kbd> styling on this site :P). See here for w3c info and here for the updated fiddle

My advice would be, if the <button> has nothing to do with the form and is also controlling a hidden popup, then take it out of the context of the <form> and place it elsewhere. This would also solve your click issue.

Onclick Submit form Javascript with image buttons

hey, well I have this form
<form method="POST" action=''>
<input type="hidden" name="op" value="download1">
<input type="hidden" name="usr_login" value="<TMPL_VAR usr_login>">
<input type="hidden" name="id" value="<TMPL_VAR file_code>">
<input type="hidden" name="fname" value="<TMPL_VAR file_name>">
<input type="hidden" name="referer" value="<TMPL_VAR referer>">
<div class="premium-download"><input name="method_premium" value="<TMPL_VAR lang_premium_download>" type="image" src="images/premium-download.png" alt="<TMPL_VAR lang_premium_download>" border="0" /></div>
<div class="free-download"><input name="method_free" value="<TMPL_VAR lang_free_download>" type="image" src="images/free-download.png" alt="<TMPL_VAR lang_free_download>" /></div>
</form>
How can I submit the form from the image inputs (see the last two fields)? Right now they are set as image type and I understand that those will not submit the form by default. Could anyone help? I was told to do it with javascript :D

I initially misread your question. As already noted, <input type="image"> elements do submit forms. However, if you're looking for more versatility than image inputs, my answer still applies.
I was told to do it with javascript
Don't, use <button> elements instead. <button> elements work like <input type="button">, except that they can be styled to have no border, be transparent, and they can contain other HTML. For example:
<button type="submit" name="method_premium" value="<TMPL_VAR lang_premium_download>">
<img src="images/premium-download.png" alt=alt="<TMPL_VAR lang_premium_download>" />
</button>
Style the button with CSS (border:none; background-color:transparent;) and you're good to go.
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.
The BUTTON Element - W3C

Input elements with "type" set to "image" do indeed act (almost) exactly like "submit" inputs. It's "almost" exactly because you also get the coordinates of the mouse click, and you don't get the "value" of the input element.
If you wanted the clicks on the "image" inputs to submit the values, the simplest thing to do would be to have a couple more hidden inputs.

I don't know what you are trying to achieve, but you could submit the form using JavaScript. It might be best to use the BUTTON as suggested by #Andy E:
<form method="POST" name='myForm'>
...
...
<script lang="javascript">
function SubmitForm()
{
document.forms['myForm'].submit() ;
}
</script>