通過使用表單創建用戶輸入“電子表格”
[英]creating a user input "spreadsheet" by use of form
問題描述
我創建了以下內容：
<!DOCTYPE html>
<body>
<h1>Budget Input</h1><br>
<label for="category">Category:</label>
<input type="text" name="category" id="category">
<label for="amount">Amount:</label>
<input type="currency" name="amount" id="amount" value="$">
<label for="frequency">Frequency: </label>
<select id="frequency" name="frequency">
<option value="weekly">Weekly</option>
<option value="fortnightly">Fortnightly</option>
<option value="monthly">Monthly</option>
</select>
<button id="submit" onclick="submit()">Save</button>
</form>
<br>
<hr>
<h1>My Budget</h1>
<table id="output">
<thead>
<tr>
<th id="heading"><b>Category</b></th>
<th id="heading"><b>Amount</b></th>
<th id="heading"><b>Frequency</b></th>
</tr>
</thead>
<tr>
<td id="outText"><span id="categoryResult"></span></td>
<td id="outText"><span id="amountResult"></span> </td>
<td id="outText"><span id="optionResult"></span></td>
</tr>
</table>
</span>
</body>
它以我想要的方式工作。 用戶在“類別、金額、選項”字段中輸入數據並點擊“保存”按鈕，數據放在下方。 但是我希望用戶能夠提交多行數據。 我該如何做到這一點？ 當前輸入新數據會覆蓋第一個輸入。 如果這是有道理的。 （一般是編碼新手）
1 個解決方案
解決方案1
0 2022-06-19 06:39:21
function submit() {
var strText = document.getElementById("category").value;
var strText1 = document.getElementById("amount").value;
var strText2 = document.getElementById("frequency").value;
var result1 = strText;
var result2 = strText1;
var result3 = strText2;
document.getElementById('categoryResult').textContent = result1;
document.getElementById('amountResult').textContent = result2;
document.getElementById('optionResult').textContent = result3;
}
在 JS 中使用用戶表單輸入
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.