如何捕獲每個文本框的值（僅限JavaScript）並顯示它們？

Question

我只使用JavaScript和HTML構建表單（業務需求 - 無服務器訪問）。我有一個我需要的值的文本框列表。用戶具有填寫1個文本框，或儘可能多的選擇，因爲他們需要高達35.我可以爲每個單獨的盒子

var a = $('#a').val(); 
var b = $('#b').val(); 
var c = $('#c').val(); 

if (a != '' && b != '' && c != '') { 
    var abc = "this is a: " + a + "this is b: " + b + "and this is c:" + c; 
} 

創建一個功能，我可以做一個函數爲每個值的每個場景：

if(a != '' && b != '' && c == '') { 
    var ab = "this is a: " + a + " and b: " + b + "but not c"; 
} 

if(a != '' && b == '' && c != '') { 
    var ac = "this is a: " + a + " and c: " + c + "but not b"; 
} 

if(a != '' && b == '' && c == '') { 
    var a-only = "this is a: " + a + " but not b or c"; 
} 

if(a == '' && b != '' && c != '') { 
    var bc = "this is b: " + b + " and c: " + c + " but not a"; 
} 

這甚至不是僅僅3個變量的所有情況，但我可能有我需要爲每個場景的函數，而時間和空間大塊多達35個不同的變量，我想其中大約10人之後，如果我需要更多的話，它會變得太亂並且很難維護。

我覺得必須有一種更有效的方法來捕獲這些值，並且如果它們不是空的而不是通過每種可能的方案。

我的文本框動態點擊 「添加更多」 按鈕

的JavaScript創建：

var max_fields = 35; 
var x = 0; 
$('#add').click(function(e) { 
    e.preventDefault(); 
    if(x < max_fields){ 
    x++; 
     var inps = $('#wrapper >div:last').data('count')+1 || 1; 
     $('#wrapper').append('<div class="date-time-list" data-count="'+inps+'"><input type="text" name="date_count' + inps + '" id="date_count'+inps+'" class="inp"/><input type="text" name="time_count' + inps + '" id="time_count'+inps+'" class="inp"/><a class=remove>Remove</a><br><br></div>'); 
    } 
});  

$('#wrapper').on('click' , 'a.remove' ,function(){ 
    var inps = $('#wrapper > div:last').data('count')-1 || 1; 
    x--; 
    $(this).closest('div').remove(); 
}); 

HTML：

<tr class="list" style="line-height:1em;"> 
    <td> 
     Please fill in the dates and times 
    </td> 
    <td> 
     <strong>Dates</strong> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <strong>Times</strong> 
    </td> 
</tr> 
<tr class="list" style="line-height:1em;"> 
    <td> 
    </td> 
    <td> 
     <span id="wrapper">      
     </span> 
    </td> 
</tr> 
<tr class="list"> 
    <td> 
     &nbsp; 
    </td> 
    <td> 
     <button id="add">Add More</button> 
    </td> 
</tr> 

Answer 1

請看看這個小片段：https://jsfiddle.net/0h52y0Ly/1/

$(document).ready(function() { 
    $('button').click(function(){ 
     var content = ''; 
     var countOfTextareasFilled = 0; 
     $('textarea').each(function(){ 
      if ($(this).val().length){ 
       content += $(this).val() + '\n\n'; 
       countOfTextareasFilled++; 
      } 
     }); 
     alert(countOfTextareasFilled + ' text boxes have been filled. Contents are:\n\n' +content); 
    }); 
}); 

它顯示了一個非常通用的方法來完成您的任務。你應該能夠很容易地適應你的需求。

編輯： 我相當肯定，那就是適應一個完全正常廣義解決您的特殊用途的情況下，是你應該做你自己。但在這裏，它是：

https://jsfiddle.net/cb7ujmsw/

$('#evaluate').click(function(){ 
     var content = ''; 
     var data = []; 
     var dateField, timeField; 
     $('.date-time-list').each(function(){ 
      dateField = $('#date_count' + $(this).data('count')); 
      timeField = $('#time_count' + $(this).data('count')); 
      if (dateField.val().length && timeField.val().length){ 
       data.push({ 
        date: dateField.val(), 
        time: timeField.val() 
       }); 
      } 
     }); 
     alert(data.length + ' complete datetimes. Data:\n\n' +JSON.stringify(data)); 
    }); 

我增加了一個按鈕，ID爲 「評估」。其餘的完全是你的代碼。

Answer 2

假設你有一個方法來選擇所有相關投入（在這個例子中所有元素都具有check-me類）

$(function(){ 
 
    $('.do-the-check').on('click', function(e){ 
 
    e.preventDefault(); 
 
    
 
    var inputs = $('.check-me', this.form), 
 
     empty = inputs.filter(function(){return this.value === ''}), 
 
     nonempty = inputs.not(empty), 
 
     message = 'This is '; 
 
    
 
    if (nonempty.length){ 
 
     message += nonempty.map(function(){return this.name + ':' + this.value}).get().join(' and '); 
 
    } 
 
    if (empty.length){ 
 
     if (nonempty.length){ 
 
     message += ' but '; 
 
     } 
 
     message += 'not ' + empty.map(function(){return this.name;}).get().join(' or '); 
 
    } 
 
    
 
    alert(message); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    a:<input name="a" class="check-me"><br/> 
 
    b:<input name="b" class="check-me"><br/> 
 
    c:<input name="c" class="check-me"><br/> 
 
    d:<input name="d" class="check-me"><br/> 
 
    e:<input name="e" class="check-me"><br/> 
 
    f:<input name="f" class="check-me"><br/> 
 
    g:<input name="g" class="check-me"><br/> 
 
    h:<input name="h" class="check-me"><br/> 
 
    i:<input name="i" class="check-me"><br/> 
 
    j:<input name="j" class="check-me"><br/> 
 
    <button class="do-the-check">check them</button> 
 
</form>