Issue on Submitting a Form using jQuery

Question

Can you please take a look at this Demo and let me know why I am not able to submit the Form (No Alert after clicking the Submit Button).

<div class="container">
    <form id="target">
        <div class="btn-group btn-group-xs pull-right" data-toggle="buttons">
            <label class="btn btn-default yesactive active ">
            <input type="radio" name="options" id="option1"><span class="glyphicon glyphicon-ok" />
            </label>
            <label class="btn btn-default noactive">
           <input type="radio" name="options" id="option2"><span class="glyphicon glyphicon-remove" />
            </label>
        </div>
        <button type="button" class="btn btn-default btn-sm" id="submit">Submit</button>
    </form>
</div>

<script>
$( "#target" ).on( "submit", function( e ) {
    alert("Handler for");
    e.preventDefault();
});
</script>

Answer 1

Change

<button type="button" class="btn btn-default btn-sm" id="submit">Submit</button>

To

<button type="submit" class="btn btn-default btn-sm" id="submit">Submit</button>

You are calling the event on "Submit", but in your button the type of the button is not submit. If you change to submit then it will cater for the submit event.

Answer 2

http://jsfiddle.net/s3774/13/

Try this one out. JQuery uses an input of type submit for form submissions.