CODEWITHSUNDEEP
javascripthtml
WILLIAM INGLE
WILLIAM INGLE

Reputation: 25

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

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>

Upvotes: 1

Views: 72

Answers (3)

mplungjan
mplungjan

Reputation: 178285

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>

Upvotes: 1

s.kuznetsov
s.kuznetsov

Reputation: 15223

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>

Upvotes: 1

naveed
naveed

Reputation: 111

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);

Upvotes: 0

Related Questions