HTML coding with Javascript for using text forms to connect text fields together

Question

I need to have 5 text fields, and after the user inputs text in there, i need to put the text together into a text field called Text Result.

This is my code so far but I am unsure on how to continue.

   <form>
    <div class="textFields">
    <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="textResult">Text Result</label><br>
    <input type="text" id="textResult"name="textResult"><br>
    </div>

    </form>

    <script>

    function myFunction() {
      var x = document.getElementsByClassName("textFields");
      var i;
       for (i = 0; i < x.length; i++) {
  




      </script>

I have posted everything I have done so far, I am just stuck on how to continue — WILLIAM INGLE
– WILLIAM INGLE, Commented Jan 13, 2021 at 15:42
We're not a code writing service, we're a help you fix your broken code site. That kinda mean you need some broken code for us to help you with. For a suggestion on how to proceed, i'd try logging each element in the result from getElementsByClassName to the console so you can examine it contents. — The Head Rush
– The Head Rush, Commented Jan 13, 2021 at 17:30

mplungjan · Accepted Answer · 2021-01-13 17:25:49Z

1

getElementsByClassName is not as useful as querySelectorAll

You can delegate

I added a class to the input fields and wrapped them in their own div

window.addEventListener("load", function() { // on page load
  const container = document.querySelector(".textFields");
  const result = document.getElementById("textResult");
  const addButton = document.getElementById("add");
  const textFields = container.getElementsByClassName("textInput"); // getElementsByClassName is a LIVE collection
  container.addEventListener("input", function() {
    const res = [...textFields] // make the nodelist an array 
      .map(fld => fld.value) // return the value
      .filter(val => val.trim() !== "") // only take actual content
      .join(", "); // .join (""); // join on ", " or ""
    result.value = res;
  });
  addButton.addEventListener("click", function() {
    const lastNumber = textFields.length; // remember it is a LIVE list 
    const id = "text" + (lastNumber + 1); // your IDs start at 1
    const label = document.createElement("label")
    label.setAttribute("for", id)
    label.textContent = id;
    container.appendChild(label)
    container.appendChild(document.createElement("br"))
    const textField = document.createElement("input")
    textField.setAttribute("id", id)
    textField.setAttribute("name", id)
    textField.classList.add("textInput")
    container.appendChild(textField)
  });
});

<form>
  <button id="add" type="button">Add</button>
  <div class="textFields">
    <label for="text1">text1:</label><br>
    <input type="text" id="text1" name="text1" class="textInput"><br>

    <label for="text2">text2:</label><br>
    <input type="text" id="text2" name="text2" class="textInput"><br>

    <label for="text3">text3:</label><br>
    <input type="text" id="text3" name="text3" class="textInput"><br>

    <label for="text4">text4:</label><br>
    <input type="text" id="text4" name="text4" class="textInput"><br>

    <label for="text5">text5</label><br>
    <input type="text" id="text5" name="text5" class="textInput"><br>
  </div>
  <label for="textResult">Text Result</label><br>
  <input type="text" id="textResult" name="textResult"><br>
</form>

edited Jan 13, 2021 at 17:25

answered Jan 13, 2021 at 15:49

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

8 Comments

WILLIAM INGLE Over a year ago

That works perfectly, but I have to use Javascript for it, I am quite new to javascript.

mplungjan Over a year ago

it IS JavaScript

WILLIAM INGLE Over a year ago

Thankyou, after looking at it i have a better understanding of it now

WILLIAM INGLE Over a year ago

With that code, will still work to add in a button that adds a 6th text field in

WILLIAM INGLE Over a year ago

Ill try and get that working using createElement()

|

s.kuznetsov · Accepted Answer · 2021-01-13 15:57:39Z

1

I made a decision for you with a button, by clicking on which you will receive the entered values.

let x = document.querySelectorAll('.textFields .text');
let button = document.querySelector('.textFields input[type="button"]');
let result = document.querySelector('#textResult');

button.onclick = function() {
  result.value = '';
    for (i = 0; i < x.length; i++) {
      result.value += x[i].value + ' ';
    }
}

<form>
    <div class="textFields">
    <label for="text1">text1:</label><br>
    <input type="text" class="text" name="text1"><br>

    <label for="text2">text2:</label><br>
    <input type="text" class="text" name="text2"><br>

    <label for="text3">text3:</label><br>
    <input type="text" class="text" name="text3"><br>

    <label for="text4">text4:</label><br>
    <input type="text" class="text" name="text4"><br>

    <label for="text5">text5</label><br>
    <input type="text" class="text" name="text5"><br>
    
    <input type="button" name="button" value="get"><br>

    <label for="textResult">Text Result</label><br>
    <input type="text" id="textResult" name="textResult"><br>
    </div>
</form>

answered Jan 13, 2021 at 15:57

s.kuznetsov

15.3k3 gold badges12 silver badges31 bronze badges

1 Comment

WILLIAM INGLE Over a year ago

So could this code be used to add a button to it aswell to add a seventh text field? Curious to how that would work with how you used a for loop with the code, would be good for experience to see how it is done

naveed · Accepted Answer · 2021-01-13 15:42:11Z

0

you can try using concat() method. The concat() method is used to join two or more strings. example:

var str1 = "Hello ";
var str2 = "William";
var str3 = " How are you doing!";
var res = str1.concat(str2, str3);

answered Jan 13, 2021 at 15:42

naveed

1099 bronze badges

1 Comment

WILLIAM INGLE Over a year ago

The text fields will have user input in them, I was hoping to use the getElementsByClassName function

Collectives™ on Stack Overflow

HTML coding with Javascript for using text forms to connect text fields together

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related