如何选择名称字段和描述字段和满山遍野，需要点击下一步按钮

Question

how can we fill those fields using jquery selectors

html代码是波纹管

<div class="col-xs-4 h100"> 
 
    <div class="title">What do you want to name your application as ?</div> 
 
    <div class="help-text tMargin10">The name you provide here will be the application name used. Typically, it is the project name or repo name.</div> 
 
    <div class="row applicationName"> 
 
    <form id="create-application-form"> 
 
     <div class="form-group"> 
 
     <label>Name your Application </label> 
 
     <i class="fa fa-question-circle" title="The name you provide here will be the application name. Typically, it is the project name or repo name. Application name must begin with an alphabet and recommend not to use consecutive _, -, whitespaces. Ex - My_app_name, my app name, my-app-name are allowed. Please avoid names like my___app___name, my app name, or my-----app----name"></i> 
 
     <span class="mandatory" title="Mandatory">*</span> 
 
     <input class="form-control behavior-validate required" data-validation="[{"rule":"application_name"}]" minlength="4" maxlength="21" name="name" value="" type="text"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label>Description</label> 
 
     <textarea class="form-control" name="description"></textarea> 
 
     <div class="help-text">This description will be displayed to users who may want to join your team. (Optional)</div> 
 
     </div> 
 
    </form> 
 
    </div> 
 
    <div class="viewActions text-right"> 
 
    <button class="btn btn-primary continue next hasError" type="button" title="Mandatory field missing" disabled="disabled">Next</button> 
 
    </div> 
 
</div>

请帮我使用jQuery选择器。

Answer 1

在这里，你去了一个解决方案https://jsfiddle.net/s4mz5kf8/2/

var data = {name:"", description: ""} 
 
$('input[name="name"], textarea[name="description"]').focusout(function(){ 
 
    data[$(this).attr('name')] = $(this).val(); 
 
    
 
    if(data.name != "" && data.description != ""){ 
 
    console.log(data); 
 
    $('.next').removeAttr('disabled').click(); 
 
    } else { 
 
    $('.next').attr('disabled', 'disabled'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-xs-4 h100"> 
 
    <div class="title">What do you want to name your application as ?</div> 
 
    <div class="help-text tMargin10">The name you provide here will be the application name used. Typically, it is the project name or repo name.</div> 
 
    <div class="row applicationName"> 
 
    <form id="create-application-form"> 
 
     <div class="form-group"> 
 
     <label>Name your Application </label> 
 
     <i class="fa fa-question-circle" title="The name you provide here will be the application name. Typically, it is the project name or repo name. Application name must begin with an alphabet and recommend not to use consecutive _, -, whitespaces. Ex - My_app_name, my app name, my-app-name are allowed. Please avoid names like my___app___name, my app name, or my-----app----name"></i> 
 
     <span class="mandatory" title="Mandatory">*</span> 
 
     <input class="form-control behavior-validate required" data-validation="[{"rule":"application_name"}]" minlength="4" maxlength="21" name="name" value="" type="text"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label>Description</label> 
 
     <textarea class="form-control" name="description"></textarea> 
 
     <div class="help-text">This description will be displayed to users who may want to join your team. (Optional)</div> 
 
     </div> 
 
    </form> 
 
    </div> 
 
    <div class="viewActions text-right"> 
 
    <button class="btn btn-primary continue next hasError" type="button" title="Mandatory field missing" disabled="disabled">Next</button> 
 
    </div> 
 
</div>

我检查了两个input textbox，如果任何input textbox的为空，则下一个button将被禁用。

希望这会帮助你。