CODEWITHSUNDEEP
javascriptjqueryhtmlforms
BxtchCraft
BxtchCraft

Reputation: 488

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

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/

Upvotes: 1

Views: 210

Answers (2)

Leo
Leo

Reputation: 4428

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
}

Upvotes: -1

HaukurHaf
HaukurHaf

Reputation: 13796

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.

Upvotes: 5

Related Questions