Javascript:表单验证getElementById仅返回第一个id元素

Question

我的表单验证脚本似乎正在运行，但getElementById只读取第一个Id，并且由于某种原因跳过其余的Id。是由于封闭标签问题吗？如果是这样，我应该把它们放在哪里？还是我以某种方式忽略的另一个原因。请帮忙:(

我很感激任何帮助，我已经盯着这个好几天了。这是代码。

JS代码。

<script type='text/javascript'>
        function formValidator(){
            // Make quick references to our fields
            var name = document.getElementById('name');
            var addr = document.getElementById('addr');
            var phone = document.getElementById('phone');
            var state = document.getElementById('state');
            var username = document.getElementById('username');
            var email = document.getElementById('email');
            // Check each input in the order that it appears in the form!
            if(isAlphabet(name, "Please enter only letters for your name")){
                if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
                    if(isNumeric(phone, "Please enter only numeric values without any dashes")){
                        if(madeSelection(state, "Please Choose a State")){
                            if(lengthRestriction(username, 6, 8)){
                                if(emailValidator(email, "Please enter a valid email address")){
                                    return true;
                                }
                            }
                        }
                    }
                }
            }

            return false;
        }
        function notEmpty(elem, helperMsg){
            if(elem.value.length == 0){
                alert(helperMsg);
                elem.focus(); // set the focus to this input
                return false;
            }
            return true;
        }
        function isNumeric(elem, helperMsg){
            var numericExpression = /^[0-9]+$/;
            if(elem.value.match(numericExpression)){
                return true;
            }else{
                alert(helperMsg);
                elem.focus();
                return false;
            }
        }
        function isAlphabet(elem, helperMsg){
            var alphaExp = /^[a-zA-Z]+$/;
            if(elem.value.match(alphaExp)){
                return true;
            }else{
                alert(helperMsg);
                elem.focus();
                return false;
            }
        }
        function isAlphanumeric(elem, helperMsg){
            var alphaExp = /^[0-9a-zA-Z]+$/;
            if(elem.value.match(alphaExp)){
                return true;
            }else{
                alert(helperMsg);
                elem.focus();
                return false;
            }
        }
        function lengthRestriction(elem, min, max){
            var uInput = elem.value;
            if(uInput.length >= min && uInput.length <= max){
                return true;
            }else{
                alert("Please enter between " +min+ " and " +max+ " characters");
                elem.focus();
                return false;
            }
        }
        function madeSelection(elem, helperMsg){
            if(elem.value == "Select State..."){

    alert(helperMsg);
            elem.focus();
            return false;
        }else{
            return true;
        }
    }
    function emailValidator(elem, helperMsg){
        var emailExp = /^[w-.+]+@[a-zA-Z0-9.-]+.[a-zA-z0-9]{2,4}$/;
        if(elem.value.match(emailExp)){
            return true;
        }else{
            alert(helperMsg);
            elem.focus();
            return false;
        }
    }
    </script>

这是表单代码。

<?php
// Will not show if submitted once so client cant resubmit over and over again.
if ($submitted==2)
{
    echo "<a href="../"><h2>[ Return to main menu ]</h2></a>";
    // sets variables to a Null string
    $new_name='';
    $new_phone='';
    $new_email='';
    $new_city='';
    $new_state='';
    $new_cost='';
    $new_info ='';
}
else
{
  echo "<div class="container" >";
    echo "<div class="form_container" align="left" >";
    echo "<h2>Get Listed</h2>";
    echo "<i>All required fields are marked with a red asteriks (<font color="red"> * </font>)</i><br/><br/>";
    echo "<form action="#" onsubmit="return formValidator()" method="post" >";
          echo "<font color="red">*</font>&nbsp;<input type="checkbox" name="terms" value="yes" > 
          Yes, I agree to our <a href="../legal/index.php" target="_blank" >
          <i>Terms and Conditions</i></a><br/><br/>";
          echo "<h2>Limo Service Details</h2>";
            echo "<font color="red"/>*</font> Service Name: <br/>";
            echo "<input type="text" name="in_name" maxlength="60" size="26" id="name" value='$new_name' >";
            echo "<br/>";
            echo "<font color="red"/>*</font> Phone: <br/>";
            echo "<input type="text" name="in_phone" maxlength="60" size="26" id="phone" value='$new_phone' >";           
            echo "<br/>";
            echo "<font color="red"/>*</font> Email: <br/>";
            echo "<input type="text" name="in_email" maxlength="60" size="26" id="email" value='$new_email' >";           
            echo "<br/>";
            echo "<font color="red">*</font> Cost: <br/>";
            echo "<input type="text" name="in_cost" maxlength="30" size="11" value='$new_cost' >";          
            echo "&nbsp;&nbsp;";
            echo "<select style="width: 120px" name="in_rate" >";
                echo "<option value="daily" selected>Daily</option>";
                echo "<option value="hourly">Hourly</option>";
                echo "</select>";
            echo "<br/>";                           
            echo "<font color="red">*</font> City: <select name="in_city" style="width: 245px" >";
                echo "<option value="">Select City...</option>";
                echo "<option value="Atlanta">Atlanta</option>";
                echo "<option value="Atlantic City">Atlantic City</option>";
                echo "<option value="Austin">Austin</option>";
                echo "<option value="Baltimore">Baltimore</option>";
                echo "<option value="Boston">Boston</option>";
                echo "<option value="Charlotte">Charlotte</option>";
                echo "<option value="Chicago">Chicago</option>";
                echo "<option value="Cincinnati">Cincinnati</option>";
                echo "<option value="Columbus">Columbus</option>";
                echo "<option value="Dallas">Dallas</option>";
                echo "<option value="Denver">Denver</option>";
                echo "<option value="Detroit">Detroit</option>";
                echo "<option value="Fort Lauderdale">Fort Lauderdale</option>";
                echo "<option value="Honolulu">Honolulu</option>";
                echo "<option value="Houston">Houston</option>";
                echo "<option value="Indianapolis">Indianapolis</option>";
                echo "<option value="Irvine">Irvine</option>";
                echo "<option value="Las Vegas">Las Vegas</option>";
                echo "<option value="Los Angeles">Los Angeles</option>";
                echo "<option value="Miami">Miami</option>";
                echo "<option value="Minneapolis">Minneapolis</option>";
                echo "<option value="Nashville">Nashville</option>";
                echo "<option value="Newark">Newark</option>";
                echo "<option value="New York">New York</option>";
                echo "<option value="Oklahoma">Oklahoma City</option>";
                echo "<option value="Orlando">Orlando</option>";
                echo "<option value="Portland">Portland</option>";
                echo "<option value="Philadelphia">Philadelphia</option>";
                echo "<option value="Phoenix">Phoenix</option>";
                echo "<option value="Raleigh">Raleigh</option>";
                echo "<option value="Sacramento">Sacramento</option>";
                echo "<option value="Salt Lake City">Salt Lake City</option>";
                echo "<option value="San Antonio">San Antonio</option>";
                echo "<option value="San Diego">San Diego</option>";
                echo "<option value="San Francisco">San Francisco</option>";
                echo "<option value="Tampa">Tampa</option>";
                echo "</select>";
            echo "<br/>";
            // City2
            echo "&nbsp;&nbsp;&nbsp;City 2: <select name="in_city2" style="width: 245px" >";
                echo "<option value="">Select City...</option>";
                echo "<option value="Atlanta">Atlanta</option>";
                echo "<option value="Atlantic City">Atlantic City</option>";
                echo "<option value="Austin">Austin</option>";
                echo "<option value="Baltimore">Baltimore</option>";
                echo "<option value="Boston">Boston</option>";
                echo "<option value="Charlotte">Charlotte</option>";
                echo "<option value="Chicago">Chicago</option>";
                echo "<option value="Cincinnati">Cincinnati</option>";
                echo "<option value="Columbus">Columbus</option>";
                echo "<option value="Dallas">Dallas</option>";
                echo "<option value="Denver">Denver</option>";
                echo "<option value="Detroit">Detroit</option>";
                echo "<option value="Fort Lauderdale">Fort Lauderdale</option>";
                echo "<option value="Honolulu">Honolulu</option>";
                echo "<option value="Houston">Houston</option>";
                echo "<option value="Indianapolis">Indianapolis</option>";
                echo "<option value="Irvine">Irvine</option>";
                echo "<option value="Las Vegas">Las Vegas</option>";
                echo "<option value="Los Angeles">Los Angeles</option>";
                echo "<option value="Miami">Miami</option>";
                echo "<option value="Minneapolis">Minneapolis</option>";
                echo "<option value="Nashville">Nashville</option>";
                echo "<option value="Newark">Newark</option>";
                echo "<option value="New York">New York</option>";
                echo "<option value="Oklahoma">Oklahoma City</option>";
                echo "<option value="Orlando">Orlando</option>";
                echo "<option value="Portland">Portland</option>";
                echo "<option value="Philadelphia">Philadelphia</option>";
                echo "<option value="Phoenix">Phoenix</option>";
                echo "<option value="Raleigh">Raleigh</option>";
                echo "<option value="Sacramento">Sacramento</option>";
                echo "<option value="Salt Lake City">Salt Lake City</option>";
                echo "<option value="San Antonio">San Antonio</option>";
                echo "<option value="San Diego">San Diego</option>";
                echo "<option value="San Francisco">San Francisco</option>";
                echo "<option value="Tampa">Tampa</option>";
                echo "</select>";
            echo "<br/>";           
            // City3
            echo "&nbsp;&nbsp;&nbsp;City 3: <select name="in_city3" style="width: 245px" >";
                echo "<option value="">Select City...</option>";
                echo "<option value="Atlanta">Atlanta</option>";
                echo "<option value="Atlantic City">Atlantic City</option>";
                echo "<option value="Austin">Austin</option>";
                echo "<option value="Baltimore">Baltimore</option>";
                echo "<option value="Boston">Boston</option>";
                echo "<option value="Charlotte">Charlotte</option>";
                echo "<option value="Chicago">Chicago</option>";
                echo "<option value="Cincinnati">Cincinnati</option>";
                echo "<option value="Columbus">Columbus</option>";
                echo "<option value="Dallas">Dallas</option>";
                echo "<option value="Denver">Denver</option>";
                echo "<option value="Detroit">Detroit</option>";
                echo "<option value="Fort Lauderdale">Fort Lauderdale</option>";
                echo "<option value="Honolulu">Honolulu</option>";
                echo "<option value="Houston">Houston</option>";
                echo "<option value="Indianapolis">Indianapolis</option>";
                echo "<option value="Irvine">Irvine</option>";
                echo "<option value="Las Vegas">Las Vegas</option>";
                echo "<option value="Los Angeles">Los Angeles</option>";
                echo "<option value="Miami">Miami</option>";
                echo "<option value="Minneapolis">Minneapolis</option>";
                echo "<option value="Nashville">Nashville</option>";
                echo "<option value="Newark">Newark</option>";
                echo "<option value="New York">New York</option>";
                echo "<option value="Oklahoma">Oklahoma City</option>";
                echo "<option value="Orlando">Orlando</option>";
                echo "<option value="Portland">Portland</option>";
                echo "<option value="Philadelphia">Philadelphia</option>";
                echo "<option value="Phoenix">Phoenix</option>";
                echo "<option value="Raleigh">Raleigh</option>";
                echo "<option value="Sacramento">Sacramento</option>";
                echo "<option value="Salt Lake City">Salt Lake City</option>";
                echo "<option value="San Antonio">San Antonio</option>";
                echo "<option value="San Diego">San Diego</option>";
                echo "<option value="San Francisco">San Francisco</option>";
                echo "<option value="Tampa">Tampa</option>";
                echo "</select>";
            echo "<br/>";
            // State
            echo "<font color="red">*</font> State: <select name="in_state" id="state" style="width: 245px" >";
                echo "<option>Select State...</option>";
                echo "<option value="Alabama">Alabama</option>";
                echo "<option value="Alaska">Alaska</option>";
                echo "<option value="Arizona">Arizona</option>";
                echo "<option value="Arkansas">Arkansas</option>";
                echo "<option value="California">California</option>";
                echo "<option value="Colorado">Colorado</option>";
                echo "<option value="Connecticut">Connecticut</option>";
                echo "<option value="Delaware">Delaware</option>";
                echo "<option value="Florida">Florida</option>";
                echo "<option value="Georgia">Georgia</option>";
                echo "<option value="Hawaii">Hawaii</option>";
                echo "<option value="Idaho">Idaho</option>";
                echo "<option value="Illinois">Illinois</option>";
                echo "<option value="Indiana">Indiana</option>";
                echo "<option value="Iowa">Iowa</option>";
                echo "<option value="Kansas">Kansas</option>";
                echo "<option value="Kentucky">Kentucky</option>";
                echo "<option value="Louisiana">Louisiana</option>";
                echo "<option value="Maine">Maine</option>";
                echo "<option value="Maryland">Maryland</option>";
                echo "<option value="Massachusetts">Massachusetts</option>";
                echo "<option value="Michigan">Michigan</option>";
                echo "<option value="Minnesota">Minnesota</option>";
                echo "<option value="Mississippi">Mississippi</option>";
                echo "<option value="Missouri">Missouri</option>";
                echo "<option value="Montana">Montana</option>";
                echo "<option value="Nebraska">Nebraska</option>";
                echo "<option value="Nevada">Nevada</option>";
                echo "<option value="New Hampshire">New Hampshire</option>";
                echo "<option value="New Jersey">New Jersey</option>";
                echo "<option value="New Mexico">New Mexico</option>";
                echo "<option value="New York">New York</option>";
                echo "<option value="North Carolina">North Carolina</option>";
                echo "<option value="North Dakota">North Dakota</option>";
                echo "<option value="Ohio">Ohio</option>";
                echo "<option value="Oklahoma">Oklahoma</option>";
                echo "<option value="Oregon">Oregon</option>";
                echo "<option value="Pennsylvania">Pennsylvania</option>";
                echo "<option value="Rhode Island">Rhode Island</option>";
                echo "<option value="South Carolina">South Carolina</option>";
                echo "<option value="South Dakota">South Dakota</option>";
                echo "<option value="Tennessee">Tennessee</option>";
                echo "<option value="Texas">Texas</option>";
                echo "<option value="Utah">Utah</option>";
                echo "<option value="Vermont">Vermont</option>";
                echo "<option value="Virginia">Virginia</option>";
                echo "<option value="Washington">Washington</option>";
                echo "<option value="West Virginia">West Virginia</option>";
                echo "<option value="Wisconsin">Wisconsin</option>";
                echo "<option value="Wyoming">Wyoming</option>";
                echo "</select>";
            echo "<br/><br/>";
            //Additional Info
            echo "&nbsp;&nbsp;Additional Info: ";
            echo "<br/>";           
            echo "<textarea rows="5" cols="26" name="in_info" >$new_info";
            echo "</textarea>";
            echo "<font size="1">&nbsp;&nbsp;(Maximum characters: 500)</font>";
            echo "<br/>";
            //Submit Button
            echo "<input type="hidden" name="submission" value="1">"; 
            echo "<center><input type="submit" value="LIST ME" class="button2" /></center>";          
    echo "</form>";
    echo "</div>";
  echo "</div>";
}
?>

一旦验证，它就会被发送到一个php mysql文件，该文件将其输入到我的数据库中。再次感谢您的任何帮助。

~尼科利

Answer 1

你的代码没有做你认为的那样。

var name = document.getElementById('name');

返回：

<input type="text" name="in_name" maxlength="60" size="26" id="name" value='$new_name' >

相反，要获取该值，您需要执行以下操作：

var name = document.getElementById('name').value;

这应该可以解决您当前的问题。

另一方面，您可能应该考虑关闭该 php 标签，而不是将所有内容包装在 echo 语句中。将CSS用于您的样式也将在未来为您省去很多麻烦。