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

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

the code is

<body> 
    <h3>employee form</h3>
    <div >
        <div >
            <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  id="display">

</div>


</div>
</form>


 <script>
          var myArr = [""];

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

CodePudding user response：

Try this..

<div>
  <input type="text"  />
  <input type="text"  />
  <input type="text"  />
  <button  >
    Update Data
  </button>
</div>

<div ></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.

CodePudding user response：

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 >
   <div >
     <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 type="button" onclick="pushData()">ADD</button>
      </form>
    </div>
    <div  id="display">

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

CodePudding user response：

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 >
      <div >
        <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 >
        [<span id="display"></span>]
      </div>

    </div>

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