document.getElementsByName（）不起作用

Question

我是javascript的新手。我有一个Web表单，我想从表单中获取一些字段。当用户完成输入时，变量a未定义，是否意味着输入的值未保存在a中。

    function validateForm() {
        var a = document.getElementsByName("Firstname").value;
            if (a == null || a == "") {
                alert  ("please fill firstname box");
                return false;
             }
        else {
                $('.box2').hide();
                $('#education').fadeIn();
                $('#edu-step').addClass('active');
                $("html, body").animate({ scrollTop: 0 }, "slow");
            }
    }

Answer 1

document.getElementsByName("Firstname")会返回一个元素列表，因此document.getElementsByName("Firstname").value将是未定义的，请使用

＆＃13;

＆＃13;

function validateForm() {
    var a = document.getElementsByName("Firstname")[0].value;
    alert(a);
    if (a == null || a == "") {
        alert  ("please fill firstname box");
        return false;
    }

    else {
        $('.box2').hide();
        $('#education').fadeIn();
        $('#edu-step').addClass('active');
        $("html, body").animate({ scrollTop: 0 }, "slow");
    }
}

＆＃13;

 <form class="form" id="form1" runat="server">
    <div class="row">
        <div class="title H3" id="head-text">
            پرسشنامه استخدام
        </div>
        <div class="col-12 purchase_steps">
            <a class="steps active" id="person-step">
                <div class="circle-step" id="step1"></div>
                <div class="line-step"></div>
                <label for="textstep" class="text-step">مشخصات فردی</label>
            </a>
            <a class="steps" id="edu-step">
                <div class="circle-step" id="step2"></div>
                <div class="line-step"></div>
                <label for="textstep" class="text-step">سوابق تحصیلی و آموزشی </label>

            </a>
            <a class="steps" id="work-step">
                <div class="circle-step" id="step3"></div>
                <div class="line-step"></div>
                <label for="textstep" class="text-step">سوابق کاری</label>


            </a>
            <a class="steps" id="other-step">
                <div class="circle-step" id="step4"></div>
                <div class="line-step"></div>
                <label for="textstep" class="text-step">اطلاعات تکمیلی</label>

            </a>

        </div>
    </div>

    <div id="div1">

        <div class="step1">

            <div class="box2" id="personal-info">
                <div class="row">
                    <div class="step1 col-12">
                        <div class="title H4">
                            مشخصات فردی<hr />
                        </div>
                        <div class="personal-info">
                            <div class="col-6">
                                <label for="FirstName" id="Label2" text="Label" runat="server">نام</label>
                                <input type="text" id="FirstName" name="Firstname" placeholder="نام" lang="fa-IR" runat="server" required="required" />
                            </div>
                            <div class="col-6">
                                <label for="Lname">نام خانوادگی</label>
                                <input type="text" id="lastname" name="lastname" placeholder=" نام خانوادگی" lang="fa-IR" runat="server" required="required" />
                            </div>
                     
                        </div>


                        <div class="col-12">
                            <div class="col-12">
                                <button type="button" class="nextStep" onclick="validateForm()">مرحله بعد</button>

                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
    <div id="div2">
       
    </div>

    <div id="div3">
      

    </div>
    <div id="div4">
        
    </div>
</form>

＆＃13;

＆＃13;

＆＃13;