Disable form Button

Question

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>

It's working what is the problem?? jsfiddle.net/cmedina/7312thyn — CMedina
– CMedina, Commented Apr 7, 2016 at 20:20
@CMedina And I know it works on jsfiddle, but on my actual web page (the .html file) it doesn't work, the button stays disabled — Thomas
– Thomas, Commented Apr 7, 2016 at 20:21

admcfajn · Accepted Answer · 2016-04-07 20:22:22Z

3

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?

answered Apr 7, 2016 at 20:22

admcfajn

2,1224 gold badges26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

admcfajn Over a year ago

No problem, happy I could help.

kakurala · Accepted Answer · 2016-04-07 20:23:56Z

1

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

});

answered Apr 7, 2016 at 20:23

kakurala

8346 silver badges15 bronze badges

Comments

Laurel · Accepted Answer · 2016-04-07 21:24:22Z

0

I would try:

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

instead of

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

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

edited Apr 7, 2016 at 21:24

Laurel

6,23114 gold badges35 silver badges60 bronze badges

answered Apr 7, 2016 at 20:26

jackomelly

5431 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Disable form Button

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related