禁用表單按鈕

我有以下表單。在所有字段完成之前，「繼續」按鈕將被禁用。我試過這個jfiddle和表單按預期工作，但在實際的.html文件在線它不起作用。例如，即使字段已完成，該按鈕始終處於禁用狀態，有什麼想法？禁用表單按鈕

<html> 
    <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="UE.js"></script> 
    <script type="text/javascript" language="javascript"> 
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').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> 



</head> 

<body> 
     <header id="header"> 
      <div class="header1"> 
       Accessibility Tools | Skip to Navigation | Skip to Content | Website A-Z | Sitemap | Report a Problem | Help 
      </div> 
     </header> 

    <div id="mainwrapper"> 

      <div id="contentwrapper"> 

       <div id="content"> 

       <div id="bulogo"> 
       <img src="bulogo.png" alt="BU Logo" style="width:220px;height:128px;"> 

       <div id="bulogo1"> 
       Payment Gateway 
       </div> 
       </div> 

       <p> 
       <div id="processorder"> 
       Process Order 
       </div> 

       <div id="viewordersummary"> 
       View Order Summary 
       </div> 

      <div id="lefthelp"> 
       Help 
       </div> 

       <div id="progressbar"> 
       <img src="PersonalProgressBar.png" alt="This is your progress"> 

       </div> 

     <form action="ue.html" method="post" id="nameform"> 
    <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">Account information</legend> 


           <div class="row"> 
            <div class="form-group col-md-4 col-sm-6"> 
             <label for="first-name">Username*:</label> 
             <input type="text" id="username" class="form-control" placeholder="Username" required=""> 
            </div> 
           </div> 

           <div class="row"> 
            <div class="form-group col-md-4 col-sm-6"> 
             <label for="password">Password*:</label><img src="help_icon.gif" title="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters." alt="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters."> 
             <input type="text" id="password" class="form-control" placeholder="Password" required=""> 
            </div> 
           </div> 

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



           </div> 

           <div id="form2"> 


            <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">Contact information</legend> 

    <div class="row"> 
          <div class="col-md-12"> 
           <div class="row"> 
            <div class="form-group col-md-3 col-sm-3"> 
             <label>Title</label> 
             <select name="title" id="title" class="form-control"> 
              <option value="1">Mr</option> 
              <option value="2">Mrs</option> 
               <option value="3">Miss</option> 
               <option value="4">Dr</option> 
                <option value="5">Ms</option> 
             </select> 

            </div> 


           </div> 
           </div> 
           <div class="row"> 
            <div class="form-group col-md-4 col-sm-6"> 
              <label for="first-name">First Names(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="row"> 
            <div class="form-group col-md-4 col-sm-6"> 
             <label for="password">Email*:</label> 
             <input type="text" id="email" class="form-control" placeholder="Email" required=""> 
            </div> 
           </div> 
          <div class="row"> 
            <div class="form-group col-md-4 col-sm-6"> 
             <label for="password">Re-enter Email*:</label> 
             <input type="text" id="email1" class="form-control" placeholder="Email" required=""> 
            </div> 
           </div> 
           </form> 


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


           </div> 
     <div id="form3" 


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

         </div> 
        </fieldset> 
       </div> 
      </form> 
     </div> 
     </div> 




       </div>

來源

2016-04-07 Thomas

這很重要嗎？ '' – zer00ne

它的工作是什麼問題？ https://jsfiddle.net/cmedina/7312thyn/ – CMedina

也許不是@ zer00ne – Thomas

將代碼包裝在document.ready中可能會有幫助。

$(document).ready(function(){ 
    $('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() { 
    if(allFilled()) $('#continue').removeAttr('disabled'); 
    }); 

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

如果是WordPress，請注意您不能使用$ for jQuery。您必須改用jQuery（'body input'），或者將代碼封裝在以下內容中：

$(function(){ 
    $(document).ready(function(){ 
     $('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() { 
     if(allFilled()) $('#continue').removeAttr('disabled'); 
     }); 

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

您是否在控制檯中看到任何錯誤？

來源

2016-04-07 20:22:22 admcfajn

輝煌。謝謝。第一個人工作 – Thomas

沒問題，我可以幫助很高興。 – admcfajn

將您的代碼在$（文件）。就緒（函數（）{//此處}）函數如下

$(document).ready(function(){ 

$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() { 
    if(allFilled()) 
     $('#continue').removeAttr('disabled'); 
}); 

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

});

來源

2016-04-07 20:23:56 kakurala

我會嘗試：

$('#continue').prop('disabled',!allFilled());

，而不是

if(allFilled()) $('#continue').removeAttr('disabled');

用戶可填寫所有字段，然後刪除一個。

來源

2016-04-07 20:26:41 jackomelly

禁用表單按鈕

回答

相關問題