当没有检查任何内容时,保持单选按钮表单不提交jquery

时间:2014-03-31 05:12:47

标签: jquery forms button submit radio

如果没有选中任何内容,我怎么办不提交,但是在检查完毕后提交它?它目前以任何一种方式提交。我在这里错过了什么?当没有选中任何内容时,它会抛出我想要的错误“请检查上面的选项之一”,然后转到目标网页。感谢您的任何帮助!

$(document).ready(function () {
    $("#submitbutton").click(function () {
        var none_answered = true;
        $("input:radio").each(function () {
            var name = $(this).attr("name");
            if ($("input:radio[name]:checked").length == 0) {
                none_answered = false;
            }
        });
        if (none_answered == false) {
            $('#texthere').html("Please check one of the options above");
        }
    })  
});

<style type="text/css">


#texthere
{
    color:red;
}

</style>

<body>
    <form>  
        <input type="radio" name="refer" value="Strategic Communication" >Strategic Communication</br>
        <input type="radio" name="refer" value="Journalism" >Journalism</br>
        <input type="radio" name="refer" value="Communication Studies" >Communication Studies</br>
        <div id="texthere"></div>

        <input id="submitbutton" type="submit" value="submit" formaction="http://www.utah.edu/">
    </form>     
</body>

1 个答案:

答案 0 :(得分:1)

如果要阻止默认行为,请使用.preventDefault()。例如,在您的情况下,表单提交事件,如果您想在表单发布之前验证输入并在任何错误时停止提交表单,请使用event.preventDefault()。

试试这个:

$(document).ready(function () {
    $("#submitbutton").click(function (e) {
        var none_answered = true;
        $("input:radio").each(function () {
            var name = $(this).attr("name");
            if ($("input:radio[name]:checked").length == 0) {
                e.preventDefault();
                none_answered = false;
            }
        });
        if (none_answered == false) {
            $('#texthere').html("Please check one of the options above");
        }
    })  
});

<强> DEMO