1

在我的 html 页面中，我有一个表单，其中包含一系列标记为“必填”的字段。如果有人忘记选择选项并单击提交，他们会被告知必须填写表格。但是，当我添加 jquery hide() 和 show() 时，所需的属性将被忽略，并且单击按钮会自动显示下一个 div，无论表单是否已填写。任何建议将不胜感激。

html/jquery：

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

            $("#ChatFormat").hide();
            //$("#QuestSubmit").bind(("click",function(){
            $("#QuestSubmit").click(function(){
                $("#ChatFormat").show();
                $("#QuestFormat").hide();
            });
        });
    </script>

</head>

<body>
    <div class="wrapper" id="QuestFormat">
        <div id="menu">
            <div style="clear:both"></div>
        </div>  
        <div class="container" id="chatbox">
            <form  id = "IntroQuest">
                <h4>Please take a moment to answer a few quick questions. &nbsp;&nbsp;Thank you.</h4>
                <h4>What is your gender?
                    <select id = "Gender" required>
                        <option value selected>-Select-</option>
                        <option value = "Male">Male</option>
                        <option value = "Female">Female</option>
                    </select>
                </h4>
                <h4>What is your ethnicity?
                    <select id = "Ethnicity" required>
                        <option value selected>-Select-</option>
                        <option value = "Caucasian">Caucasian</option>
                        <option value = "Hispanic/Latino">Hispanic / Latino</option>
                        <option value = "Asian">Asian</option>
                        <option value = "MiddleEastern">Middle Eastern</option>
                        <option value = "PacificIslander">Pacific Islander</option>
                        <option value = "NativeAmerican">Native American</option>
                        <option value = "Other">Other</option>
                    </select>

                <input class = "submitbutton" id = "QuestSubmit" type = "submit" value = "Begin Chat">
            </form>
        </div>

    </div>

    <div class="wrapper" id="ChatFormat">
        <div id="menu">
            <div style="clear:both"></div>
        </div>  
        <div class="container" id ="chatbox"></div>

        <form name="message" action="">

            <input id="input" class="bottom" name="usermsg" type="text" id="usermsg" size="63" />
            <input class="submitbutton"  name="submitmsg" type="submit"  id="submitmsg" value="Send" />

        </form>
    </div>
</body>

4

2 回答 2

1

click处理程序与表单无关。目前你的代码说，当点击元素时#QuestSubmit做一些事情。不，当#IntroQuest提交表单时做一些事情。

因此，您应该能够通过更改来修复它：

$("#QuestSubmit").click(function(){

至：

$("#IntroQuest").on("submit", function(){
于 2013-06-04T00:17:07.330 回答
1

在进行下一步之前，只需在其中输入一些简单的逻辑即可。见下文。

http://jsfiddle.net/hSHaE/

<body>
    <div class="wrapper" id="QuestFormat">
        <div id="menu">
            <div style="clear:both"></div>
        </div>  
        <div class="container" id="chatbox">
            <!-- You need to have this form actually do something or it will throw a "Please use POST request" error at the end -->
            <form  id = "IntroQuest"> 
                <h4>Please take a moment to answer a few quick questions. &nbsp;&nbsp;Thank you.</h4>
                <h4>What is your gender?
                    <select id = "Gender" required>
                        <option value = "" selected>-Select-</option>
                        <option value = "Male">Male</option>
                        <option value = "Female">Female</option>
                    </select>
                </h4>
                <h4>What is your ethnicity?
                    <select id = "Ethnicity" required>
                        <option value = "" selected>-Select-</option>
                        <option value = "Caucasian">Caucasian</option>
                        <option value = "Hispanic/Latino">Hispanic / Latino</option>
                        <option value = "Asian">Asian</option>
                        <option value = "MiddleEastern">Middle Eastern</option>
                        <option value = "PacificIslander">Pacific Islander</option>
                        <option value = "NativeAmerican">Native American</option>
                        <option value = "Other">Other</option>
                    </select>
                    <span id="errorMessage" style="display:hidden;color:red"></span>
                <input class = "submitbutton" id = "QuestSubmit" type = "submit" value = "Begin Chat">
            </form>
        </div>

    </div>

    <div class="wrapper" id="ChatFormat">
        <div id="menu">
            <div style="clear:both"></div>
        </div>  
        <div class="container" id ="chatbox"></div>

        <form name="message" action="">

            <input id="input" class="bottom" name="usermsg" type="text" id="usermsg" size="63" />
            <input class="submitbutton"  name="submitmsg" type="submit"  id="submitmsg" value="Send" />

        </form>
    </div>
</body>

这是与它一起使用的jquery：

        $(document).ready(function(){

            $("#ChatFormat").hide();
            //$("#QuestSubmit").bind(("click",function(){
            $("#QuestSubmit").click(function(){
                if($("#Ethnicity").val() == "" || $("#Gender").val() == "")
                {
                    $("#errorMessage").html("Please fill out all fields and try again.").show();
                }
                else
                {
                    $("#errorMessage").hide();
                    $("#ChatFormat").show();
                    $("#QuestFormat").hide();
                }
            });
        });

希望有帮助。如果这对您有用，请将其标记为答案。

于 2013-06-04T13:41:38.280 回答