javascript - 我如何允许某人选择他们的年龄并加载第 2 步或重定向他们？

Question

我在编辑登录页面时遇到问题。我需要让访客选择他们的年龄。24 岁或以上，他们转到第 2 步，如果他们选择 24 岁以下，他们会被发送到http://www.google.com。如果他们没有选择答案，他们会弹出“选择答案”。

<form action="index.php" method="post">
                    <div class="select-holder">
                        <div class="select-wrap">
                            <select name="age">
                                <option value="Select Your Answer" selected="selected">Select Your Answer</option>
                                <option value="1">I am 24+ years old. Let me in!</option>
                                <option value="5">I am under 24 years old.</option>
                            </select>
                        </div>  
                    </div>
                    <input value="Continue" class="submit-button" type="submit">
                </form>

在页面的底部：

 <!-- Move all javascripts to bottom for faster page loading -->
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/html5.js" type="text/javascript"></script>
    <script src="js/functions.js" type="text/javascript"></script>
    <script src="js/silentpopslim.js" type="text/javascript"></script>
    <input type="hidden" id="hidLocation" value="{Your CPVLab Domain here}" />
    <script type="text/javascript" src="/js/function.js"></script>      
    <!--    // This will be populated from functions.js when the user selects the age so in the 
            // second step, when it renders, it tracks the user's age.-->
    <img id="cpvlab_pix" src="">
    <img src="{Your URL to track direct visitors to the page}" />

这是function.js。我不确定所选选项在哪里触发特定结果（不是编程术语，但请在此处与我合作。

$（函数（）{

$(document).on('focusin', '.field, textarea', function() {
    if(this.title==this.value) {
        this.value = '';
    }
}).on('focusout', '.field, textarea', function(){
    if(this.value=='') {
        this.value = this.title;
    }
});
$(document).on('click', '.submit-button', function(){
    if($('select').find('option:selected').index() == 0) {
        alert('Select Your Answer.')
        return false;
    }
    if($('select').find('option:selected').index() != 1) {
        window.location('http://www.google.com');
        return false;
    } else {
        // $('.header_wrapper').slideUp();
        $('.step-1').hide();
        // $('.step-2').fadeIn(200);
        $('.step-2').fadeIn(800);
        return false;
    }
});

});

这是第 2 步的 HTML5.js，我猜？

/*! HTML5 Shiv pre3.5 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 
Uncompressed source: https://github.com/aFarkas/html5shiv */

score 0 · Accepted Answer

向该选择添加唯一 ID

<select name="age" id="age-select">

然后使用onChangeJavascript 事件

$('#age-select').change(function() {
    if ($(this).val() == 1) {
        alert("You can enter");
    } else {
        alert("You cannot enter");
    }
});

老实说，我不知道这与 HTML 5 有什么关系，以及您在问题末尾粘贴的一堆 Javascript 与什么有关。

score 0 · Accepted Answer

处理触发特定结果的选定选项的函数是 $(document).on('click') 函数。

当用户选择了“选择您的答案”选项时，第一个“if”块处理这种情况。它会显示一个警告框，上面写着“选择您的答案”。
第二个“if”块处理用户选择他们未满 24 岁的情况。它将用户重定向到 www.google.com。
最后的“else”块处理用户声明他们是 24 岁或以上的情况。它隐藏具有 CSS 类“step-1”的元素并淡入具有 CSS 类“step-2”的元素。

话虽如此，您也应该真正验证服务器端的任何重要信息，而不仅仅是客户端。大多数浏览器允许您对页面的 HTML 进行即时更改，这可用于手动更改

当然，无论如何，这大部分都是一个有争议的问题——那些决心进入你的网站的人只会选择“我已经 24 岁以上”。

javascript - 我如何允许某人选择他们的年龄并加载第 2 步或重定向他们？

2 回答 2

Related

Reference