My form always submits when the button is clicked, no matter what I do

Question

I have a relatively simple form. I am using jQuery to select the submit button, and as of right now, I'm just trying to display an alert when clicked.

The Problem: The button is using it's default action, no matter what I do. So basically, no alert displays, and I'm stuck with the submitted parameters which are appended to the end of the url in my address bar.

I have tried using e.preventDefault();, e.preventDefault(true);, e.stopImmediatePropogation(), and e.stopImmediatePropogation(true);.

I've even tried putting those in a document.ready() block.

The registration form is in a modal panel, though I don't think that should matter... (Should it?)

I guess now I'll show you the code. I really don't understand why it's not working. I'd appreciate any help:

HTML: http://pastebin.com/bHCC58w4 (full document)

    <form id="registerForm">
        <a class="close"></a>
        <h3>Register Today! - It's FREE!</h3>
        <p>Registering only takes seconds, and puts you into direct contact with a designer. On top of all that, you can add documents, images, and other files to your project dashboard. What are you waiting for? It's free!</p>
        <img src="images/formfish.png" alt="Goldy the goldfish helps users register. It looks like he stepped out for a minute. Sorry about that!" />
        <input type="text" id="name" name="name" placeholder="Your full name." title="We just need your first and last name." class="masterTooltip" />
        <input type="email" id="email" name="email" placeholder="Your email." title="We won't send you spam. Pinky swear." class="masterTooltip"  />
        <input type="text" id="userName" name="userName" placeholder="Your username." title="Your username must be unique." class="masterTooltip" />
        <input type="password" id="password" name="password" placeholder="Your password." title="Make your password hard to guess." class="masterTooltip" />
        <button id="register">Sign up</button>
    </form>

JAVASCRIPT: http://pastebin.com/bD2fYPsh (full document)

        $("#register").on("click", function(e){
            e.preventDefault();
            alert("Hello!");
        });

Here is a semi-live version of the site. It's got no working functionality other than the jQuery animations. I don't know if it will help you guys or not: http://graphicgoldfish.com/creativecodefish/

It really isn't, and if you isolate it, that's not changing the fact that when you put it back onto the html, it's still broken. — BxtchCraft, Jul 23 '14 at 22:26
If you wanna prevent default action on form submit then use `$('#registerForm').submit(function(e) { e.preventDefault(); });` — Milan and Friends, Jul 23 '14 at 22:32
Related: [There are 3 supported types for a button, the default type is submit](http://stackoverflow.com/a/10079197/1026459) — Travis J, Jul 23 '14 at 22:35

score 5 · Accepted Answer · answered Jul 23 '14 at 22:16

5

Change the button so it's just a button, not a submit button:

<button id="register" type="button">Sign up</button>

By default, buttons are of the type submit which will cause the form itself to submit.

answered Jul 23 '14 at 22:16

HaukurHaf

13,522
5
44
59

That makes sense, and the form is no longer submitting, but it's still not displaying the alert for some reason. – BxtchCraft Jul 23 '14 at 22:24
There must be something interfering with your code. Is the actual form present on the page you linked to? This one: http://graphicgoldfish.com/creativecodefish/ – HaukurHaf Jul 23 '14 at 22:29
Yeah, if you click the "Start Today" button. – BxtchCraft Jul 23 '14 at 22:33
Hmm, the markup for that Sign up button is this: and I cannot see any event handlers being hooked up to this button in your javascript files. Something is clearly missing, right? – HaukurHaf Jul 23 '14 at 22:36
The live site has no functionality. I linked pastebin files in the original markup. I will upload the files now to the ftp. – BxtchCraft Jul 23 '14 at 22:37
It's been uploaded, so you should be able to see the javascript. – BxtchCraft Jul 23 '14 at 22:41
Just saw it :-) Move the code which applies the handler to the register button outside of the signup button click .... you cannot call $(document).ready(...) inside a click event. It will not work. See an updated pastebin here: http://pastebin.com/VRDt6rCM where I've moved the code around at the bottom. – HaukurHaf Jul 23 '14 at 22:43
1

You, sir, are amazing. And I'm a dunce. Send me a message for some cookies. <3 – BxtchCraft Jul 23 '14 at 22:56

score -1 · Answer 2 · answered Jul 23 '14 at 22:19

-1

There are a bit different event handlers. I think you are better off using plain javascript for this:

document.getElementById("register").addEventHandler("click", function(e){
    e.preventDefault(); // etc
}

answered Jul 23 '14 at 22:19

Leo

4,136
6
48
72

There are different ways of stopping the propagation depending on how you specify the event handler. (Maybe the guy who downvoted my answer can point you to the differences. I can, but will not do it now. ;-) ) – Leo Jul 23 '14 at 22:27

My form always submits when the button is clicked, no matter what I do

2 Answers2