Array textbox from javascript and send to another textbox

Question

I want to send the inputted value from the textboxes to another textbox. Here's my code

$('.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>

First you will input number of rows you want:

Second you will input the details and while your inputting, the summary textbox will updated too like this:

The issue is the summary will only get the first row.

Answer 1

You have a lot of issues with this code, I assume this is homework, so I'm only going to help with the part you are having problems with, and I'm not going to rewrite your code because that goes against doing your own homework!

This is the function that you are having problems with:

$("#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() + '}';
  }
});

There a few things here:

1. $("#bbb") - there are many elements with the id bbb, but an id should be unique.
2. You are adding the values of s.val() and s2.val() to "eg_hidden", but you are adding the same value every time
3. You are also overwriting the value in "eg_hidden" every time in your loop.

To address these specific issues:

1. change the bbb id to classes - do this everywhere!
2. get each value of aaa[] and bbb[] inside your loop. You are already getting the value of arrr[i] in your loop, so you can do this with edValue/edValue2 in the same way i.e. get the value of the first bbb element the first time you loop, the 2nd bbb element the 2nd time etc using edValue[i]
3. Add the values onto "eg_hidden" instead of replacing them. You can do this using += instead of =. Don't forget to reset the value before your loop so you don't keep adding to it.

The new code will be something like:

$(".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 + '}';
  }
});

Working example:

$(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) {
	// Start of the HTML-Table
	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 () {
    	// $(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) {
    	// 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 {
    	// If there is no object because all are empty: Just show nothing in the field.
    	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>

Answer 3

$('.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>