CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Thomas
Thomas

Reputation: 79

Disable form Button

I have the following form. The 'continue' button is meant to be disabled until all fields have been completed. I have tried this on jfiddle and the form works as intended, but on the actual .html file online it does not work. For example the button is always disabled even when the fields have been completed, any ideas? 

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

Upvotes: 1

Views: 98

Answers (3)

jackomelly
jackomelly

Reputation: 543

I would try: 

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

instead of

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

Users may fill out all fields, and then delete one.

Upvotes: 0

kakurala
kakurala

Reputation: 824

Place your code in $(document).ready(function(){ // here }) function as below

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

});

Upvotes: 1

admcfajn
admcfajn

Reputation: 2083

Wrapping your code in document.ready might help.

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

If it's WordPress, be aware that you can't use $ for jQuery. You have to use jQuery('body input') instead, or wrap you code in the following:

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

Are you seeing any errors in the console?

Upvotes: 3

Related Questions