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.

Where exactly in your code is the issue you are having, and what is the specific problem? — FluffyKitten
– FluffyKitten, Commented Oct 18, 2017 at 3:33
Can you update your question to include the working code, so we can see whats happening and what might be going wrong? The code you have at the moment has errors so it looks like something is missing. — FluffyKitten
– FluffyKitten, Commented Oct 18, 2017 at 3:44
you are using same id bbb for every row. Every id on a HTML Page should be different. — Dev
– Dev, Commented Oct 18, 2017 at 3:56

FluffyKitten · Accepted Answer · 2017-10-18 04:29:32Z

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:

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

To address these specific issues:

change the bbb id to classes - do this everywhere!
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]
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>

@angelloucelle Glad to help! You should take a look through your code now to tidy it up (for example you have extra variables arrr, arr and ar that you don't use), I was just concentrating on getting it to work. And I'm not 'sir' by the way, I'm a woman :)
hahahaha okay noted that ma'am. it really helps me a lot. hehe sorry, my bad. ma'am ^_^

Dev · Accepted Answer · 2017-10-18 04:25:09Z

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

movabo · Accepted Answer · 2017-10-18 04:26:42Z

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

Glad it works for you. But you should keep a look at your coding-style. Always think if a user needs to understand your code, how easy is it? For example variables called arrr, arr and ar are not very self-explaining. More here: wiki.c2.com/?GoodVariableNames
okay sir. noted. thank you so much for your advice. have a great day!

Collectives™ on Stack Overflow

Array textbox from javascript and send to another textbox

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related