多步表单按钮禁用,直到表单选择字段

时间:2017-04-10 05:18:52

标签: javascript jquery forms

这是我的表单,它是一个多步骤表单,当我提交一个步骤,然后按钮启用并进入下一步,直到表单字段按钮被禁用。我想选择项目选择按钮已禁用。我怎样才能做到这一点?

<form action="" method="POST" id="ccSelectForm">

    <select name="select-item" class="form-control" id="select_field">
            <option value="">Select your option</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
    </div>
    <div class="btn-continue">
        <button type="button" id="register2" class="btn btn-default next-step ">Continue</button>       
    </div>


     <div id="menu2" class="tab-pane fade">
        <div class="tab-form-content">
            <h2>What are your <b>overall goals?</b></h2>
            <div class="bor-bottom"></div>


                <div class="form-group">
                    <input type="text" class="form-control" name="name" id="" placeholder="Name">
                </div>
                <div class="form-group">
                    <input type="email" class="form-control" name="email" id="" placeholder="Email">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="" name="phone_number" placeholder="Phone number">
                </div>

                <div class="btn-continue">
                    <button type="submit" name="submit"  class="btn btn-default next-step register">Submit</button>

                    <br />

                    <button type="button" id="register3" class="btn go-back prev-step">Go Back</button>
                </div>

        </div>
    </div>

</form>



 $(document).ready(function () {
      $( "#register2,#register3" ).prop( "disabled", true );
        $('#ccSelectForm').validate({
            rules: {
                website: {
                    required: true, 
                },
                optionsRadios: {
                    required: true, 
                },
                budget: {
                    required: true, 
                },
                name: {
                    required: true,
                },
                email: {
                    required: true,
                },
                phone_number: {
                    required: true,
                }
               /*  inputEmailConfirm: {
                    equalTo: '#inputEmail'
                } */
            }
        });

        $('#ccSelectForm input').on('keyup blur', function () {
            if ($('#ccSelectForm').valid()) {
                $( "#register2,#register3").prop( "disabled", false );
            } else {
                  $( "#register2,#register3" ).prop( "disabled", true );
            }
        });

    });       

1 个答案:

答案 0 :(得分:0)

以“禁用”按钮开始

var alamoFireManager = Alamofire.SessionManager let request = URLRequest(url:_yourULR) request.HTTPMethod = requestMethod.rawValue request.timeoutInterval = //set yours request.setValue("application/json; charset=utf-8", forHTTPHeaderField: "Content-Type") request.addValue("application/json", forHTTPHeaderField: "Accept") request.addValue("gzip", forHTTPHeaderField: "Accept-Encoding") request.HTTPBody = "you_bodydataSTring".dataUsingEncoding(String.Ecoding.utf8) alamoFireManager.request(request) .validate() .responseString { (response) -> Void in let datastring = NSString(data:response.data!, encoding: String.Ecoding.utf8) switch response.result { case .Success: if response.response?.statusCode == 200 { //code for success }else{ //others } case .Failure(let error): //request failed } } }

如果选择了项目,则启用选择更改功能启用按钮

<button type="button" id="register2" class="btn btn-default next-step " disabled="disabled">Continue</button>