CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Dylan Buth
Dylan Buth

Reputation: 1666

Form submits when "<button>" is clicked

I have an Account Create form. There is no submit button, just a <button>. Right now I have a jQuery validation running when the button is clicked. The validation is being run and the proper errors show up for it, but the form is then submitted and the page reloaded. Even though I have no submit button and not jQuery submit() function anywhere.

HTML: 

<form id="accountCreate" method="POST" action="<?=site_url('account/create')?>">
    <h3>Create an Account</h3>
    <ul>
        <li><input type="text" name="email" placeholder="Email..." /></li>
        <li><input type="password" name="password" placeholder="Password..." id="password" /></li>
        <li><input type="password" placeholder="Verify Password..." id="verifyPassword" /></li>
        <li><button id="button">Create</button></li>
    </ul>
</form>

JS:

$(document).ready(function() {
$('#button').click(function() { 
    var password = $('input#password').val();
    var passwordV = $('input#passwordVerify').val();

    if (password.length >= 6 && password.length <= 24) {
        if (password == passwordV) {

        } else {
            $('div#error').css('display', 'inline');
            $('div#error span.errorMessage').text('hey');
        }
    } else {
        alert('yo');
        return false;
    }
});
});

Upvotes: 0

Views: 153

Answers (4)

Joshua Wilson
Joshua Wilson

Reputation: 2526

You should add evt.preventDefault(); to make the submit only do what you want.

Upvotes: 0

user2572094
user2572094

Reputation: 190

$(document).ready(function() {
$('#button').click(function() { 
var password = $('input#password').val();
var passwordV = $('input#passwordVerify').val();

if (password.length >= 6 && password.length <= 24) {
    if (password == passwordV) {

    } else {
        $('div#error').css('display', 'inline');
        $('div#error span.errorMessage').text('hey');
    }
} else {
    alert('yo');
    return false;
}
//Just add return false
return false;
});
});

Upvotes: 0

Andreas
Andreas

Reputation: 21881

When no type attribute is defined a <button /> acts as a submit button.
Add type="button" to fix this problem.

<button id="button" type="button">Create</button>

http://www.w3.org/TR/html-markup/button.html#button

Upvotes: 5

Maxim Kumpan
Maxim Kumpan

Reputation: 2625

You need to specify a default type= attribute for the button, as different browsers can use different defaults. In your case, it looks like the browser has defaulted to type="submit".

Upvotes: 2

Related Questions