如何捕获每个文本框的值（仅限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>