フォームボタンを無効にする

私は以下のフォームを持っています。「続行」ボタンは、すべてのフィールドが完了するまで無効にされます。私は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の場合、$をjQueryに使用できないことに注意してください。代わりにjQueryの（「ボディ入力」）を使用するか、または以下にあなたのコードをラップする必要があります。

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

以下のように$（ドキュメント）.ready（関数（）{//ここに}）関数内の場所にコードを私がしようとするだろう：

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

代わりの

を

ユーザーはすべてのフィールドに入力してから削除することができます。

出典

2016-04-07 20:26:41 jackomelly

フォームボタンを無効にする

答えて

関連する問題