JQuery - Concatenate multiple/variable table values into a string

Question

I'll apologise now for the newbie question!

I have a HTML table with 3 columns and 5 rows. I have input fields, with unique ID's, in columns across 4 rows so I can capture data entered by the user. However, I need to take all values entered and concatenate them into one string in a hidden field so it can be submitted to the database.

The string needs to have a delimiter (tbc) and only have the "latest" value that has been entered into a column. I say this because I had something working that fired with a Change event but this was just concatenating every value entered with a delimiter - e.g. when I entered 'Hello' into a column then this was written to the string and I replaced this with 'Bye' then this was written to the string as 'Hello, Bye' when I just wanted the last value entered ('Bye'). I know this is expected behaviour with the Change event.

Ideally, I would like this script to fire every time a value is entered into the table as it is extremely difficult to do so when a button is clicked due to the nature of the software I am using.

Can anyone please offer any guidance on this?

Here's my Table and hidden field:

<table class="table table-striped" data-tablesaw-mode="stack" id="BookChap">
  <thead>
    <tr>
      <th>Chapter Number</th>
      <th>Chapter Title</th>
      <th>Completed?</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1.</td>
      <td><textarea class="form-control" id="1a"></textarea></td>
      <td><input type="text" class="form-control" id="1b" /></td>
    </tr>

    <tr>
      <td>2.</td>
      <td><textarea class="form-control" id="2a"></textarea></td>
      <td><input type="text" class="form-control" id="2b" /></td>
    </tr>

    <tr>
      <td>3.</td>
      <td><textarea class="form-control" id="3a"></textarea></td>
      <td><input type="text" class="form-control" id="3b" /></td>
    </tr>

    <tr>
      <td>4.</td>
      <td><textarea class="form-control" id="4a"></textarea></td>
      <td><input type="text" class="form-control" id="4b" /></td>
    </tr>

  </tbody>
</table>



<input id="result" type="hidden" value="">

Welcome to SO. Please visit the help center to see what and how to ask. HINT: Post effort and CODE - you have not shown any effort. You need to loop over each field .on("input"... of each field. However why not do the concatenation on the server? — mplungjan
– mplungjan, Commented Sep 26, 2017 at 7:55

mplungjan · Accepted Answer · 2017-09-26 08:03:35Z

You need to loop over each field .on("input"... of each field.

However why not do the concatenation on the server?

Anyway, here is an example - note I changed one class from sv-form-control

$(function() {
  $(".form-control").on("input",function() {
    var arr = [];
    $(".form-control").each(function() {
      if (this.value) arr.push(this.value);
    });
    if (arr.length>0) $("#result").val(arr.join("|")); // or TBC instead of |
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input id="result" type="text" value="" />
<table class="table table-striped" data-tablesaw-mode="stack" id="BookChap">
  <thead>
    <tr>
      <th>Chapter Number</th>
      <th>Chapter Title</th>
      <th>Completed?</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1.</td>
      <td><textarea class="form-control" id="1a"></textarea></td>
      <td><input type="text" class="form-control" id="1b" /></td>
    </tr>

    <tr>
      <td>2.</td>
      <td><textarea class="form-control" id="2a"></textarea></td>
      <td><input type="text" class="form-control" id="2b" /></td>
    </tr>

    <tr>
      <td>3.</td>
      <td><textarea class="form-control" id="3a"></textarea></td>
      <td><input type="text" class="form-control" id="3b" /></td>
    </tr>

    <tr>
      <td>4.</td>
      <td><textarea class="form-control" id="4a"></textarea></td>
      <td><input type="text" class="form-control" id="4b" /></td>
    </tr>

  </tbody>
</table>

Hemanthkumar Rajan · Accepted Answer · 2017-09-26 07:57:55Z

0

Instead of change event, you can use click event on button. On button click loop all the table rows and construct string based on your need.

answered Sep 26, 2017 at 7:57

Hemanthkumar Rajan

10914 bronze badges

1 Comment

mplungjan Over a year ago

This is a comment. Write an answer instead including code. Then you will get enough rep to be allowed to comment. Do note OP just said he cannot use a button

Collectives™ on Stack Overflow

JQuery - Concatenate multiple/variable table values into a string

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related