jQuery handle button click inside a form

Question

i don't understand why a button inside my form can't be reached with my jQuery code.

<form action="">
    <div class="field">
        <label for='username'>Insert username</label>
        <input type="text" id="username" name="username">
    </div>

    <button type='submit' class='btn btn-lg btn-primary buttonRegister'>Register</button>
</form>

Here are my jQuery on click try codes:

$('.buttonRegister').submit(function(){  
    //action inside function
});

--------------OR----------------------

$('.buttonRegister').click(function(){  
    //action inside function
});

--------------OR----------------------

$('.buttonRegister').on("click", function(){  
    //action inside function
});

None of them worked. I'm SURE that code inside click function works because i tried to take button outside the form and it worked well.

You might want to look into handling the submit on the form. — Sumner Evans
– Sumner Evans, Commented Feb 28, 2015 at 21:29
@adeneo i didn't think to that, thanks, i'll need to change it so, cause i need a submit without "refresh" for my php page too.. — Giorgio Antonioli
– Giorgio Antonioli, Commented Feb 28, 2015 at 21:29
Your second code looks OK. Add evt to the function args, and do evt.preventdefault() in the function — mr12086
– mr12086, Commented Feb 28, 2015 at 21:30

JoeCrash · Accepted Answer · 2015-02-28 21:41:42Z

3

Add e.preventDefault() inside before anything else.

$('.buttonRegister').on("click", function(e){  
   e.preventDefault(); // <<-- required to stop the refresh
   //action inside function
});

answered Feb 28, 2015 at 21:41

JoeCrash

5322 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery handle button click inside a form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related