How come the first


Tags: javascript,html,css,forms

Problem :

I have a <form> Inside that form, I have 2 submit buttons.

The first one is this:

<button  class="regular" id="geocodesubmit" style="height:40px;">Set Loc
ation</button>

The second one is this:

<button  type="submit" class="regular" name="Submit Discovery">Submit</button>

How come my first button gets activated when I push enter on one of the text boxes? I want the 2nd one to activate...

I don't want the first one to respond to any keypresses.

Note: I don't want to use input type="submit", because I have a lot of other css stuff.



Solution :

The HTML4 spec says that the default type of a button tag is submit.
See: http://www.w3.org/TR/html401/interact/forms.html#h-17.5

So your problem is simply the fact, that your first button doesn't have a type attribute and will therefore act like another submit button.

To fix it set type="button" for the first button.


    CSS Howto..

    How can I use CSS to vertically center the text in an anchor, within a LI?

    How to accomplish onHover event without a second image

    How do I apply properties to a previous sibling on hover?

    How to stop FOUC when using css loaded by webpack

    How do I correct overlapping spacing error in CSS when it wraps text?

    How to Identify Microsoft Edge browser via CSS?

    How can I get some padding between these form boxes?

    How to create a DIV style switcher in JavaScript?

    How to Override/Undo CSS Class Attributes for Twitter Bootstrap

    How to create a horizontal calendar with nested lists?

    show/hide will not load

    How to place a consistent 5px margin around an inner div without specifiying inner divs height?

    How can I get the body to continue look the same when a div inside overflows to the right?

    How can I override inline styles with external CSS?

    How can I align centered inline-block elements correctly?

    How to modify your CSS working with Mobile Angular UI and Bootstrap

    How do you make a div display two inline items that stretch the width?

    How do I minify CSS and Javascript? [duplicate]

    How to get rid of white space between round image and border in HTML/CSS/Bootstrap?

    How do I make two arrows in css

    css - how to setup image editing page

    How to separate content and presentation layers on JSPs?

    How to increase size of something in class, but not other elements in class?

    How to vertical align element relative other element with pseudo-class? [duplicate]

    How to refactor an existing project to use Compass?

    Footer Showing White Bar on only one page of website

    Having Two HTML issues with PHP DOM: 1.) DOMDocument::createEntityReference $name values and 2.) how to add multiple CSS classes an element?

    How do i enable hover effect on an image if the text before it is hovered?

    How can I change cssText in IE?

    How can I hide the backface of a block element rotated with transform: rotateX()?