选择表单项具有未定义的值

时间:2015-12-14 21:23:32

标签: javascript html hoisting

我已经阅读了一些有关吊装的内容,但我不确定它在这种情况下是如何适用的。我有一个动态显示和隐藏的选择值,并且此select元素的值始终未定义。请帮忙!感谢

HTML

<tr>
    <td>Type:</td>
    <td>
        <select id="type" onchange="rulesShown()">
            <option value="ATC">ATC</option>
            <option value="PILOT">PILOT</option>
        <select>
    </td>
</tr>
<tr id="rules">
    <td>Rules:</td>
    <td>
        <select id="rules">
            <option value="FAA">FAA</option>
            <option value="ICAO">ICAO</option>
        <select>
    </td>
</tr>

使用Javascript:

<script>
    function rulesShown() {
        if(document.getElementById("type").value=="ATC"){
            document.getElementById("rules").style.display = "";
            document.getElementById("rules").style.removeProperty( 'display' );
        }
        else{
            document.getElementById("rules").style.display = "none";
        }
    }
    function verifyData() {
        var email1 = document.getElementById("email1");
        var email2 = document.getElementById("email2");
        var comments = document.getElementById("comments").value;
        if(comments!=""){
            if(email2==null){
                    //submit form
                    submit();
            }
            else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email1.value)){  
                if(email1.value == email2.value) {
                    //submit form
                    submit();
                }
                else {
                    //emails dont match
                    alert('Email addresses do not match!');
                }
            }
            else{
                //invalid email address
                alert('Please enter a valid email address!');
            }
        }
        else{
            alert('Please enter some comments!');
        }
    }
    function submit(){
        var vid = <?php echo $user['vid'] ?>;
        var email = document.getElementById("email1").value;
        var type = document.getElementById("type").value;
        var rules = document.getElementById("rules").value;
        var comments = document.getElementById("comments").value;
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("page").innerHTML = xhttp.responseText;
            }
        }
        xhttp.open("POST", "/content/training/request/submit.php", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send("vid="+vid+"&email="+email+"&type="+type+"&rules="+rules+"&comments="+comments);
    }
</script>

不需要AJAX正在调用的文件。它只是简单地发布了规则&#39;。据我所知,这是一个javascript提升问题,但我不知道为什么。感谢

1 个答案:

答案 0 :(得分:1)

这与提升纯粹的javascript概念无关。您有两个具有相同ID的元素。一个<tr>和一个<select>。哪个被html禁止。其中一个含义是浏览器不能保证getElementById()

返回哪个元素