Log in

View Full Version : <button> submitting form



boogyman
04-20-2009, 08:37 PM
I wanted to try and port over all of my input buttons to actual buttons, however I've found that upon being clicked they will submit the form. I was under the impression that this would only happen if type="submit" was set.

example:


<button onclick="popUpCalendar(document.getElementById('date').value)">
<img src="/images/icons/calendar.jpg" alt="Choose Date">
</button>


For novelty sake, I also tried replacing the <img> with just the alternate text, as well as explicitly assigning type="button", but same action occurs.

Upon initialization, the button is supposed to create a modal window and display a calendar with various options, however none of them involve submitting the form.

Snookerman
04-23-2009, 07:01 AM
That is the default action (when inside a form) if you don't specify what type of button it is. The browser will interpret it as <button type="submit"> and it will work like a submit button.
Specify that it is just a push button with no default action by giving it the following type:

<button type="button"></button>
That will prevent it from acting as a submit button.

I just noticed that you said you already tried this. I tried it myself and it worked fine so I'm guessing you either made some small mistake or it doesn't work with your doctype. I suggest you try it again with a HTML4 strict doctype. If it still submits, please post a link to the page.
Good luck!

boogyman
04-23-2009, 11:07 PM
The page in question is HTML 4.01 Strict, but it's a null issue now.

jscheuer1
04-24-2009, 06:39 AM
I generally prefer using the input, as I'm just more used to it. Any button or input (regardless of how it is coded - as a button tag or as an input tag), if it is the only button or input, it will often submit the form.

vincentvu
05-16-2009, 11:03 PM
Something I would do to prevend the submission is in the <form> tag, to have the onSubmit="return some_function();". That function will evaluate the situation and return appropriate action. Like if you dont want the form to be submitted, then just return false, it will not be submitted. Otherwise, return true, and the form is submitted. Cheers