我的任務是使用 push 方法將用戶多個輸入值存盤在 javascript 陣列中
代碼是
<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 = [""];
我試過了，但我沒有得到確切的輸出朋友請給一些提示是代碼朋友
uj5u.com熱心網友回復：
嘗試這個..
<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>
所有插入的值都存盤在主陣列final_array 中。
這是相同的作業JSfiddle
我在 Jquery 而不是 JS 中做了這個，因為它很容易使用。如果您遇到任何麻煩，請告訴我。
uj5u.com熱心網友回復：
沒有任何特定的輸出格式，這就是如何獲取輸入值并將其推送到陣列中并按順序顯示。
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>uj5u.com熱心網友回復：
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>你可以試試這個，它只是將多個產品推送到顯示 div 中的陣列中
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/505651.html
標籤：javascript html jQuery
上一篇：搜索和替換文本但排除某些標簽