javascript - 追加のコンテンツを表示するための optgroup の選択オプション値の取得

Question

私はフォーラムを閲覧し、これらのリンクに記載されているいくつかのことを試しました: Check if the dropdown's selected option is not the first with JavaScript

私はまだJavascriptの知識がかなり基本的で、主にフォームアクションに使用しています。私は（まだ）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>

現在、「お問い合わせフォーム」ボタンをクリックすると、ページが更新されて最初のボタンに戻ります。

そして、説明と助けをいただければ幸いです！ありがとう。

score 1 · Accepted Answer

2つのこと...

まず、次のように、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";
}

score 0 · Accepted Answer

エミリー

<button>に含まれている場合はボタン<form>として機能し、<submit>クリックするとshowForm()ページが呼び出されて更新されます。<button>フォームの外にある場合は機能するはずです。

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

お役に立てれば！

javascript - 追加のコンテンツを表示するための optgroup の選択オプション値の取得

2 に答える 2

Related

Reference