Get the array from the input field

Could you please take a look at this function I have written:


  function AddRowToForm(row){
  $("#orderedProductsTblBody tr").each(function(){
  // find the first td in the row
  arr.push($(this).find("td:first").text());
  });
  for (i=0;i<arr.length;i++)
  // display the value in input field
document.getElementById("message").innerHTML = (arr[i] + "<br >");
 });
} 

I am encountering an issue when trying to retrieve the array into an input field within a form. The specific input field causing me trouble is the last one with the id "message".

fieldset class="pure-group">
  <label for="date">Data: </label>
  <input id="date" name="date" type="text"/>
</fieldset>

<fieldset class="pure-group">
  <label for="time">Ora: </label>
  <input id="time" name="time" />
</fieldset>

<fieldset class="pure-group">
  <label for="pax">Numero di Persone: </label>
  <input id="pax" name="pax" />
</fieldset>

<fieldset class="pure-group">
  <label for="message">Esperienze: </label>
  <input id="message" name="message" rows="5"></input>
</fieldset>

I have tested replacing innerHTML with document.write, which works but clears everything in the process. Any suggestions or help would be greatly appreciated. Thank you!

Answer №1

There are a couple of issues here that need addressing. Firstly, you're setting the text of an input field using the value property instead of appending to it. Additionally, when working with a textarea, make sure to use the \n character for new lines.

$("#orderedProductsTblBody tr").each(function(){
   arr.push($(this).find("td:first").text());
});
for (var i=0; i<arr.length; i++) {
   // display the value in input field
   document.getElementById("message").value += arr[i] + "\n";
}

So how should this be done correctly? Simply use the join method.

document.getElementById("message").value = arr.join("\n");

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

Each time an ajax request is made, the mCS_no_scrollbar class is consistently applied

I recently integrated the jquery CustomScrollbar plugin into my project. You can find more information about this plugin at the following link: Currently, I am loading data dynamically using ajax. Below is a snippet of the code I'm using: $(window). ...

Encountering a "Karma error: resource not discovered" while examining an AngularJS application

I'm attempting to run my AngularJS application in Netbeans IDE, and I believe I've set up the files correctly. However, an error is appearing when I try to test it by right-clicking on my project and selecting Test: Karma cannot start (incorrect ...

When utilizing the Express framework, the object req.body is initially empty when collecting data from a basic

I'm encountering an issue where I receive an empty object in req.body when submitting my HTML form. This problem persists whether testing in Postman or directly submitting the form from localhost in the browser. Upon logging it in the node console, t ...

What is the best way to set the v-model property to an object that is constantly changing

I'm in the process of creating a dynamic form that allows users to add additional fields by simply clicking on a button labeled "adicionar condição." The concept is similar to what can be seen in the screenshot below: https://i.stack.imgur.com/Mpmr6 ...

Extract specific data points from external API responses on a webpage crafted in HTML

I require assistance on how to extract individual values from an HTML page. I received a response from the PAYU payment gateway team in HTML format, but I need to retrieve specific attribute values related to the transaction details. Below is the response ...

"Troubleshooting: ngForm.controls returning undefined value in Angular application

Trying to test this HTML code in Angular: <form name="formCercarUsiari" #formCercarUsuari="ngForm" class="tab-content"> <input #inputNif class="form-control input-height" maxlength="100" type="text" placeholder="Indiqui NIF" name="nif" i18n-pla ...

Leverage variables in the path of your Express.js route

Currently in the process of developing a web application using the MEAN stack and I have a specific scenario in mind: Users should be able to sign up, but then they must also register at least one company. Upon registering a company, the base URL struct ...

Arranging Data: Processing Files with Input/Output

I've been trying to figure out how to sort an Array, but I keep running into some error messages that I don't quite understand. The errors I'm receiving are: [WARNING name lookup of 'index' changed. matches this 'char* index ...

JavaScript script to modify the parameter 'top' upon clicking

Here is the pen I've made. HTML <div class = 'cc'> <div class = 'bb'><div class = 'aa'> Some word </div></div> </div> CSS .cc { width: 100%; min-height: 90px; margin: 0; ...

"Troubleshooting a Node.js JWT issue in a React.js

I've been diving into backend development and recently created some small APIs. They all function perfectly in Postman, but I encountered an issue when attempting to execute this particular call const onSubmit = async () => { try { setIsL ...

Demonstrating how to showcase information from an API array in a Node.js application and render it as a

I am aiming to showcase information retrieved from the API on my pug page, specifically displaying the names of car parks. Below is the code from Index.js var request = require('request'); var express = require('express'); var ...

In React, facing difficulty in clearing setTimeout timer

After clicking the button, I want my code to execute 3 seconds later. However, I'm having trouble achieving this. It either runs immediately or doesn't stop running. <Button onClick={setTimeout(() => window.location.reload(false), 4000), cl ...

Java failing to loop through entire array

I am facing an issue where I have 5 rectObj objects, but the loop is only continuing twice. Below is the code snippet: public boolean bottomLeft() { boolean ret = false; Iterator<rectObj> rectItr = Main.rectAr.iterator(); while (rectItr ...

Exploring the utilization of type (specifically typescript type) within the @ApiProperty type in Swagger

Currently, I am grappling with a dilemma. In my API documentation, I need to include a 'type' in an @ApiProperty for Swagger. Unfortunately, Swagger seems to be rejecting it and no matter how many websites I scour for solutions, I come up empty-h ...

Having trouble with transmitting a JSON array to a Node.js server using AJAX

When sending data via AJAX to my nodejs server, I use the following JavaScript on the client side: function login(){ var array=[]; var jsonData={}; jsonData.user=$('#user').val(); jsonData.pass=$('#pass').val(); arr ...

Is there a way to modify the image of a single face in a Cubemap using THREE.js?

In my project, I am attempting to showcase a panorama using cubemaps by initially loading and displaying 6 low-quality images on the cubemap. Achieving this can be easily done through the following code: var urls = [ 'path/to/low-q-pos-x.png', & ...

The Next.js app's API router has the ability to parse the incoming request body for post requests, however, it does not have the

In the process of developing an API using the next.js app router, I encountered an issue. Specifically, I was successful in parsing the data with const res = await request.json() when the HTTP request type was set to post. However, I am facing difficulties ...

Assigning values to input fields based on SPAN elements

In my current Code-pen project, I have successfully displayed calculated results next to input fields using a SPAN element. However, I am now attempting to retrieve the calculated value from the SPAN and update the corresponding input fields. <!-- Add ...

What is the best way to convert a comma-separated string of elements into an integer array?

Here is an example: 5,6,13,4,14,22. I am looking to populate the array with 5 6 13 4 12 22. Once compiled, it should return: 5 6, 3 4, 4, 2. When I input 2,3,5,1,6,4, the array will be correct. int nr=0; for(int j=0;j<sizeOfString;j++){ i ...

What is the best way to display a file explorer window in an electron application that allows users to choose a specific folder?

How can I utilize Electron with React to open a file explorer window, allowing users to choose a specific folder and then capturing the selected filepath for additional processing? Any guidance or tips on how to achieve this would be greatly appreciated ...