Jquery表单提交功能不起作用

时间:2012-02-27 16:42:36

标签: jquery html form-submit

找到解决方案:

我不得不将该函数封装在另一个函数中。这是因为它与我在html文件中的其他Js库冲突。

为每个人欢呼!

<script type="text/javascript">
        ( function($) {
            // we can now rely on $ within the safety of our “bodyguard” function
            $(document).ready( function() { alert("nyah nyah! I’m able to use '$'!!!!");  
                            $("#keywordForm").submit(function(e) { alert('asshole');})});
        } ) ( jQuery ); 

上一个问题

即使我将表单绑定到jquery后,我的提交按钮也没有做任何事情。

没有显示警告信息,这意味着它甚至没有进入该功能。

我对这个问题抱有很大的帮助。 :(

    <script type="text/javascript">
        $(document).ready(function() { 
            $("form").submit(function(e) {
                e.preventDefault()
                alert("sometext"); 
                return false;
                updateKeywordSubscribed(e); 
            });
        });
        function updateKeywordSubscribed(e, keywords) {
            e.preventDefault();
            var option_form = jQuery(e.target);
            $.ajax({
                url : option_form.attr('action'),
                type : option_form.attr('method'),
                data : option_form.serialize(),
                dataType : 'json',
                success : function(response) {
                        console.log(response)
                        var result = response.data
                        if(result == 'False')
                            { alert('Failed')}
                        alert('some text');
            error : function(xhr, ajaxOptions, thrownError) {
                        // log ajax errors
                    }
            });
        }

    <!--function DoTheCheck() { {% for price in price_list %}
                    if($('input[type=checkbox]:checked').length == {{ price.no_of_keywords }}) 
                        { alert('Price to pay is $' + {{ price.price_of_each_keyword }} + '.0'); }
                {% endfor %}
                }-->

    </script>
</head>
<body>
    <div class="container">
        <!-- header -->
        <div id="header-wrap">
            <div id="header">
                <a name="top"></a>
                <h1 id="logo-text"><a href="/" title=""style="padding-left:32px; top: 80px;">Rosebud</a></h1>
                <p id="slogan"style="padding-left:32px;letter-spacing:0px;">
                    Your brand on the web...
                </p>
                <div  id="nav" style="padding-top: 15px;">
                    <ul>
                        <li>
                            <a href="/">Home</a>
                        </li>
                        <li>
                            <a href="/topic/">Topic</a>
                        </li>
                        <li>
                            <a href="/opinion/">Opinion</a>
                        </li>
                        <li>
                            <a href="/statistics/">Statistics</a>
                        </li>
                        <li>
                            <a href="/realtime/">Realtime</a>
                        </li>
                        <li>
                            <a href="/">Support</a>
                        </li>
                        <li>
                            <a href="/about/">About</a>
                        </li>
                        <li id="current">
                            <a href="/profile/">My Profile</a>
                        </li>
                    </ul>
                </div>
                {% if user.is_authenticated %}
                <p id="auth" style="margin: 0px;">
                    <a href="/">Welcome {{ user.username }} &nbsp; &nbsp; &nbsp;</a>
                    <a href="/accounts/logout">Log Out</a>
                </p>
                {% else %}
                <p id="auth" style="margin: 0px;">
                    <a href="/accounts/login/">Log In &nbsp; &nbsp; &nbsp;</a>
                    <a href="/accounts/register/">Register</a>
                </p>
                {% endif %}
            </div>
        </div>
        <!-- End of Header -->
        <div id="content-wrap">
            <!-- content -->
            <div id="content-home">
                <br />
                {% block content %} <h2 style="margin: 0px; margin-bottom: 20px;">Profile Page</h2>
                {% if user.is_authenticated %}
                <p id="auth" style="margin: 0px;">
                    {% for userprofile in object_list %}
                    {% if userprofile.username = user.username %}
                    <table style="margin: 0px; width: 600px; border: 0;">
                        <tbody>
                            <tr>
                                <td style="width: 250px; border: 0;"><label for="first_name">First Name:</label></td>
                                <td style="border: 0;">{{ userprofile.first_name }}</td>
                            </tr>
                            <tr>
                                <td style="border: 0;"><label for="last_name">Last Name: </label></td>
                                <td style="border: 0;">{{ userprofile.last_name }}</td>
                            </tr>
                            <tr>
                                <td style="border: 0;"><label for="email">Email: </label></td>
                                <td style="border: 0;">{{ userprofile.email }}</td>
                            </tr>
                            <tr>
                                <td style="border: 0;"><label for="username">Username: </label></td>
                                <td style="border: 0;">{{ userprofile.username }}</td>
                            </tr>
                            <tr>
                                <td style="border: 0;"><label for="keywords">Keywords currently subscribed to: </label></td>
                                <td style="border: 0;">{{ userprofile.keywords_subscribed }}</td>
                            </tr>
                            <tr>
                                <input type="button" name = "submit" id="keywordBtn" value="Click to refresh list of keywords subscribed" action="/refresh_list/" />
                                <INPUT TYPE=hidden NAME="username" Value = {{ userprofile.username }} >
                            </tr>
                        </tbody>
                    </table>
                    <br />
                     <h3 style="margin: 0px; margin-bottom: 20px;">Click the checkboxes for more subscriptions</h3>
                            <table>
                                <tbody>
                                    {% for keyword in keyword_list %}
                                        {% if forloop.counter|divisibleby:"3" %}
                                                <tr>
                                        {% endif %}
                                        <td>
                                            {% if keyword.keyword_name == userprofile.keywords_subscribed  %}
                                                <input type="checkbox" disabled="disabled" name="keywords" value="keywords"/>
                                            {% else %}
                                                <input type="checkbox" name="cb" value="keywords"  />
                                            {% endif %}
                                            {{keyword.keyword_name}}
                                            </td>
                                        {% if forloop.counter|add:"1"|divisibleby:"3" %}
                                                </tr>
                                        {% endif %}
                                    {% endfor %}
                                </tbody>
                            </table>                    
                    <br />
                    <h3 style="margin: 0px; margin-bottom: 20px;">Price of subscriptions</h3>
                    <div id = "subscription"></div>
                    <input type="button" value="Amount to pay!" onclick="DoTheCheck()">
                    <br />
                    </br>
                    <form id="keywordForm" method="post"> <!--action="/keyword_subscribe/"--> 
                    <P>Keyword: <INPUT TYPE="TEXT" NAME="keyword_input" Value = "Enter a new Keyword" class = 'hint'><BR><BR>
                    <!--<INPUT TYPE=hidden NAME="name_input" Value = {{ userprofile.username }} >-->
                    <INPUT TYPE="submit" Value="Crawl" name="crawl">
                    </P>
                    </form>

这是Jquery的一部分:

<script type="text/javascript">
        $(document).ready(function() { 
            $("#keywordForm").submit(function(e) {
                alert("sometext"); 
                return false;
            });
        });
</script>

3 个答案:

答案 0 :(得分:2)

您在updateKeywordSubscribed(e);之后致电return false;,因此它实际上从未调用过您的功能

答案 1 :(得分:1)

刚刚发现它......你在代码中遗漏了},,因此你的javascript无效。

修正了JavaScript:

function updateKeywordSubscribed(e, keywords) {
    e.preventDefault();
    var option_form = jQuery(e.target);
    $.ajax({
        url: option_form.attr('action'),
        type: option_form.attr('method'),
        data: option_form.serialize(),
        dataType: 'json',
        success: function(response) {
            console.log(response);
            var result = response.data;
            if (result == 'False') {
                alert('Failed');
            }
            alert('some text');
        }, // <================= That was missing!  ****************************
        error: function(xhr, ajaxOptions, thrownError) {
            // log ajax errors
        }
    });
}

$(document).ready(function() {
    $("form").submit(function(e) {
        e.preventDefault();
        alert("sometext");
        updateKeywordSubscribed(e);
        return false;
    });
});​

顺便说一下,在声明它之前使用了函数updateKeywordSubscribed,并在返回语句之后放置它,所以我的代码应该解决所有这些问题。

答案 2 :(得分:0)

您已重新申报表单提交事件两次,但无论如何这都应该有效。

删除此代码

$(document).ready(function() { 
     $("form").submit(function(e) {
        e.preventDefault()
        alert("sometext"); 
        return false;
        updateKeywordSubscribed(e); 
     });
});

看看http://jsfiddle.net/KcpKk/