禁用表单按钮

时间:2016-04-07 20:13:35

标签: javascript jquery html html5 forms

我有以下表格。在所有字段完成之前,“继续”按钮将被禁用。我已经在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>

3 个答案:

答案 0 :(得分:3)

将您的代码包装在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(&#39;正文输入&#39;),或者将代码包装在以下内容中:

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

您是否在控制台中看到任何错误?

答案 1 :(得分:0)

将您的代码放在$(document).ready(function(){// here})函数中,如下所示

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

});

答案 2 :(得分:0)

我会尝试:

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

而不是

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

用户可以填写所有字段,然后删除一个。