通过jQuery禁用和启用按钮,但启用按钮后不会触发onclick事件

时间:2018-08-01 17:20:50

标签: javascript jquery twitter-bootstrap

我有一个似乎无法找到解决方案的问题。问题是这样的:我有一些jQuery,它将使按钮保持禁用状态,直到所有表单的字段都填满为止。当所有字段都填满时,将启用该按钮,但不会触发用于Google Recaptcha的javascript onSubmit事件。任何人都可以帮忙

代码如下:

//jquery to disable button until all fields are filled up

$().ready(function() {
    // validate signup form on keyup and submit
    $("#fbForm").validate({
        rules: {
        	name: {
                required: true
            },
            surname: {
                required: true
            },
           
            terms: {
                required: true
            }
        },
        errorPlacement: function(error, element) {
            return true;
        },
        submitHandler: function() {
		

        }
    });


    $('#fbForm').change(function() {
        if ($("#fbForm").valid()) {
            $("#btnSubmit").removeAttr("disabled");
            
        }
    });
    
    
//recaptcha JS    
    function onSubmit(token) {
	if (screen.width >= 768) {
         document.getElementById("fbForm").submit();
	}else if (screen.width <= 767){
         document.getElementById("fbForm2").submit();
    }
}
<form id="fbForm"class="well form-horizontal" action="winesOfDistinction.php?send=true" method="post" data-toggle="validator">

 <div class="form-group">
      <label for="name "class="col-md-4 control-label">First Name</label>  
      <div class="col-md-4">
      <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input type="text"  placeholder="First Name" name="name" id="name" class="form-control" data-minlength="2" data-error="Minimum Lenght of First Name must be made up of at least 2 characters!" value="<?= $name ;?>" required>
        </div>
      </div>
      <div class="help-block with-errors"></div>
    </div>
    
    
    <!-- Surname: Text input-->
    
    <div class="form-group">
      <label class="col-md-4 control-label" for="surname">Last Name</label> 
        <div class="col-md-4 inputGroupContainer">
        <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input type="text" placeholder="Last Name" name="surname" id="surname" class="form-control" data-minlength="2" data-error="Minimum Lenght of Last Name must be made up of at least 2 characters!" value="<?= $surname ;?>" required>
        </div>
      </div>
      <div class="help-block with-errors"></div>
    </div>
    
    <div class="form-group text-center">
    <div class="checkbox">
      <label>
     
  <input type="checkbox" name="terms"id="terms" data-error="Please check the GDPR Disclaimercheck box in order to be able to submit the data" required>
        I agree
      </label>
      
      <div class="help-block with-errors"></div>
    </div>
  </div>
  
  <div class="form-group">
      <label class="col-md-4 control-label"></label>
      <div class="col-md-4"><br>
        <button id="btnSubmit" name="btnSubmit" disabled="disabled" type="submit" value="" class="g-recaptcha btn btn-success" data-sitekey="6LfuAWcUAAAAAEKjLeOZfygAMxAeld1k4UUMGnfN" data-callback='onSubmit'>SUBMIT <span class="glyphicon glyphicon-send"></span></button>

      </div>
    </div>
     </fieldset>
    </form>

2 个答案:

答案 0 :(得分:0)

在最后一行缺少}来关闭ready函数。先解决这个问题。

答案 1 :(得分:0)

$().ready(function() {
                    $('#num').validate();
    // validate signup form on keyup and submit
    $("fbForm").validate({
        rules: {
            name: {
                required: true
            },
            surname: {
                required: true
            },
           
            terms: {
                required: true
            }
        },
        errorPlacement: function(error, element) {
            return true;
        },
        submitHandler: function() {
        

        }
    });


    $('#fbForm').change(function() {
        if ($("#fbForm").valid()) {
            $("#btnSubmit").removeAttr("disabled");
            
        }
    });
    
    
//recaptcha JS    
    function onSubmit(token) {
    if (screen.width >= 768) {
         document.getElementById("fbForm").submit();
    }else if (screen.width <= 767){
         document.getElementById("fbForm2").submit();
    }
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>    
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
       
<form name="formSend" id="fbForm" class="well form-horizontal" action="winesOfDistinction.php?send=true" method="post" data-toggle="validator">
    <fieldset>
         <div class="form-group">
              <label for="name "class="col-md-4 control-label">First Name</label>  
              <div class="col-md-4">
              <div class="input-group">
              <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
              <input type="text"  placeholder="First Name" name="name" id="name" class="form-control" data-minlength="2" data-error="Minimum Lenght of First Name must be made up of at least 2 characters!" value="<?= $name ;?>" required>
                </div>
              </div>
              <div class="help-block with-errors"></div>
            </div>
            
            
            <!-- Surname: Text input-->
            
            <div class="form-group">
              <label class="col-md-4 control-label" for="surname">Last Name</label> 
                <div class="col-md-4 inputGroupContainer">
                <div class="input-group">
              <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
              <input type="text" placeholder="Last Name" name="surname" id="surname" class="form-control" data-minlength="2" data-error="Minimum Lenght of Last Name must be made up of at least 2 characters!" value="<?= $surname ;?>" required>
                </div>
              </div>
              <div class="help-block with-errors"></div>
            </div>
            
            <div class="form-group text-center">
            <div class="checkbox">
              <label>
             
          <input type="checkbox" name="terms"id="terms" data-error="Please check the GDPR Disclaimercheck box in order to be able to submit the data" required>
                I agree
              </label>
              
              <div class="help-block with-errors"></div>
            </div>
          </div>
          
          <div class="form-group">
              <label class="col-md-4 control-label"></label>
              <div class="col-md-4"><br>
                <button id="btnSubmit" name="btnSubmit" disabled="disabled" type="submit" value="" class="g-recaptcha btn btn-success" data-sitekey="6LfuAWcUAAAAAEKjLeOZfygAMxAeld1k4UUMGnfN" data-callback='onSubmit'>SUBMIT <span class="glyphicon glyphicon-send"></span></button>
    
              </div>
            </div>
             </fieldset>
            </form>
            

好的,缺少jquery验证程序和语法错误是导致此问题的原因。该代码段工作正常。您应使用可视代码作为编辑器,并请先解决语法错误,然后再在此处发布。

相关问题