我如何允许别人选择自己的年龄?加载步骤2或重定向

How Do I Allow Someone To Select Their Age & Load Step 2 Or Redirect Them?

本文关键字:加载 重定向 何允许 别人 选择 自己的      更新时间:2023-09-26

我在编辑登陆页时遇到了麻烦。我需要让来访者选择他们的年龄。24岁或以上,他们进入第二步,如果他们选择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。我不确定所选择的选项触发了一定的结果(不是编程术语,但请与我在这里工作。

$(function() {  
    $(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 */
(function(a,b){function h(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function i(){var a=l.elements;return typeof a=="string"?a.split(" "):a}function j(a){var b={},c=a.createElement,f=a.createDocumentFragment,g=f();a.createElement=function(a){l.shivMethods||c(a);var f;return b[a]?f=b[a].cloneNode():e.test(a)?f=(b[a]=c(a)).cloneNode():f=c(a),f.canHaveChildren&&!d.test(a)?g.appendChild(f):f},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+i().join().replace(/'w+/g,function(a){return b[a]=c(a),g.createElement(a),'c("'+a+'")'})+");return n}")(l,g)}function k(a){var b;return a.documentShived?a:(l.shivCSS&&!f&&(b=!!h(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),g||(b=!j(a)),b&&(a.documentShived=b),a)}function p(a){var b,c=a.getElementsByTagName("*"),d=c.length,e=RegExp("^(?:"+i().join("|")+")$","i"),f=[];while(d--)b=c[d],e.test(b.nodeName)&&f.push(b.applyElement(q(b)));return f}function q(a){var b,c=a.attributes,d=c.length,e=a.ownerDocument.createElement(n+":"+a.nodeName);while(d--)b=c[d],b.specified&&e.setAttribute(b.nodeName,b.nodeValue);return e.style.cssText=a.style.cssText,e}function r(a){var b,c=a.split("{"),d=c.length,e=RegExp("(^|[''s,>+~])("+i().join("|")+")(?=[[''s,>+~#.:]|$)","gi"),f="$1"+n+"'':$2";while(d--)b=c[d]=c[d].split("}"),b[b.length-1]=b[b.length-1].replace(e,f),c[d]=b.join("}");return c.join("{")}function s(a){var b=a.length;while(b--)a[b].removeNode()}function t(a){var b,c,d=a.namespaces,e=a.parentWindow;return!o||a.printShived?a:(typeof d[n]=="undefined"&&d.add(n),e.attachEvent("onbeforeprint",function(){var d,e,f,g=a.styleSheets,i=[],j=g.length,k=Array(j);while(j--)k[j]=g[j];while(f=k.pop())if(!f.disabled&&m.test(f.media)){for(d=f.imports,j=0,e=d.length;j<e;j++)k.push(d[j]);try{i.push(f.cssText)}catch(l){}}i=r(i.reverse().join("")),c=p(a),b=h(a,i)}),e.attachEvent("onafterprint",function(){s(c),b.removeNode(!0)}),a.printShived=!0,a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea|object|iframe)$/i,e=/^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i,f,g;(function(){var c=b.createElement("a");c.innerHTML="<xyz></xyz>",f="hidden"in c,f&&typeof injectElementWithStyles=="function"&&injectElementWithStyles("#modernizr{}",function(b){b.hidden=!0,f=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle).display=="none"}),g=c.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var l={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:k};a.html5=l,k(b);var m=/^$|'b(?:all|print)'b/,n="html5shiv",o=!g&&function(){var c=b.documentElement;return typeof b.namespaces!="undefined"&&typeof b.parentWindow!="undefined"&&typeof c.applyElement!="undefined"&&typeof c.removeNode!="undefined"&&typeof a.attachEvent!="undefined"}();l.type+=" print",l.shivPrint=t,t(b)})(this,document)

为select添加一个唯一的ID

<select name="age" id="age-select">
然后使用onChange Javascript事件
$('#age-select').change(function() {
    if ($(this).val() == 1) {
        alert("You can enter");
    } else {
        alert("You cannot enter");
    }
});

我真的不知道这和HTML 5有什么关系以及你在问题末尾粘贴的一堆Javascript与什么有关

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

  • 第一个"if"块处理用户选择了"Select Your Answer"选项的情况。它会显示一个警告框,提示"选择您的答案"。

  • 第二个"if"块处理用户选择他们小于24的情况。它将用户重定向到www.google.com.

  • 最后一个"else"块处理用户声明他们是24岁或以上的情况。它隐藏CSS类为step-1的元素,淡入CSS类为step-2的元素。

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

当然,这些都是有争议的——那些决心进入你的网站的人无论如何都会选择"我24岁以上"。