1

Web サイトに予約フォームがありますが、10 人以上を選択すると、最大 9 人しか収容できないため、ブースのフォーム オプションが表示されなくなります。これはすべて機能しており、これが私のスクリプトです。

$(document).ready(function(){
$('#form1_people').on('change',function(){
    if( $(this).val()==="10+ People"){
    $("#tenplus").hide()
        $("#booth-notice").show()
    }
    else{
    $("#tenplus").show()
        $("#booth-notice").hide()
        }
    });
});

私の問題はホームページにあり、ユーザーが入力すると大きなフォームが自動更新される簡単な予約フォームがあります。しかし、ホームページから 10 人以上を選択すると、JavaScript が実行されません。

この JavaScript をすべてのページに配置する必要があると思いましたか? これを試しましたが、うまくいきません。私はアイデアがありません。誰？

ありがとう

アップデート！！！！

                <div>
            <label for="form1_people">How many people:</label>
                <select id="form1_people" name="people" class="venue-select">
                    <option value="Select how many people">Select how many people</option>
                    <option value="2 People">2 People</option>
                    <option value="3 People">3 People</option>
                    <option value="4 People">4 People</option>
                    <option value="5 People">5 People</option>
                    <option value="6 People">6 People</option>
                    <option value="7 People">7 People</option>
                    <option value="8 People">8 People</option>
                    <option value="9 People">9 People</option>
                    <option value="10 People">10 People</option>
                    <option value="10+ People">10+ People</option>
                </select>
            </div>

            <div id="booth-notice" style="display:none;">
                <label style="color: #ed1c24!important; font-size: 16px!important; line-height: 1.4em!important;"><em style="color: #ed1c24!important;">Customer Notice * Booths are not available for parties with more than 10 people</em></label>
            </div>

            <div id="tenplus"><!-- HIDE THESE IF THERE IS MORE THAN 10 PEOPLE -->           
                <div>
                    <label for="form1_booth">Would you like a Booth: <em>*Liverpool &amp; Manchester Only</em> <a href="#">What's this?</a></label>
                    <select id="form1_booth" name="booth" class="venue-select">
                        <option value="Please select an option">Please select an option</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>

                <div>
                    <label for="form1_booth-package">We have some Booth Packages <a href="#">What's this?</a></label>
                    <select id="form1_booth-package" name="booth-package" class="venue-select">
                        <option value="Select an option if wanting a booth">Select an option if wanting a booth</option>
                        <option value="Bier Package">Bier Package</option>
                        <option value="Cocktail Package">Cocktail Package</option>
                        <option value="Just a booth please">Just a booth please</option>
                    </select>
                </div>

            </div><!-- HIDE THESE IF THERE IS MORE THAN 10 PEOPLE -->
4

2 に答える 2

1

ロジックの何かを変更する必要があると思います。私が何をすべきかを説明します。

JavaScript は正しく記述されていますが、「変更」イベントが発生した場合にのみ呼び出されます。したがって、ホームページからの投稿後にページが読み込まれると、選択値はすでに変更されており、関数は呼び出されません。

このようなことができます。あまりエレガントではありませんが、あなたの仕事をすることができます:

$(document).ready(function(){
    boothUpdate(); // This function is called at every page load
    $('#form1_people').on('change',function(){
        boothUpdate(); // This function is called at every select change
    });    
});

function boothUpdate() {
    if( $(this).val()==="10+ People"){
        $("#tenplus").hide()
        $("#booth-notice").show()
    }
    else {
        $("#tenplus").show()
        $("#booth-notice").hide()
    }
}
于 2013-09-26T15:50:11.207 に答える
0

.trigger('change');関数の最後に追加することで、これをソートすることができました。

完全な作業スクリプトはこちら:

$(document).ready(function(){   
    $('#form1_people').on('change',function(){
        if( $(this).val()=="10+ People"){
            $("#tenplus").hide()
            $("#booth-notice").show()
        }
        else{
            $("#tenplus").show()
            $("#booth-notice").hide()
       }
   }).trigger('change');
});

みんな助けてくれてありがとう...

于 2013-09-27T09:46:06.080 に答える