如果没有选择任何内容,则不要提交表单,使用 jQuery ajaxForm 插件

发布于 2024-07-27 17:08:25 字数 2501 浏览 6 评论 0原文

我正在使用 jQuery 表单插件 来执行表单的“ajax”提交,其中包括大约有 4 个无线电选择。 但是,如果没有选择任何单选按钮,我希望表单不提交。

这是我到目前为止的尝试,在我在另一个 SO 答案和插件文档中找到的代码的帮助下:

$(document).ready(function() {

    var options = { target: '#response',
                    type: 'get',
                    beforeSubmit: ischecked
                    }

    $('#answer').ajaxForm(options);

});


function ischecked(formData, jqForm, options){


    if ($('input:radio', $('#answer').is(':checked')))
    {
            return true;
    }
    else
    {
        return false;
    }
}

我确信回调 ischecked 正在执行( alert()s 将触发,等等),但代码本身似乎没有检测到没有选择单选按钮,并且表单继续提交。

这是 HTML 表单:

<form action="score.php" id="answer">
    <div style="margin-top: 0pt;" class="ans">
        <input type="hidden" value="127" name="question_id"/>
        <input type="hidden" value="f5043d5122cec6eb981c9a2fc7a0a653" name="user_id"/>
        <input type="hidden" value="36" name="question_key"/>
        <input type="hidden" value="37" name="next_key"/>

        <ul id="answers">
            <li>
                <label>
                    <input type="radio" value="464" name="answer_id"/> mod_rewrite                         </label>
            </li>
            <li>
                <label>
                    <input type="radio" value="465" name="answer_id"/> XML Site Map                         </label>
            </li>
            <li>
                <label>
                    <input type="radio" value="466" name="answer_id"/> Tiny URL                         </label>
            </li>
            <li>
                <label>
                    <input type="radio" value="467" name="answer_id"/> both a) and b)                         </label>
            </li>
            <li>
                <label>
                    <input type="radio" value="468" name="answer_id"/> a), b) and c) can all be used to make it easier for Google to index your dynamically generated URLs.                         </label>
            </li>
                            </ul>
    </div>
    <input type="submit" value="Submit Answer and Get Result" id="answer_submission"/>
</form>

I'm using the jQuery Form plugin to do an 'ajax' submit of my form, which consists of about 4 radio selects. However, I want the form to not submit if none of the radio buttons have been selected.

Here's my attempt so far, helped by so code I've found in another SO answer and the plugin docs:

$(document).ready(function() {

    var options = { target: '#response',
                    type: 'get',
                    beforeSubmit: ischecked
                    }

    $('#answer').ajaxForm(options);

});


function ischecked(formData, jqForm, options){


    if ($('input:radio', $('#answer').is(':checked')))
    {
            return true;
    }
    else
    {
        return false;
    }
}

I'm sure that the callback ischecked is getting executed ( alert()s will fire, etc ), but the code itself does not appear to be detecting that no radio buttons are selected, and the form continues to be submitted.

Here's the HTML form:

<form action="score.php" id="answer">
    <div style="margin-top: 0pt;" class="ans">
        <input type="hidden" value="127" name="question_id"/>
        <input type="hidden" value="f5043d5122cec6eb981c9a2fc7a0a653" name="user_id"/>
        <input type="hidden" value="36" name="question_key"/>
        <input type="hidden" value="37" name="next_key"/>

        <ul id="answers">
            <li>
                <label>
                    <input type="radio" value="464" name="answer_id"/> mod_rewrite                         </label>
            </li>
            <li>
                <label>
                    <input type="radio" value="465" name="answer_id"/> XML Site Map                         </label>
            </li>
            <li>
                <label>
                    <input type="radio" value="466" name="answer_id"/> Tiny URL                         </label>
            </li>
            <li>
                <label>
                    <input type="radio" value="467" name="answer_id"/> both a) and b)                         </label>
            </li>
            <li>
                <label>
                    <input type="radio" value="468" name="answer_id"/> a), b) and c) can all be used to make it easier for Google to index your dynamically generated URLs.                         </label>
            </li>
                            </ul>
    </div>
    <input type="submit" value="Submit Answer and Get Result" id="answer_submission"/>
</form>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

濫情▎り 2024-08-03 17:08:25

所有 jQuery 方法都返回一个数组,如果找不到匹配项,则会返回一个空数组。 如果使用“if”检查“空”数组,它将返回 true。

尝试

function ischecked(formData, jqForm, options)
{
    return $('input[name="answer_id"]:checked').length > 0; //Checking that the number of checked items are more than zero. 

    //You should also be able to use $('#answers input:checked'). 

}

编辑:作者发布 HTML 后更新了代码。

All jQuery methods return an array, if it can not find a match, it will return an empty array. If you check an 'empty' array with 'if', it will return true.

Try

function ischecked(formData, jqForm, options)
{
    return $('input[name="answer_id"]:checked').length > 0; //Checking that the number of checked items are more than zero. 

    //You should also be able to use $('#answers input:checked'). 

}

EDIT: Updated the code after author posted HTML.

み青杉依旧 2024-08-03 17:08:25

尝试这个:

function ischecked(formData, jqForm, options)
{
    return $('input[name=answer]').is('checked');
}

Try this:

function ischecked(formData, jqForm, options)
{
    return $('input[name=answer]').is('checked');
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文