Use a for loop in html, css, and javascript to generate unique element ids with corresponding values

Can you assist me in creating a function to generate element_id-value pairs and saving them into a file with the use of a for loop?

<body>
<form class="box1" >

<fieldset>

<label class="my_text4" >firstelement</label>
<input class="left_padd" type="text"  id="firstelement" name="basic_attributes"  value="firstvalue"  />
<p/>

<label class="my_text4" >secondelement</label> 
<input  class="left_padd" type="text"  id="secondelement" name="basic_attributes" value="secondvalue">
<p/>

<label class="my_text4" >thirdelenent</label>
<select id="thirdelement" name="thirdvalue" >
<option value="option1" selected>option1</option>
<option value="option2">option2</option>
</select>
<p/>

<div> <input  class="button1" type="button" id="bt" value="create variable_value file" onclick="saveFile()" />  </div>
</form>
</body>

<script>

let saveFile = () => {

// Extracting data from each form element.
var elements_names = ["basic_attributes"]

for(var j=0; i<elements_names.length; j++) 
{
var inputs = document.getElementsByName(elements_names[j])

for(var k=0; i<elements_names.length; k++) 
{
var id1 = inputs[0].getAttribute( 'id' );
var value1 = inputs[0].getAttribute( 'value' );                         
}
//document.write(id1 + " " + value1 + " " + inputs.length)
}

</script>

I need help in creating a function that can iterate through form elements to capture element_id-value pairs.

Answer №1

Is this the desired format?

<form class="box1">

<fieldset>

<label class="my_text4">Element One</label>
<input class="left_padd" type="text"  id="elementone" name="basic_attributes" value="elementvalueone" />
<br /><br />

<label class="my_text4">Element Two</label> 
<input class="left_padd" type="text" id="elementtwo" name="basic_attributes" value="elementvaluetwo">
<br /><br />

<label class="my_text4">Element Three</label>
<select id="elementthree" name="thirdvalue">
    <option value="option1" selected>option1</option>
    <option value="option2">option2</option>
</select>
<br /><br />

<div>
<input class="button1" type="button" id="bt" value="create_variable_value_file" onclick="saveFile()" /> 
</div>

</fieldset>
</form>

<div id="demo"></div>

<script>
function saveFile() {
    var elementNames = ["basic_attributes"];
    var j, k;
    var id, value;

    document.getElementById("demo").innerHTML = "";

    for(j=0; j < elementNames.length; j++)  {
    var inputs = 
    document.getElementsByName(elementNames[j]);

    for(k=0; k < inputs.length; k++)  {
        id = inputs[k].getAttribute("id");
        value = inputs[k].value; 
        document.getElementById("demo").innerHTML += id + " " + value + " " + inputs.length + "<br>";          
    }
}
}
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to adjust the size of an image within a block layout using either JavaScript or React?

I have a game to create, and I need a block of elements to be aligned like the image below. However, the kangaroo image is not displaying correctly. The actual size of the image is width:70px and height:100px. But I want to resize it to width: 49px and h ...

Identify a duplicate class name element using Selenium

<ul class="k9GMp "> <li class="Y8-fY "><span class="-nal3 "><span class="g47SY ">2</span> posts</span> </li> <li class="Y8-fY "><a class="-nal3 " href="/username/followers/" tabindex="0"><span ...

Reveal a concealed div upon submitting an HTML form to display the resulting output

I have created an HTML form to gather information about a person's name and location. Once the user submits the form, I want the output to be displayed at the bottom of the page using PHP echo. My specific requirement is, To initially hide the outp ...

Issue with HTML form not correctly submitting AJAX request to controller

My attempt to utilize ajax on the add to cart form doesn't seem to be working as expected. When I click on the Add to Cart button, it displays a blank page because I have implemented an ajax check method in the controller. Controller public functio ...

Unable to retrieve XML attributes while iterating through xml2js-parsed JSON items

I'm currently facing a challenge in accessing the attributes of items within an xml rss feed once it has been converted to json using the xml2js package. Although I can access individual attributes with items[0].el.$.attribute, my attempts to delve de ...

Javascript is currently facing issues with callbacks not functioning properly in an asynchronous manner

Attempting to execute one function after another in my discord.js code. Here is what I have: function1(function2) async function function1(callback) { var guild = client.guilds.cache.get(config.Server); let channels = guild.channels; fo ...

Error message: It seems the spatial reference for this ESRI object is missing

Currently, I am utilizing Esri GIS to load the center location from an address. However, I am encountering an issue as I am using a geocoder from Google to obtain longitude and latitude, which is resulting in the following error message: TypeError: this.s ...

What is the best way to divide a web page screen into three equal horizontal sections?

My goal is to split the screen into three equal sections horizontally so that I can place different images in each section. However, despite my efforts, I am encountering issues with white space and unequal division. This is my current setup: HTML: ...

Searching for values within an array using the ".includes" method

I'm curious if there's a method to determine if a string contains any characters that are also present in an array? const array = ["cake", "hello", "ok"]; const string = "hello"; let result = string.include ...

Cloning a file input does not retain the uploaded file in the cloned input. Only the original input retains the uploaded file

Whenever I duplicate an input type file, I encounter an issue where the uploaded file from the duplicated input is also linked to the original input. It seems like the duplicate input is somehow connected to and taking files for the original one. This is ...

How can I show or hide all child elements of a DOM node using JavaScript?

Assume I have a situation where the HTML below is present and I aim to dynamically conceal all the descendants of the 'overlay' div <div id="overlay" class="foo"> <h2 class="title">title</h2> ...

Incorporating ES6 (ECMAScript 2015) modules: bringing in index.js

As I explore the depths of the Internet, I find myself puzzled by the mysterious "index.js" module file. Through the use of babelJS + Node.js or Browserify/Webpack, I am able to effortlessly import an "index.js" module located within a "libs" directory wi ...

Leveraging the power of map in an Angular typescript file

I've been attempting to populate a Map in Angular by setting values dynamically. When certain buttons are clicked, the onClick function is invoked. typeArray: Map<number,string>; Rent(movieId: number){ this.typeArray.set(movieId,"Rental ...

I am looking to modify a particular value within an array of objects, but for some reason, the update is not being applied correctly

When attempting to copy the array, I update the selected value of a specific object based on the matching memberId. This process works well for a single member, however, issues arise when there are multiple members as the updating doesn't work correct ...

Ensuring the HTML5 video poster matches the dimensions of the video content

Is there a way to adjust the HTML5 video poster so it perfectly fits the dimensions of the video itself? Check out this JSFiddle demonstrating the issue: http://jsfiddle.net/zPacg/7/ Here's the code snippet: HTML: <video controls width="100%" h ...

Having trouble applying CSS to SVG icons from defs file in Webkit Browser

I've been tinkering with a project that incorporates SVG icons, hoping to style them using CSS for various scenarios and hover effects. However, my attempts are falling short in Webkit, while Firefox is displaying the icons as intended: http://codepe ...

What could be causing the varying thickness of the bottom borders in certain TDs/TRs in Firefox?

Do you notice that bottom borders in some <td> and <tr> elements are thicker in Firefox compared to Chrome and Opera? table.mytable td { border: 1px solid black; } <table class="mytable"> <!-- Table Code Snippet --> </table& ...

A guide on expanding MaterialUI Accordion in React by clicking on a different component

I am trying to implement a feature where clicking on a marker on a map will expand the corresponding accordion item. Both markers and accordion items have matching key values as seen in the screenshot below. https://i.sstatic.net/PAxOO.png The code I cur ...

The width of my root container does not display at a full 100% in mobile dimensions

After creating a simple React.js project, I set up the folder structure using `npx create-react-app`. Additionally, I added some styling with `* { margin: 0; padding: 0; box-sizing: border-box }`, and specified background colors for the body and #root elem ...

Capture a screenshot of the icons

I'm curious about displaying specific parts of images in a React Native application. class InstaClone extends Component { render() { return( <View style={{ flex:1, width:100 + "%", height:100 + "%" }}> <View style={st ...