Formular deaktivieren Schaltfläche

Ich habe folgendes Formular. Die Schaltfläche "Weiter" soll deaktiviert werden, bis alle Felder ausgefüllt sind. Ich habe dies auf jfiddle versucht und das Formular funktioniert wie vorgesehen, aber auf der tatsächlichen .html-Datei online funktioniert es nicht. Zum Beispiel ist die Schaltfläche immer deaktiviert, auch wenn die Felder ausgefüllt wurden, irgendwelche Ideen?Formular deaktivieren Schaltfläche

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

Quelle

2016-04-07 Thomas

Ist das wichtig? '' – zer00ne

Es funktioniert, was ist das Problem? https://jsfiddle.net/cmedina/7312thyn/ – CMedina

Wahrscheinlich nicht @ zer00ne – Thomas

Einpacken Ihres Codes in document.ready könnte helfen.

Wenn es WordPress ist, beachten Sie, dass Sie $ nicht für jQuery verwenden können. Sie müssen jQuery ('body input') verwenden, anstatt, oder Sie Code wickeln im folgenden:

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

Sind Sie Fehler in der Konsole zu sehen?

Quelle

2016-04-07 20:22:22 admcfajn

Brilliant. Vielen Dank. Der erste funktionierte – Thomas

Kein Problem, ich könnte Ihnen helfen. – admcfajn

Platz Code in $ (document) .ready (function() {// hier}) Funktion wie unten

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

});

Quelle

2016-04-07 20:23:56 kakurala

Ich würde versuchen:

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

statt

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

Benutzer können alle Felder ausfüllen und dann eine löschen.

Quelle

2016-04-07 20:26:41 jackomelly

Formular deaktivieren Schaltfläche

Antwort

Verwandte Themen