Retrieve data from input fields using an array

Question

Retrieve data from input fields using an array

I am currently developing a form that allows users to add multiple inputs like so:

<script type="text/javascript">
   <!--

   var counter = 0;
   var limit = 4;
   window.onload = moreFields;
   function moreFields() {
    if (counter == limit) {
              alert('You have reached the limit of adding ' + counter + ' inputs');
         }
         else

    var newFields = document.getElementById('sa-groep').cloneNode(true);
        newFields.id = '';
        newFields.style.display = 'block';

    var newField = newFields.childNodes;
    for (var i = 0; i < newField.length; i++) {
        var hetId = newField[i].id
        if (hetId)
            newField[i].id = hetId + counter;
    }

    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);

    counter++;
    }

Everything is working as intended, each input field is getting a unique id. However, I realized that it would be more efficient to fetch all the input values using getElementsByClassName. So I created a function to achieve this:

function getClassValue() {

    var secAut = [];
    var readyItems = document.getElementsByClassName('SA');
        for(var i = 0; i < readyItems.length; i++){
        secAut.push(readyItems[i].value);
        document.write(3011+i+  " contains: " + secAut[i] + "<br />");
        }
        }

Here is the corresponding HTML code:

<body>

<div id="sa-groep" style="display: none">
    <input class="SA" id="sa_" value=" " /> 

    <select class="RC" id="rc_"> 
        <option>Rating</option>
        <option value="excellent">Excellent</option>
        <option value="good">Good</option>
        <option value="ok">OK</option>
    </select><br /><br />

    <input type="button" value="Remove review"
        onclick="this.parentNode.parentNode.removeChild(this.parentNode)" /><br /><br />

</div>

    <span id="writeroot"></span>

    <input type="button" onclick="moreFields()" value="Give me more fields!" />

    <input type="button" onclick="getClassValue()" value="Send form" />

</body>

However, when I try to execute the function, it only displays: 3011 contains: So, what am I missing here?

javascript arrays getelementsbyclassname

Answer 1

Answer №1

Upon initial inspection, my recommendation is for you to refrain from using document.write (as it replaces all text on your document) and instead utilize console.log("something..") or the innerHTML property within a designated div.

As previously mentioned, document.write will overwrite all content on the page with the string provided.

Answer 2

Upon initial inspection, my recommendation is for you to refrain from using document.write (as it replaces all text on your document) and instead utilize console.log("something..") or the innerHTML property within a designated div.

As previously mentioned, document.write will overwrite all content on the page with the string provided.

Answer 3

Answer №2

An issue next to the curly brace (shoutout to @James) was caused by cloning hidden fields, resulting in an empty element at the beginning of the arrays. To remove the first element of an array, I used the shift() method. Although there might be room for improvement, this is my current solution:

function getClassValue() {

var secAut = [];    // array containing names of secondary authors
var readyItems = document.getElementsByClassName('auteur');
    for(var i = 0; i < readyItems.length; i++){
    secAut.push(readyItems[i].value);
    }
var secAutMinus = secAut.shift(); // remove 1 element from array because the first input is empty (display: none)

var relCode = [];   // 2nd array containing relationship codes
var relCodeready = document.getElementsByClassName('relcode');
for(var i = 0; i < relCodeready.length; i++){
    relCode.push(relCodeready[i].value);
    }
var relCodeMinus = relCode.shift(); // remove 1st element

    for(var k= 0; k < secAut.length; k++){
    console.log(3012+k+  ' contains: ' + secAut[k] + ' is ' + relCode[k] + '<br/>'); // reading arrays excluding the first empty element
    }
    }

Answer 4

An issue next to the curly brace (shoutout to @James) was caused by cloning hidden fields, resulting in an empty element at the beginning of the arrays. To remove the first element of an array, I used the shift() method. Although there might be room for improvement, this is my current solution:

function getClassValue() {

var secAut = [];    // array containing names of secondary authors
var readyItems = document.getElementsByClassName('auteur');
    for(var i = 0; i < readyItems.length; i++){
    secAut.push(readyItems[i].value);
    }
var secAutMinus = secAut.shift(); // remove 1 element from array because the first input is empty (display: none)

var relCode = [];   // 2nd array containing relationship codes
var relCodeready = document.getElementsByClassName('relcode');
for(var i = 0; i < relCodeready.length; i++){
    relCode.push(relCodeready[i].value);
    }
var relCodeMinus = relCode.shift(); // remove 1st element

    for(var k= 0; k < secAut.length; k++){
    console.log(3012+k+  ' contains: ' + secAut[k] + ' is ' + relCode[k] + '<br/>'); // reading arrays excluding the first empty element
    }
    }

Answer 5

Answer №3

To ensure the loop functions properly, it is necessary for it to begin at 1 because the 0th element is actually the hidden (cloned) one.

function fetchClassValues() {

  var secAut = [];
  var readyItems = document.getElementsByClassName('SA');

  for (var i = 1; i < readyItems.length; i++) {
    secAut.push(readyItems[i].value);
    document.write(3011 + i + " contains: " + secAut[i - 1] + "<br />");
  }
}

Furthermore, there are a few other issues such as a missing curly brace after the else statement in moreFields.

Check out this functional fiddle

Answer 6

To ensure the loop functions properly, it is necessary for it to begin at 1 because the 0th element is actually the hidden (cloned) one.

function fetchClassValues() {

  var secAut = [];
  var readyItems = document.getElementsByClassName('SA');

  for (var i = 1; i < readyItems.length; i++) {
    secAut.push(readyItems[i].value);
    document.write(3011 + i + " contains: " + secAut[i - 1] + "<br />");
  }
}

Furthermore, there are a few other issues such as a missing curly brace after the else statement in moreFields.

Check out this functional fiddle

Retrieve data from input fields using an array

Answer №1

Answer №2

Answer №3

Similar questions

How can the issue of the background fill option covering multiple loading bars be resolved?

Exploring the function of variables in VueJS

What is the best way to execute a callback once a mongoose findOneAndUpdate operation has successfully completed

Using jquery to toggle active nav links in Bootstrap

Changing the text color and background color of a span element when a ng-click event is triggered

Angular ngView not displaying content on the page

Have I potentially compromised my project by executing the command `npm audit fix --force`?

Getting the toState parameter using the $transitions service in the latest version of the ui-router

Issue encountered with websocket connection while attempting to include dependencies

Improving efficiency for handling a vast number of inputs in React applications

Toggling in JS does not alter the DIV element

Can a double array be classified as an object?

React/Javascript - Executing Function returns prematurely

How to send route parameters to a controller function in ExpressJS

Unable to establish a connection with the default port on Mongo DB while utilizing Node.js

send back information obtained via an ajax request made by a javascript module

Transmitting Several Pictures at Once Through WhatsApp-WebJS

Incorporating middleware to handle 404 errors in Express

AngularJS $scope variable issue

In NextJS 12, an UnhandledPromiseRejectionWarning occurs when trying to reference the TextEncoder which is not defined