Html – How to call a function on submit

htmljquery

I am not able to call jQuery on submit. The alert in the function is not displayed.

I want to display an alert of all the checked checkbox names.

here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
    </head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

    </script>
    <script>
        $(document).ready({

            $("#roleManagement").submit(function() {
                alert("hi");
                var selected = new Array();
                $('#checkboxes input:checked').each(function() {
                    selected.push($(this).attr('name'));
                });
                $.each(selected, function(key, value) {
                    alert(key + ": " + value);
                });

            });
    </script>

    <body>
        <form method="post" id="roleManagement">Role Id
            <input type="text" name="roll_id" />
            <br>Role Name
            <input type="text" name="roll_name" />
            <br>Role Description
            <textarea name="roll_desc"></textarea>
            <br>
            <br>
            <br>
            <div id="checkboxes">Screen1
                <br>tab1
                <br>
                <input type="checkbox" name="s1_t1_view" value="s1_t1_view" checked="checked >view<br>
                <input type=" checkbox " name="s1_t1_add " value="s1_t1_add " >add<br>
                <input type="checkbox " name="s1_t1_edit " value="s1_t1_edit " >edit<br>
                <input type="checkbox " name="s1_t1_delete " value="s1_t1_delete " >delete<br>

                tab2<br>

                <input type="checkbox " name="s1_t2_view " value="s1_t2_view " >view<br>
                <input type="checkbox " name="s1_t2_add " value="s1_t2_add " >add<br>
                <input type="checkbox " name="s1_t2_edit " value="s1_t2_edit " >edit<br>
                <input type="checkbox " name="s1_t2_delete " value="s1_t2_delete " >delete<br>

                Screen2<br>

                tab1<br>

                <input type="checkbox " name="s2_t1_view " value="s2_t1_view " >view<br>
                <input type="checkbox " name="s2_t1_add " value="s2_t1_add " >add<br>
                <input type="checkbox " name="s2_t1_edit " value="s2_t1_edit " >edit<br>
                <input type="checkbox " name="s2_t1_delete " value="s2_t1_delete " >delete<br>

                tab2<br>

                <input type="checkbox " name="s2_t2_view " value="s2_t2_view " >view<br>
                <input type="checkbox " name="s2_t2_add " value="s2_t2_add " >add<br>
                <input type="checkbox " name="s2_t2_edit " value="s2_t2_edit " >edit<br>
                <input type="checkbox " name="s2_t2_delete " value="s2_t2_delete " >delete<br>
            </div>
            <input type="submit " name="sumbit " text="submit ">
        </form>
    </body>
</html>

Where am I going wrong?

Best Solution

Your script is not proper, you need to pass a function as a parameter to ready()

$(document).ready(function() {
    $("#roleManagement").submit(function() {
        alert("hi");
        var selected = new Array();
        $('#checkboxes input:checked').each(function() {
            selected.push($(this).attr('name'));
        });
        $.each(selected, function(key, value) {
            alert(key + ": " + value);
        });

    })
});