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

MohammedAjmal
September 8, 2022
204 views
3 votes
3 Answers

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

Answers

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.

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>

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

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers