javascript - 如何捕获每个文本框的值(仅限 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 个之后，如果我需要的话，它会变得太困惑并且难以维护，更不用说全部 35 个了。

我觉得除了遍历每个可能的场景之外，必须有一种更有效的方法来捕获值并在它们不为空时显示它们。

我的文本框是通过单击“添加更多”按钮动态创建的

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 为“evaluate”的按钮。其余的完全是您的代码。