填写所有字段后如何激活“提交”按钮

时间:2017-01-31 07:57:16

标签: php jquery

我有以下代码在表单中显示输入字段。我希望只有填写完所有字段后才能激活提交按钮。我似乎无法弄清楚我哪里出错了。我在这里省略了一些文字输入。

形式:

    <?php
    if(@$_GET['q']==4 && !(@$_GET['step']) ) {
    echo ' 
    <div class="row">
    <span class="title1" style="margin-left:40%;font-size:30px;"><b>Enter Quiz Details</b></span><br /><br />
     <div class="col-md-3"></div><div class="col-md-6">   <form class="form-horizontal title1" name="form" action="update.php?q=addquiz"  method="POST">
    <fieldset>


    <!-- Text input-->
    <div class="form-group">
      <div class="col-md-12">
      <label for="name">Enter Title</label>
      <input id="name" name="name" class="form-control input-md" type="text">

      </div>
    </div>
    <div class="form-group">
      <label class="col-md-12 control-label" for=""></label>
      <div class="col-md-12"> 
        <input  type="submit" style="margin-left:45%" class="btn btn-primary" value="Submit" class="btn btn-primary" id="submit" disabled="disabled"/>
      </div>
    </div>

    </fieldset>
    </form>
    </div>';

    }
?>

<script>
(function() {
    $('form input').keyup(function() {

        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#submit').attr('disabled', 'disabled'); //Leave as disabled if any of the  fields are empty
        } else {
            $('#submit').removeAttr('disabled');//Remove the disabled attribute once all fields are filled
        }
    });
});
</script>

代码与此处显示的完全相同。如果我错过了什么,请指点我的方向。谢谢。

1 个答案:

答案 0 :(得分:2)

你使用的属性为disabled =“disabled”但是它的属性没有任何价值你应该像<input type="submit" style="margin-left:45%" class="btn btn-primary" value="Submit" class="btn btn-primary" id="submit" disabled/>

一样使用它

在这里,我为您创建了一个有效的JSFiddle,并对其进行了检查并进行了修正https://jsfiddle.net/g1cra5f8/