如何選擇名稱字段和描述字段和滿山遍野，需要點擊下一步按鈕

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將被禁用。

希望這會幫助你。