document.getElementsByName（）不起作用

Question

我是javascript的新手。我有一個網絡表單，我想從表單中獲取一些字段。當用戶完成輸入時，變量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將是不確定的，使用

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"); 
 
    } 
 
}

<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>