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
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.