Javascript: проверка формы getElementById возвращает только первый элемент идентификатора

Мой скрипт проверки формы, похоже, работает, но getElementById считывает только первый идентификатор и по какой-то причине пропускает остальные. Это из-за проблем с закрытыми тегами? Если да, то куда мне их положить? или это еще одна причина, которую я как-то упускаю из виду. Пожалуйста помоги :(

Я благодарен за любую помощь, я смотрел на это в течение нескольких дней. Вот код.

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, который вводит его в мою базу данных. Еще раз спасибо за любую помощь.

~Николи


person TheMonkeyMan    schedule 17.08.2012    source источник
comment
Если это вопрос JavaScript, опубликуйте полученный HTML, а не PHP... Также я думаю, что вам лучше отделить логику DOM от логики проверки, кажется, много повторений и копирования/вставки. Взгляните на этот ответ stackoverflow.com/questions/9674148/   -  person elclanrs    schedule 17.08.2012


Ответы (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 вместо того, чтобы оборачивать все в операторы эха. Использование CSS для ваших стилей избавит вас от головной боли в будущем.

person Phil    schedule 17.08.2012
comment
Большое спасибо, Фил! Я знаю, что прошли годы с тех пор, как я задавал этот вопрос, но я все еще ценю отзывы и никогда не отвечал, как только вы решили его. Пожалуйста, примите мои извинения за задержку. - person TheMonkeyMan; 11.08.2018