JavaScript表單錯誤？

我有以下形式。 JavaScript的工作原理是因爲我已經將它用於其他形式。基本上禁用「添加地址」（繼續）按鈕，直到所有字段完成。但是我添加了一個地址功能，用戶只需輸入他們的門牌號碼和街道，然後另外兩個字段（城鎮和郵編）就自動填充（此功能的JavaScript不顯示爲不需要）。因此，因爲這兩個字段會自動填充並且用戶沒有輸入，原始JavaScript不起作用，並且「添加地址」（繼續）按鈕保持禁用狀態。有任何想法嗎？JavaScript表單錯誤？

編輯：

我已經設法解決這個問題。我重新排列了這個表格，把'國家名單，門牌號碼，城鎮和郵政編碼'放在表格的開頭，而不是結尾。現在起作用了。不知道爲什麼它有所作爲。

 <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Payment Gateway</title> 
    <link rel="stylesheet" type="text/css" href="ue1.css"> 
    <link rel="stylesheet" type="text/css" href="bootstrap.css"> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 
    <script type="text/javascript" language="javascript"> 
     $(document).ready(function(){ 
     $('#firstname, #surname, #addresslist, #autocomplete').bind('keyup', function() { 
      if(allFilled()) $('#continue').removeAttr('disabled'); 
     }); 

     function allFilled() { 
     var filled = true; 
     $('body input').each(function() { 
     if($(this).val() == '') filled = false; 
     }); 
     return filled; 
     } 
     }); 
    </script> 

    <script> 
     var placeSearch, autocomplete; 
     var componentForm = { 
     locality: 'long_name', 
     postal_code: 'short_name' 
     }; 
    </script> 

    <form action="addaddresspage3.html" method="post" id="form" class="form"> 
     <div id="form1"> 

     <div class="row form-row form-bg"> 
      <div class="container"> 
       <div class="col-md-12 form-wrapper"> 
        <form role="form"> 
         <div class="form-content"> 
          <legend class="hd-default">Billing Address</legend> 


          <div class="row"> 
           <div class="form-group col-md-4 col-sm-6"> 
            <label for="first-name">First Name(s)*:</label> 
            <input type="text" id="firstname" class="form-control" placeholder="First Name(s)" required=""> 
           </div> 
          </div> 

          <div class="row"> 
           <div class="form-group col-md-4 col-sm-6"> 
            <label for="password">Surname*:</label> 
            <input type="text" id="surname" class="form-control" placeholder="Surname" required=""> 
           </div> 
          </div> 

          <div class="col-md-12"> 
           <div class="row"> 
            <div class="form-group col-md-3 col-sm-3"> 
             <label>Country of Home Address</label> 
             <select name="title" id="addresslist" class="form-control"> 
              <option value="1">Select Address</option> 
              <option value="1">United Kingdom</option> 
              <option value="2">Saudi Arabia</option> 
              <option value="3">Iran</option> 
              <option value="4">Nigeria</option> 
             </select> 

            </div> 
           </div> 
           <div class="row"> 
            <div class="form-group col-md-4 col-sm-6"> 


            <label for="street_<cfoutput>#Add#</cfoutput>">House number and street:</label> 
             <input type="text" name="street_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="autocomplete" size="54" maxlength="120" message="Please enter owner #Peoplecount#'s mailing address." onFocus="geolocate()" placeholder="Please enter your house number and street"> 


             <p> 

              <label for="city_<cfoutput>#Add#</cfoutput>">Town:</label> 
              <input type="text" name="city_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="locality" size="30" maxlength="50" message="Please enter owner #Peoplecount#'s mailing city." value="">  

             </p> 

             <label for="street_<cfoutput>#Add#</cfoutput>">Postcode:</label> 
             <input type="text" name="postal_#Add#" required="yes" id="postal_code" size="8" maxlength="12" message="Please enter owner #Peoplecount#'s mailing zip code." value=""> 
            </div> 
          </div> 
        </div> 
</div> 

</div> 
    <input type="submit" id="continue" disabled="disabled" value="Add Address"/> 
</div>

來源

2016-04-08 Alice

你應該只放你的相關代碼 –

我認爲這是所有相關的TBH @JoseRojas – Alice

設置輸入字段的值後，firer字段的keyup事件。

function setValues(){ 
    var my_field = $('#myfield'); 
    my_field.val('Alice'); 
    my_field.trigger('keyup'); 
}

在你的情況，我認爲是不夠只是做到這一點：

$('#firstname, #surname, #addresslist, #autocomplete').bind('keyup', function() { 
      if(allFilled()) $('#continue').removeAttr('disabled'); 
     }); 

$('#firstname, #surname, #addresslist, #autocomplete').keyup();

來源

2016-04-08 14:25:25 dquinonez

我認爲這會工作，但同樣的問題 – Alice

我改變了原來的：$（'＃firstname，#surname，#addresslist，#autocomplete'）。bind（'keyup'，function（）。was correct？ – Alice

我更新了答案，我認爲 – dquinonez

JavaScript表單錯誤？

回答

相關問題