通过使用表单创建用户输入“电子表格”
[英]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.