How to loop through text fields and concatenate the result using javascript

Question

I need to write a javascript function that will loop through the input boxes and concatenates the text in each field together and displays the result in the result box. I tried multiple solutions and haven't been able to get any to work, I get that it needs an array of text fields but I can't seem to work it out.

<!DOCTYPE html>
<html>
<body>
<form id="myform">
    <label for="text1">text1</label><br>
    <input type="text" id="text1" name="text1"><br>
    <label for="text2">text2</label><br>
    <input type="text" id="text2" name="text2"><br>
    <label for="text3">text3</label><br>
    <input type="text" id="text3" name="text3"><br>
    <label for="text4">text4</label><br>
    <input type="text" id="text4" name="text4"><br>
    <label for="text5">text5</label><br>
    <input type="text" id="text5" name="text5"><br>
    <label for="text6">text6</label><br>
    <input type="text" id="text6" name="text6"><br>
    <input type="button" onClick="myFunction()" value="Click This"><br>
    <label for="result">result</label><br>
    <input type="text" id="result" name="result">
</form>

<script>
    function myFunction() {
       var fields = [];
    }
</script>

</body>
</html>

mplungjan · Accepted Answer · 2020-12-16 19:04:06Z

2

You can use filter and map

NOTE: I gave the button an ID of "btn"

document.getElementById('btn').addEventListener('click', function() {
  const conc = [...document.querySelectorAll('#myform [id^=text]')] // id starts with text
    .filter(fld => fld.value.trim() !== "") // not empty
    .map(fld => fld.value) // store value
  document.getElementById('result').value = conc.join(","); // join with comma
})

<form id="myform">
  <label for="text1">text1</label><br>
  <input type="text" id="text1" name="text1"><br>
  <label for="text2">text2</label><br>
  <input type="text" id="text2" name="text2"><br>
  <label for="text3">text3</label><br>
  <input type="text" id="text3" name="text3"><br>
  <label for="text4">text4</label><br>
  <input type="text" id="text4" name="text4"><br>
  <label for="text5">text5</label><br>
  <input type="text" id="text5" name="text5"><br>
  <label for="text6">text6</label><br>
  <input type="text" id="text6" name="text6"><br>
  <input type="button" id="btn" value="Click This"><br>
  <label for="result">result</label><br>
  <input type="text" id="result" name="result">
</form>

In one pass:

document.getElementById('btn').addEventListener('click', function() {
  const res = [];
  [...document.querySelectorAll('#myform [id^=text]')]
    .forEach(fld => { const val = fld.value.trim(); if (val !== "") res.push(val) })
  document.getElementById('result').value = res.join(","); // join with comma
})

<form id="myform">
  <label for="text1">text1</label><br>
  <input type="text" id="text1" name="text1"><br>
  <label for="text2">text2</label><br>
  <input type="text" id="text2" name="text2"><br>
  <label for="text3">text3</label><br>
  <input type="text" id="text3" name="text3"><br>
  <label for="text4">text4</label><br>
  <input type="text" id="text4" name="text4"><br>
  <label for="text5">text5</label><br>
  <input type="text" id="text5" name="text5"><br>
  <label for="text6">text6</label><br>
  <input type="text" id="text6" name="text6"><br>
  <input type="button" id="btn" value="Click This"><br>
  <label for="result">result</label><br>
  <input type="text" id="result" name="result">
</form>

edited Dec 16, 2020 at 19:04

answered Dec 16, 2020 at 18:47

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CodeKid Over a year ago

when i use this i get the following error Cannot read property 'addEventListener' of null

mplungjan Over a year ago

Sorry, I gave your button an ID

mplungjan Over a year ago

@CodeKid I made another version - I forgot that result is also a text field

deepak · Accepted Answer · 2020-12-16 19:03:11Z

0

function myFunction() {
  const data = document.querySelectorAll("#myform input[type='text'][id^=text]");
  //console.log(data);
  var fields = [];
  data.forEach(item => {
    if (item.value != '') {
      fields.push(item.value)
    }
  })

  document.getElementById("result").value = fields.join(",")
}

<form id="myform">
  <label for="text1">text1</label><br>
  <input type="text" id="text1" name="text1"><br>
  <label for="text2">text2</label><br>
  <input type="text" id="text2" name="text2"><br>
  <label for="text3">text3</label><br>
  <input type="text" id="text3" name="text3"><br>
  <label for="text4">text4</label><br>
  <input type="text" id="text4" name="text4"><br>
  <label for="text5">text5</label><br>
  <input type="text" id="text5" name="text5"><br>
  <label for="text6">text6</label><br>
  <input type="text" id="text6" name="text6"><br>
  <input type="button" onClick="myFunction()" value="Click This"><br>
  <label for="result">result</label><br>
  <input type="text" id="result" name="result">
</form>

edited Dec 16, 2020 at 19:03

answered Dec 16, 2020 at 18:53

deepak

1,3851 gold badge8 silver badges12 bronze badges

3 Comments

mplungjan Over a year ago

That is a really cumbersome way of mapping a form's inputs. Why not just [...data].forEach

deepak Over a year ago

hmm, Updated the code. Thank you for pointing out.

mplungjan Over a year ago

Do note that forEach does not work in early EDGE on html collections

Collectives™ on Stack Overflow

How to loop through text fields and concatenate the result using javascript

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related