我撰寫了一個簡單的表單來輸入用戶詳細資訊并在表格的同一頁面中顯示輸入的資料。
因此，在 JavaScript 部分，我定義了兩個名為 myCreateFunction() 和 myClearFunction() 的函式。
我還為所有元素添加了 required 屬性（ex-text/number 欄位，下拉串列）
當我測驗這個表單時，在我輸入并單擊提交后，它會在表中創建新行并顯示詳細資訊，它還會清除所有欄位，
并有請填寫此欄位彈出。
我在互聯網上嘗試了解決方案，但沒有任何效果。
誰能幫我弄清楚它為什么會彈出以??及如何修復它？
HTML :
<input type="button" value="Clear" id="btn_clear" onclick="myClearFunction()">
<input type="submit" value="Submit" id="btn_submit" onclick="myCreateFunction();myClearFunction();">
Javascript :
<script>
document.getElementById("dropdown_gender").value = ""
function myCreateFunction() {
var Ifname = document.getElementById("first_name").value;
var Ilname = document.getElementById("last_name").value;
var Igender = document.getElementById("dropdown_gender").value;
var Iage = document.getElementById("num_age").value;
var Ibyear = document.getElementById("num_birthyear").value;
if (Ifname != "") {
if (Ilname != "") {
if (Igender != "") {
if (Iage != "") {
if (Ibyear != "") {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = Ifname;
cell2.innerHTML = Ilname;
cell3.innerHTML = Igender;
cell4.innerHTML = Iage;
cell5.innerHTML = Ibyear;
//myClearFunction()
}
}
}
}
}
}
function myClearFunction() {
document.getElementById("first_name").value = "";
document.getElementById("last_name").value = "";
document.getElementById("dropdown_gender").value = "";
document.getElementById("num_age").value = "";
document.getElementById("num_birthyear").value = "";
}
</script>
完整代碼：https : //codeshare.io/YLbDlN
uj5u.com熱心網友回復：
當您清除欄位時，會觸發 HTML5 驗證并導致錯誤。要完全禁用它，我們可以使用event.preventDefault();. 由于您在表單無效時需要它，我們可以稍微更改您的代碼，以便僅在填寫所有欄位時禁用 HTML5 驗證，您可以執行以下操作：
<html>
<head>
<title>Form</title>
<style>
td {
padding: 10px;
}
h1 {
padding-left: 80px;
}
td,th {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 20px;
}
select {
font-size: 17px;
max-width: 88%;
width: 200px;
}
#btn_submit {
font-size: 20;
width: 115px;
height: 32px;
margin-left: -20px;
}
#btn_clear {
font-size: 20;
width: 100px;
height: 32px;
margin-left: -40px;
}
#myTable {
color:darkblue;
margin-top: -50px;
float: center;
margin-left: 500px;
padding: 5px.5px,5px,5px;
}
#entry {
float: left;
}
</style>
</head>
<body>
<h1>Entry Form </h1>
<form onsubmit="return false;" id="form">
<table id="entry">
<tr>
<td>First Name</td>
<td>:</td>
<td><input type="text" id="first_name" required></br></td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" id="last_name" required></td>
</tr>
<tr>
<td>Gender</td>
<td>:</td>
<td>
<select id="dropdown_gender" required>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Unspecified">Unspecified</option>
</select>
</td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="number" id="num_age" required></td>
</tr>
<tr>
<td>Birth Year</td>
<td>:</td>
<td><input type="number" id="num_birthyear" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="button" value="Clear" id="btn_clear" onclick="myClearFunction(event)"> <input type="submit" value="Submit" id="btn_submit" onclick="myCreateFunction(event)"></td>
</tr>
</table>
</form>
</br></br>
<table id="myTable" border="1">
<tr>
<th width="170px"> First Name </th>
<th width="170px"> Last Name </th>
<th width="120px"> Gender </th>
<th width="80px"> Age </th>
<th width="120px"> Birth Year </th>
</tr>
</table>
<script>
document.getElementById("dropdown_gender").value = ""
function myCreateFunction(event) {
var Ifname = document.getElementById("first_name").value;
var Ilname = document.getElementById("last_name").value;
var Igender = document.getElementById("dropdown_gender").value;
var Iage = document.getElementById("num_age").value;
var Ibyear = document.getElementById("num_birthyear").value;
if (Ifname != "") {
if (Ilname != "") {
if (Igender != "") {
if (Iage != "") {
if (Ibyear != "") {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = Ifname;
cell2.innerHTML = Ilname;
cell3.innerHTML = Igender;
cell4.innerHTML = Iage;
cell5.innerHTML = Ibyear;
myClearFunction(event);
}
}
}
}
}
}
function myClearFunction(event) {
event.preventDefault();
document.getElementById("first_name").value = "";
document.getElementById("last_name").value = "";
document.getElementById("dropdown_gender").value = "";
document.getElementById("num_age").value = "";
document.getElementById("num_birthyear").value = "";
}
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/318489.html
標籤：javascript html 功能 点击
上一篇：合并特定列和特定資料框的功能