How to Store and display user multiple input values to array in javascript?

Question

my task is to store user multiple input values in javascript array using push method

the code is

<body> 
    <h3>employee form</h3>
    <div class="row">
        <div class="col-md-6">
            <form>
    
        <label for="id">Id</label>
        <input type="number" id="i1"/></br>
        <label>Name:</label>
        <input type="Name" id="name"></br>
        <label for="qty">Qty:</label>
        <input type="Qty" id="qty"/></br>
        <label for="price">price:</label>
        <input type="price" id="price"/></br>
        <button onclick="pushData();">ADD</button>
    
</div>
<div class="col-md-6" id="display">

</div>


</div>
</form>


 <script>
          var myArr = [""];

i tried but i didnt get exact output freinds please give some tips are codes friends

This can be easily done by looping the inputs then push each value into array. You might wanted to provide sample output as well in order for us to know what kind of "exact output" do you mean. — Joshua Ooi
– Joshua Ooi, Commented Sep 8, 2022 at 12:07

DCodeMania · Accepted Answer · 2022-09-08 12:59:54Z

1

function pushData() {
        const products = [];
        const data = {
          id: document.getElementById('id').value,
          name: document.getElementById('name').value,
          qty: document.getElementById('qty').value,
          price: document.getElementById('price').value
        }
        products.push(data);
        document.getElementById('display').innerText += JSON.stringify(data, null, 2) + ',';
      }

<h3>employee form</h3>
    <div class="row">
      <div class="col-md-6">
        <form method="post">

          <label for="id">Id</label>
          <input type="number" id="id" /></br>
          <label>Name:</label>
          <input type="text" id="name"></br>
          <label for="qty">Qty:</label>
          <input type="text" id="qty"></br>
          <label for="price">price:</label>
          <input type="text" id="price" /></br>
          <button type="submit" onclick="event.preventDefault(); pushData();">ADD</button>
        </form>
      </div>
      <div class="col-md-6">
        [<span id="display"></span>]
      </div>

    </div>

You can try this one it just push multiple products into array in display div

answered Sep 8, 2022 at 12:59

DCodeMania

1,1572 gold badges9 silver badges23 bronze badges

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

1 Comment

Mohammed Ajmal Over a year ago

I want this output Thanks bro

Tech Stack by Antra · Accepted Answer · 2022-09-08 12:25:19Z

0

Try this..

<div>
  <input type="text" class="name" />
  <input type="text" class="quantity" />
  <input type="text" class="price" />
  <button class="update" >
    Update Data
  </button>
</div>

<div class="updated_data"></div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var final_array = [];
$(".update").on("click",()=>{
        // Creating a new sub array
        var sub_array = [];
    
    // Getting the input vals
    var name = $(".name").val();
    var quantity = $(".quantity").val();
    var price = $(".price").val();
    
    // adding vals to the new array
    sub_array.push(name,quantity,price);
    
    //Updating the main array with sub array we just created
    final_array.push(sub_array);
    
    // Displaying in the page 
    $(".updated_data").append(`
            <div>
            <p>${(final_array[final_array.length-1])[0]}</p>
          <p>${(final_array[final_array.length-1])[1]}</p>
          <p>${(final_array[final_array.length-1])[2]}</p>
        </div>
    `);
    
    //Clearing all input fields for new entry 
    $(".name").val('');
    $(".quantity").val('');
    $(".price").val('');
});
</script>

All the inserted values are being stored in a main array final_array .

Here's the working JSfiddle for the same

I made this in Jquery instead of JS cause its easy to work with. Let me know if you came across any trouble.

edited Sep 8, 2022 at 12:25

answered Sep 8, 2022 at 12:23

Tech Stack by Antra

286 bronze badges

1 Comment

AKX Over a year ago

Here's hoping no one enters <h1>hello</h1> as their name!

Joshua Ooi · Accepted Answer · 2022-09-08 12:37:46Z

0

Without any specific output format, this is how to get and push inputs value into array and displaying in order.

let myArr = [];
function pushData(){
  const inputs = document.getElementsByClassName("getVal");
  for(let i=0; i<inputs.length;i++){
    myArr.push(inputs[i].value);
  }
  document.getElementById("display").textContent = myArr;
}

<html>
<head>
</head>
<body> 
  <h3>Employee Form</h3>
  <div class="row">
   <div class="col-md-6">
     <form>
      <label for="id">Id</label>
       <input type="number" id="i1" class="getVal"/></br>
       <label>Name:</label>
       <input type="Name" id="name" class="getVal"></br>
       <label for="qty">Qty:</label>
       <input type="Qty" id="qty" class="getVal"/></br>
       <label for="price">price:</label>
       <input type="price" id="price" class="getVal"/></br>
       <button type="button" onclick="pushData()">ADD</button>
      </form>
    </div>
    <div class="col-md-6" id="display">

    </div>
   </div>
</body>
</html>

edited Sep 8, 2022 at 12:37

answered Sep 8, 2022 at 12:29

Joshua Ooi

1,1907 silver badges20 bronze badges

2 Comments

Mohammed Ajmal Over a year ago

sir this is ok but I save multile user data in the array suppose i click add button in second time the data was add and again show div sir

Joshua Ooi Over a year ago

That's easy. Just more the myArr declaration to global. See the updated answer.

Collectives™ on Stack Overflow

How to Store and display user multiple input values to array in javascript?

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related