javascriptのテキストボックスを配列して別のテキストボックスに送信

Question

入力した値をテキストボックスから別のテキストボックスに送信します。ここでは、行の入力数はあなたが望むだろう

$('.col_bot').on('click', function(e) { 
 

 
     // alert('hoi'); 
 
     var a = parseInt(document.getElementById("nochapter").value); 
 
     var ch = document.getElementById("ch"); 
 

 
     var HTML = '<table width=50% class="eg_form">'; 
 

 
     for (i = 0; i < a; i++) { 
 
     HTML += '<tr><td align="center">'; 
 
     HTML += '<input type="text" id="aaa" name="aaa[]"></td>'; 
 
     HTML += '<td align="center">'; 
 
     HTML += '<input type="text" id="bbb" name="bbb[]"></td></td></tr>'; 
 

 
     document.getElementById("ch").innerHTML = HTML; 
 
     } 
 

 
     var arrr = document.getElementsByName("bbb[]"); 
 
     var arr = $(arr); 
 
     var ar = arr.val(); 
 

 
     
 
      $("#bbb").keyup(function() { 
 

 
       var edValue = document.getElementsByName("bbb[]"); 
 
       var s = $(edValue); 
 
       var edValue2 = document.getElementsByName("aaa[]"); 
 
       var s2 = $(edValue2); 
 

 
       for (var i = 0, iLen = arrr.length; i < iLen; i++) { 
 
       alert(arrr[i].value); 
 
       document.getElementById("eg_hidden").value = '{' + s2.val() + ':' + s.val() + '}'; 
 
       } 
 
      }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="abab" id="abab"> 
 
    <input type="text" id="nochapter" /> 
 
    <input type="button" value="Number of rows" class="col_bot" /> 
 
    <div id="ch" class="abab"></div> 
 
    <br> 
 
    <input type="text" id="eg_hidden" name="eg_hidden" /> Summary 
 
</div>

まず私のコードです：

第二に、あなた意志入力が詳細とあなたの入力しながら、要約テキストボックスがしますこのように更新されました：

問題は、要約は最初の行だけを取得することです。

Answer 1

あなたはこのコードの問題の多くを持って、私はこれは宿題であると仮定し、私は一部だけ、あなたを支援するつもりですあなたの問題を抱えています。あなたのコードを書き直すつもりはありません。なぜなら、それは自分の宿題をすることに反するからです！

これは、あなたが問題を抱えている機能です。

$("#bbb").keyup(function() { 

    var edValue = document.getElementsByName("bbb[]"); 
    var s = $(edValue); 
    var edValue2 = document.getElementsByName("aaa[]"); 
    var s2 = $(edValue2); 

    for (var i = 0, iLen = arrr.length; i < iLen; i++) { 
    alert(arrr[i].value); 
    document.getElementById("eg_hidden").value = '{' + s2.val() + ':' + s.val() + '}'; 
    } 
}); 

あり、ここでいくつかのこと：

1. $("#bbb") - そこにID bbbとの多くの要素がありますが、idはする必要がありますユニーク。
2. あなたは「eg_hidden」にs.val()とs2.val()の値を追加しているが、あなたは
3. たびにあなたはまた、「eg_hidden」であなたのループで毎回値を上書きしているのと同じ値を追加しています。

は、これらの特定の問題に対処するには、次の

は

1. 変更クラスへbbb idは - どこでもこれを行います！
2. 各値をaaa[]とbbb[]としてください。あなたはすでにarrr[i]の値をあなたのループに入れているので、同じ方法でedValue/edValue2でこれを行うことができます。すなわち、初めてループするときは最初のbbb要素の値を取得し、edValue[i]の場合は2番目のbbb要素
3. 値を "eg_hidden"に置き換えるのではなく、それらを置き換えます。 =の代わりに+=を使用してこれを行うことができます。ループの前に値をリセットしておくことを忘れないでください。

新しいコードは次のようになります：

$(".bbb").keyup(function() { 

    var edValue = document.getElementsByName("bbb[]"); 
    var s = $(edValue); // <- you don't need this 
    var edValue2 = document.getElementsByName("aaa[]"); 
    var s2 = $(edValue2); // <- you don't need this 

    document.getElementById("eg_hidden").value = ""; // empty this so we can add the new values 

    for (var i = 0, iLen = edValue.length; i < iLen; i++) { 
    document.getElementById("eg_hidden").value += '{' + edValue2[i].value + ':' + edValue[i].value + '}'; 
    } 
}); 

の作業例：まさにあなたのコードでは、あなたが抱えている問題、そして何

$(document).ready(function() { 
 

 
    $('.col_bot').on('click', function(e) { 
 

 
    // alert('hoi'); 
 
    var a = parseInt(document.getElementById("nochapter").value); 
 
    var ch = document.getElementById("ch"); 
 

 
    var HTML = '<table width=50% class="eg_form">'; 
 

 
    for (i = 0; i < a; i++) { 
 
     HTML += '<tr><td align="center">'; 
 
     HTML += '<input type="text" class="aaa" name="aaa[]"></td>'; 
 
     HTML += '<td align="center">'; 
 
     HTML += '<input type="text" class="bbb" name="bbb[]"></td></td></tr>'; 
 

 
     document.getElementById("ch").innerHTML = HTML; 
 
    } 
 

 
    var arrr = document.getElementsByName("bbb[]"); 
 
    var arr = $(arr); 
 
    var ar = arr.val(); 
 

 
    $(".bbb").keyup(function() { 
 

 
     var edValue = document.getElementsByName("bbb[]"); 
 
     var s = $(edValue); // <- you don't need this 
 
     var edValue2 = document.getElementsByName("aaa[]"); 
 
     var s2 = $(edValue2); // <- you don't need this 
 

 
     document.getElementById("eg_hidden").value = ""; // empty this so we can add the new values 
 

 
     for (var i = 0, iLen = edValue.length; i < iLen; i++) { 
 
     document.getElementById("eg_hidden").value += '{' + edValue2[i].value + ':' + edValue[i].value + '}'; 
 
     } 
 
    }); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="abab" id="abab"> 
 
    <input type="text" id="nochapter" /> 
 
    <input type="button" value="test" class="col_bot" /> 
 
    <div id="ch" class="abab"></div> 
 
    <br> 
 
    <input type="text" id="eg_hidden" name="eg_hidden" /> 
 
</div>

Answer 2

$('.col_bot').on('click', function(e) { 
 

 
     // alert('hoi'); 
 
     var a = parseInt(document.getElementById("nochapter").value); 
 
     var ch = document.getElementById("ch"); 
 

 
     var HTML = '<table width=50% class="eg_form">'; 
 

 
     for (i = 0; i < a; i++) { 
 
     HTML += '<tr><td align="center">'; 
 
     HTML += '<input type="text" name="aaa"></td>'; 
 
     HTML += '<td align="center">'; 
 
     HTML += '<input type="text" name="bbb"></td></td></tr>'; 
 

 
     document.getElementById("ch").innerHTML = HTML; 
 
     } 
 

 
    $("input[name=\"bbb\"]").keyup(function() { 
 
    //alert(); 
 
    var s= $("input[name=\"bbb\"]"); 
 
    var s2= $("input[name=\"aaa\"]"); 
 
    document.getElementById("eg_hidden").value=""; 
 
     $.each($("input[name=\"bbb\"]"), function(i, ele){ 
 
     document.getElementById("eg_hidden").value += (i>0 ? ',':'') +'{' + s2[i].value + ':' + s[i].value + '}';; 
 
    }); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="abab" id="abab"> 
 
    <input type="text" id="nochapter" /> 
 
    <input type="button" value="Number of rows" class="col_bot" /> 
 
    <div id="ch" class="abab"></div> 
 
    <br> 
 
    <input type="text" id="eg_hidden" name="eg_hidden" /> Summary 
 
</div>

Answer 3

$('.col_bot').on('click', function(e) { 
 
\t // Start of the HTML-Table 
 
\t var HTML = '<table width=50% class="eg_form">'; 
 
    // $('#nochapter').val() gets the value of the field with the id="nochapter"; See jQuery-Selectors: https://api.jquery.com/category/selectors/ (and for the val-function: http://api.jquery.com/val/) 
 
    for (i = 0; i < parseInt($('#nochapter').val()); i++) { 
 
    HTML += '<tr><td align="center">'; 
 
    HTML += '<input type="text" class="aaa" name="aaa[]"></td>'; 
 
    HTML += '<td align="center">'; 
 
    HTML += '<input type="text" class="bbb" name="bbb[]"></td></td></tr>'; 
 
    } 
 
    // http://api.jquery.com/html/ for .html 
 
    $('#ch').html(HTML); 
 
    $('.aaa, .bbb').keyup(function() { 
 
    // Start the summary 
 
    var summary = "{"; 
 
    var num_elements = 0; 
 
    // Loop through all elements with class="aaa" 
 
    $('.aaa').each(function() { 
 
    \t // $(this) becomes in this function one of the elements of $('.aaa') 
 
     var a = $(this).val(); 
 
     // Here you need to pay attention on the html-structure, earlier you declared that the table is custructed like this: table > tr > td > input.aaa now with $(this).parent().parent() you will select the parent of the parent of the current .aaa. So now the selected element is table > tr. With $('.bbb', $(this).parent().parent()) you will now get every child (or child of a child and so on) of table > tr with the class .bbb. Now when you remember how you constructed the table, you have in each row (tr) only one child with class="bbb", so you can savely take the value of it. 
 
     var b = $('.bbb', $(this).parent().parent()).val(); 
 
     // If both elements have a value which actually are not empty (length > 0), than append it to the string and add a comma at the end 
 
     if (a.length > 0 && b.length > 0) { 
 
     summary += a + ':' + b + ","; 
 
     num_elements++; 
 
     } 
 
    }); 
 
    if (num_elements) { 
 
    \t // As you don't want a comma after the last added element, remove it and add the closing bracket. 
 
     summary = summary.slice(0, summary.length-1); 
 
     summary += "}"; 
 
    } else { 
 
    \t // If there is no object because all are empty: Just show nothing in the field. 
 
    \t summary = ""; 
 
    } 
 
    // Update the field 
 
    $('#eg_hidden').val(summary); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="abab" id="abab"> 
 
    <input type="text" id="nochapter" /> 
 
    <input type="button" value="Number of rows" class="col_bot" /> 
 
    <div id="ch" class="abab"></div> 
 
    <br> 
 
    <input type="text" id="eg_hidden" name="eg_hidden" /> Summary 
 
</div>