如何在提交时调用函数?

时间:2013-05-14 13:38:50

标签: jquery html

我无法在提交时调用jQuery。不显示功能中的警报。

我想显示所有已选中复选框名称的提醒。

这是我的代码:

<!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>

我哪里错了?

3 个答案:

答案 0 :(得分:6)

您的脚本不正确,您需要将函数作为参数传递给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);
        });

    })
});

答案 1 :(得分:2)

当你从本地文件系统运行它时,你需要将http:放在jQuery lib链接中 -

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

您的document.ready语法应该像 -

$(document).ready(function(){
});

答案 2 :(得分:2)

看起来好像你错过了结局

});

来自你的javascript上的document.ready()包装器。关闭那个,你应该没事。

以下是jsfiddle,显示您的代码确实在运行。