How to store id with values in javascript?

Question

How can i read the value of all the textarea when button is clicked such that, i should store that value with its corresponding id's . I tried inputs.map(input => input.innerHTML); this but this only get me the content not the id's with it ``` I just want to store id and its corresponding value into formdata.

function submitworksheet(){
let formData = new FormData();
let inputs = Array.from(document.querySelector(".worksheet"));
let formDataArray = inputs.map(input => input.innerHTML);
let x;
for (x of formDataArray) {
  formData.append(x + x);
}
}

<div class="worksheet" id="ws">
<p>I learned that the message is to never give up.</p>
<textarea id="1"></textarea>

<p>I'll be so excited when summer break arrives.</p>
<textarea id="2"></textarea>

<p>When are we eating?</p>
<textarea id="3"></textarea>
<button onclick="submitworksheet()" >Submit</button>
<div>

Sajjad Ali · Accepted Answer · 2020-12-25 07:19:55Z

1

You can update your submitworksheet function as follows

function submitworksheet(){
let formData = new FormData();
// Getting all textarea inside container, in this case 'div' with id ws
var container = document.querySelector("#ws");
var textarea = container.querySelectorAll("textarea");
// Appending to formData
for(let i = 0; i < textarea.length; i++) {
    let value = textarea[i].value;
    let id = textarea[i].id;
    formData.append(id, value);
}
}

You can achieve same functionality with JQuery as

function submitworksheet(){
let formData = new FormData();
$('.worksheet textarea').each(function() {
  let id = this.id;
  let value = this.value;
  formData.append(id, value);
});
}

edited Dec 25, 2020 at 7:19

answered Dec 25, 2020 at 7:08

Sajjad Ali

3043 silver badges12 bronze badges

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

Comments

deyu Pan · Accepted Answer · 2020-12-25 07:07:54Z

1

You can try this.

// get all textarea element
let inputs = Array.from(document.getElementsByTagName("textarea"));
for(let i = 0; i < inputs.length; i++) {
    // get textarea value
    let value = inputs[i].value;
    // get textarea id
    let id = inputs[i].id;
}

for more info you can reference id Property and value Property

answered Dec 25, 2020 at 7:07

deyu Pan

1712 bronze badges

Comments

D. Seah · Accepted Answer · 2020-12-25 07:08:37Z

0

maybe this will help you to move forward

function submitworksheet() {
    const values = [...document.querySelectorAll(".worksheet textarea")].reduce((acc, curr) => {
    acc[curr.getAttribute("id")] = curr.value;
    return acc;
  }, {});
  console.log(values);
}

<div class="worksheet" id="ws">
  <p>I learned that the message is to never give up.</p>
  <textarea id="1"></textarea>

  <p>I'll be so excited when summer break arrives.</p>
  <textarea id="2"></textarea>

  <p>When are we eating?</p>
  <textarea id="3"></textarea>
  <button onclick="submitworksheet()">Submit</button>
</div>

answered Dec 25, 2020 at 7:08

D. Seah

4,7121 gold badge15 silver badges27 bronze badges

Comments

Kevin Zhang · Accepted Answer · 2020-12-25 07:08:43Z

0

Try below code to get all text & value from p & textarea.

function submitworksheet(){
let formData = new FormData();
let children = Array.from(document.querySelectorAll(".worksheet > p , textarea"));

let results = [];
children.forEach(item => {
  console.log(item.innerHTML || item.value);
});
}

<div class="worksheet" id="ws">
<p>I learned that the message is to never give up.</p>
<textarea id="1"></textarea>

<p>I'll be so excited when summer break arrives.</p>
<textarea id="2"></textarea>

<p>When are we eating?</p>
<textarea id="3"></textarea>
<button onclick="submitworksheet()" >Submit</button>
<div>

answered Dec 25, 2020 at 7:08

Kevin Zhang

1,1041 gold badge6 silver badges16 bronze badges

Comments

Himanshu · Accepted Answer · 2020-12-25 07:26:50Z

const submitworksheet = () => {
  let data = []
  const textAreas = document
    .getElementsByTagName('textarea');
  for (let i = 0; i < textAreas.length; i++) {
    let temp = {}
    temp.id = textAreas[i].getAttribute('id');
    temp.data = textAreas[i].value;
    data.push(temp)
  }
  console.log(data);
}

<!DOCTYPE html>
<html>

<body>
  <div class="worksheet" id="ws">
    <p>I learned that the message is to never give up.</p>
    <textarea id="1"></textarea>

    <p>I'll be so excited when summer break arrives.</p>
    <textarea id="2"></textarea>

    <p>When are we eating?</p>
    <textarea id="3"></textarea>
    <button onclick="submitworksheet()">Submit</button>
    <div>
</body>

</html>

Collectives™ on Stack Overflow

How to store id with values in javascript?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related