填寫字段時如何啓用按鈕？

我試圖隱藏部分窗體的按鈕被禁用，並讓用戶點擊按鈕來顯示其餘的窗體，當前面的字段被填入。任何人都可以幫忙嗎？這裏是我的代碼爲例：填寫字段時如何啓用按鈕？

HTML

<form> 
<div id="group1"> 

     <label>Field 1:</label> 
     <input type="text" class="field1"/><br/> 
     <label>Field 2:</label> 
     <input type="text" class="field2"/><br/> 
     <label>Field 3:</label> 
     <input type="text" class="field3"/><br/> 

</div> 

    <div align="center"> 
    <button id="show_form" onClick = "this.style.display= 'none'" disabled="disabled"> 
    Enter Billing Info</button> 
    </div> 

<div id="group2"> 

     <label>Field 4:</label> 
     <input type="text" class="field4"/><br/> 
     <label>Field 5:</label> 
     <input type="text" class="field5"/><br/> 
     <label>Field 6:</label> 
     <input type="text" class="field6"/><br/> 

</div> 
</form>

JQUERY

<script> 
$(document).ready(function() { 
    $('#group1').find('input[type="text"]').keyup(function() { 
    var flag = true; 
    $('#group1').find('input[type="text"]').each(function() { 
     if ($(this).val().length === 0) { 
      flag = false; 
      return; 
     } 
    }); 

    if (flag) { 
     $("#show_form").prop("disabled", false); 
    } else { 
     $("#show_form").prop("disabled", true); 
     $("#group2").hide(); 

     $("#show_form").show(); 
    } 
}); 

$("#group2").hide(); 

$("#show_form").click(function(){ 
    $("#group2").show(); 

    return false; 
}); 

}); 
</script>

來源

2014-10-07 Military911

試試這個jQuery的：

$(document).ready(function() { 
    $('#group1').find('input[type="text"]').keyup(function() { 
     var flag = true; 
     $('#group1').find('input[type="text"]').each(function() { 
      if ($(this).val().length === 0) { 
       flag = false; 
       return; 
      } 
     }); 

     if (flag) { 
      $("#show_form").prop("disabled", false); 
     } else { 
      /* This will hide the bottom form and disable the button again if 
      * any of the field above will be emptied. 
      * NOTE: This will just hide the form; it will not clear the fields. 
      */ 
      $("#show_form").prop("disabled", true); 
      $("#group2").hide(); 
     } 
    }); 

    $("#group2").hide(); 
    $("#show_form").click(function(){ 
     $("#group2").show(); 
     return false; 
    }); 
});

這將使該按鈕時，在初始形式的所有字段被填充。然後用戶將能夠點擊該按鈕來查看錶格的其餘部分。

來源

2014-10-07 15:53:42 Ashutosh

由於檢查輸入值的代碼只在文檔準備就緒時執行一次，因此無法保持字段被修改的軌道。此外，它並沒有驗證字段被填充在點擊按鈕上 – academo 2014-10-07 15:58:27

@academo是不是像用戶想要啓用按鈕只有當所有上述字段填充，因爲他最初設置按鈕爲「禁用」？ – Ashutosh 2014-10-07 16:01:00

謝謝。這很好。如果他們決定刪除之前的某個字段，是否有辦法隱藏表單的第二部分？ – Military911 2014-10-07 16:04:39

你只需通過每個輸入需要循環，並檢查是否當按鈕被點擊這樣的值設置：

$('#show_form').click(function() { 
    var fields = $('.js-field'); 
    var pass = true; 

    for (var i = 0; i < fields.length; i++) { 
     if (!$(fields[i]).val()) { 
      pass = false; 
     } 
    } 

    if (pass === true) { 
     $('#group2').show(); 
    } 
});

我還需要添加一些類到您的html：

<form> 
<div id="group1"> 

     <label>Field 1:</label> 
     <input type="text" class="field1 js-field"/><br/> 
     <label>Field 2:</label> 
     <input type="text" class="field2 js-field"/><br/> 
     <label>Field 3:</label> 
     <input type="text" class="field3 js-field"/><br/> 

</div> 

<button type="button" id="show_form" value="Show_Form">Enter Billing  
Info</button> 

<div id="group2" style="display: none;"> 

     <label>Field 4:</label> 
     <input type="text" class="field4"/><br/> 
     <label>Field 5:</label> 
     <input type="text" class="field5"/><br/> 
     <label>Field 6:</label> 
     <input type="text" class="field6"/><br/> 

</div> 
</form>

要在行動中看到它，請訪問此fiddle。

來源

2014-10-07 15:48:02

您可以添加一些邏輯來click事件，並檢查所有的輸入字段有這樣

$("#show_form").click(function(){ 
    var allFilled = true; 

    $('#group1').find('input').each(function(){ 
     //if someone is empty allFilled will keep false 
     if(this.value === ''){ 
     allFilled = false; 
     //this breaks the each 
     return false; 
     } 
    }); 

    if(allFilled){ 
     $("#group2").show(); 
    } 
});

值記住前面的代碼只能與輸入下地幹活。

來源

2014-10-07 15:52:42 academo

填寫字段時如何啓用按鈕？

回答

相關問題