Question

我浏览了论坛并尝试了以下链接中提到的一些内容： Check if dropdown's selected option is not the first with JavaScript Get index of select option in an optgroup with jquery

我对Javascript的了解仍然很基础，主要是将它用于表单操作。我从来没有使用过jQuery（还有），从我读过的内容来看，我不需要做什么（所以请不要使用jQuery解决方案！）

我要做的是根据点击/选择的按钮/选项显示内容。第1步工作正常（只显示“非学生”按钮时的下拉框。没有问题。

第2步我现在被困住了。（而且我知道第3步会有问题，但我还没有看到它们。）

步骤2需要根据是否选择了下拉列表中的选项来显示表单。可能（我还不确定）我将要求为所选的每个选项提供不同的表格（但我想我有了基本代码，我可以使用“if”和“else”来解决这个问题。）

这是我的HTML文档，其中包含JS编码。

<head>
<title>Tims Form</title>
<style type="text/css">
.errormsg {
    color: red;
    font-style: italic;
    display:none;
    }

#interest {
    display:none;
    }

#msgform {
    display:none;
    }
</style>

<script type="text/javascript">
    function reveal()
        {
            document.getElementById("interest").style.display="block";
        }

    function hide()
        {
            document.getElementById("interest").style.display = "none";
        }

    function showForm()
            /* to display form only when dropdown selection made and submit-button pressed */
        {
            var sel=document.getElementById('interest_choice');

            if (sel.options[sel.selectedIndex].value == "0")
                {
                    document.getElementById("msgform").style.display = "block";
                    document.getElementById("selection_error").style.display = "none";
                }

            else { document.getElementById("msgform").style.display = "none"; 
                    document.getElementById("selection_error").style.display = "block";
                }
        }

    function checkForm()
        {
            var is_valid=true;
            var email=document.getElementById("email");

            /* not a blank field validation */
            if (document.getElementById("firstname").value == "")
                {
                    document.getElementById("firstname_error").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("firstname_error").style.display = "none"; }

            if (document.getElementById("lastname").value == "")
                {
                    document.getElementById("lastname_error").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("lastname_error").style.display = "none"; }

            if (document.getElementById("subject").value == "")
                {
                    document.getElementById("subject_error").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("subject_error").style.display = "none"; }

            if (document.getElementById("message").value == "")
                {
                    document.getElementById("message_error").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("message_error").style.display = "none"; }

            /* email validation */
            if (email.value =="")
                {
                    document.getElementById("email_blank").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("email_blank").style.display = "none"; }

            if (email.value.indexOf("@") == -1)
                {
                    document.getElementById("email_valid").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("email_valid").style.display = "none"; }

            if (email.value.indexOf("@") ==0)
                {
                    document.getElementById("email_valid").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("email_valid").style.display = "none"; }

            if (email.value.lastIndexOf(".")<email.value.indexOf("@") )
                {
                    document.getElementById("email_blank").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("email_blank").style.display = "none"; }

            if (email.value.lastIndexOf(".")>((email.value.length*1)-3))
                {
                    document.getElementById("email_valid").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("email_valid").style.display = "none"; }

            /* Phone data must be numeric validation */
            if (document.getElementById("phone").value="")
                {
                    document.getElementById("phone_error").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("phone_error").style.display = "none"; }

            if (isNaN(document.getElementById("phone").value))
                {
                    document.getElementById("phone_error").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("phone_error").style.display = "none"; }

        return is_valid;
        }

</script>

</head>

<body>
<!-- onclick to show the div with id="interest" when Not A Student is selected -->
    I am: <br/>
    <button id="student" onclick="hide()">A Student</button>
    <button id="not_student" onclick="reveal()">Not A Student</button>

<!-- if not a student -->
<div id="interest">
What area are you interested in studying?

<!-- dropdown (select) list with option groups 
need a submit button to return the value before the form will show?
-->
<form>
<select id="interest_choice">
    <optgroup label="Arts">
        <option value="arts">Arts degree</option>
    </optgroup>
    <optgroup label="Business/Economics">
        <option value="be_undergrad">My first degree (undergraduate)</option>
        <option value="be_postgrad">Postgraduate</option>
    </optgroup>
    <optgroup label="Science">
        <option value="science">Science degree</option>
    </optgroup>
    <optgroup label="Human Sciences">
        <option value="hs_undergrad">Undergraduate</option>
        <option value="psych_postgrad">Postgraduate Psychology</option>
        <option value="ling_postgrad">Postgraduate Linguistics</option>
        <option value="edu_postgrad">Postgraduate Education</option>
    </optgroup>
</select>
<button onclick="showForm()">Enquiry Form</button>
<div class="errormsg" id="selection_error">Please make a selection above.</div>
</form>
</div>

<!-- form -->
<div id="msgform">
<form onsubmit="return checkForm();">
    <fieldset>
        <label>
            First Name:
            <input type="text" name="firstname" id="firstname">
            <div class="errormsg" id="firstname_error">Please enter your first name</div>
        </label>
        <br/>
        <label>
            Last Name:
            <input type="text" name="lastname" id="lastname">
            <div class="errormsg" id="lastname_error">Please enter your last name</div>
        </label>
        <br/>
        <label>
            Email:
            <input type="text" name="email" id="email">
            <div class="errormsg" id="email_blank">Please enter your email address</div>
            <div class="errormsg" id="email_valid">Please enter a valid email address</div>
        </label>
        <br/>
        <label>
            Phone:
            <input type="text" name="phone" id="phone">
            <div class="errormsg" id="phone_error">Please enter a numeric phone number. Do not include ().</div>
        </label>
        <br/>
        <label>
            Subject: (Please only submit one question per enquiry. You can submit multiple enquiries.)<br/>
            <input type="text" name="subject" id="subject">
            <div class="errormsg" id="subject_error">Please enter a subject</div>
        </label>
        <br/>
        <label>
            Message:
            <textarea name="message" id="message"></textarea>
            <div class="errormsg" id="message_error">Please enter a message</div>
        </label>
    </fieldset>
    <input type="submit" value="Submit Form">
</form>
</div>

</body>

目前，当我点击“查询表单”按钮时，它只会将页面刷新回第一个按钮。

理解和帮助将不胜感激！感谢。

Answer 1

两件事......

首先，使用触发showForm的按钮，如：

<button onclick="showForm()">Enquiry Form</button>

将它放在表单元素之外，如：

</form>
<button onclick="showForm()">Enquiry Form</button>
<div class="errormsg" id="selection_error">Please make a selection above.</div>

该按钮会在表单标签内自动提交表单，因此会刷新页面。

其次在你的checkForm函数中，你检查的值似乎是错误的......试试这个：

if (sel.options[sel.selectedIndex].value)
{
    document.getElementById("msgform").style.display = "block";
    document.getElementById("selection_error").style.display = "none";
}

else { document.getElementById("msgform").style.display = "none"; 
    document.getElementById("selection_error").style.display = "block";
}

Answer 2

艾米丽，

当<button>中包含<form>时，它会充当<submit>按钮，点击后会调用showForm()并刷新页面。如果<button>在表单之外，它应该有效。

</form>
<button onclick="showForm()">Enquiry Form</button>
<div class="errormsg" id="selection_error">Please make a selection above.</div>

希望这有帮助！

获取optgroup中的选择选项值以显示额外内容

2 个答案: