javascript - 多按钮在html webform中不起作用,当单击显示按钮时它正在提交
问题描述
在下面的 HTML 代码中,我们有两个 div,一个在我们打开表单时可见,另一个必须在我们单击“显示”按钮时可见,我们还有另一个按钮“提交”。
但是,当我单击“显示”按钮时,它正在提交数据。当我单击“提交”按钮时,它正在提交数据。
我所需要的只是当我点击“显示”时它会显示数据,当我点击提交时它会提交数据。
<!DOCTYPE html>
<html>
<body style="background-color:lightgrey;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.5">
<base target="_top">
</head>
<body>
<h1>Internal Order Form</h1>
<form id="myform" >
<div>
<label for="Product1">Product01 :</label>
<select id="Product1" style="width: 100px;" name="Product1" required >
<option value="" style="display:none;"></option>
<option value="Cow_Milk_Items">Cow Milk Items</option>
<option value="Buffalo_Milk_Items">Buffalo Milk Items</option>
<option value="Dry_Items">Dry Items</option>
</select>
<label>Item Name01 :
<input list="Item_Name1" style="width: 100px;" name="Item_Name1" /></label>
<datalist id="Item_Name1" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty01 :
<input type="Number" name="Qty1" style="width: 100px;" >
<label for="KG_PC1">KG/PC :</label>
<select id="KG_PC1" name="KG_PC1">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate01 :
<input type="Number" name="Rate1" id="Number" style="width: 100px;" >
Size01 :
<input type="text" name="Size1" id="Size1" style="width: 100px;" >
Order No.01 :
<input type="Number" name="Order_No1" id="Order_No1" style="width: 100px;" >
<br>
<label for="Product2">Product02 :</label>
<select id="Product2" style="width: 100px;" name="Product2" >
<option value="" style="display:none;"></option>
<option value="Cow_Milk_Items">Cow Milk Items</option>
<option value="Buffalo_Milk_Items">Buffalo Milk Items</option>
<option value="Dry_Items">Dry Items</option>
</select>
<label>Item Name02 :
<input list="Item_Name2" style="width: 100px;" name="Item_Name2" /></label>
<datalist id="Item_Name2" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty02 :
<input type="Number" name="Qty2" style="width: 100px;" >
<label for="KG_P">KG/PC :</label>
<select id="KG_PC2" name="KG_PC2">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate02 :
<input type="Number" name="Rate2" id="Number" style="width: 100px;" >
Size02 :
<input type="text" name="Size2" id="Size2" style="width: 100px;" >
Order No.02 :
<input type="Number" name="Order_No2" id="Order_No2" style="width: 100px;" >
<br>
</div>
<div id="myDIV" style="display: none;">
<label for="Product3">Product03 :</label>
<select id="Product3" style="width: 100px;" name="Product3" >
<option value="" style="display:none;"></option>
<option value="Cow_Milk_Items">Cow Milk Items</option>
<option value="Buffalo_Milk_Items">Buffalo Milk Items</option>
<option value="Dry_Items">Dry Items</option>
</select>
<label>Item Name03 :
<input list="Item_Name3" style="width: 100px;" name="Item_Name3" /></label>
<datalist id="Item_Name3" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty03 :
<input type="Number" name="Qty3" style="width: 100px;" >
<label for="KG_PC">KG/PC :</label>
<select id="KG_PC3" name="KG_PC3">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate03 :
<input type="Number" name="Rate3" id="Number" style="width: 100px;" >
Size03 :
<input type="text" name="Size3" id="Size3" style="width: 100px;" >
Order No.03 :
<input type="Number" name="Order_No3" id="Order_No3" style="width: 100px;" >
<br>
<label for="Product4">Product04 :</label>
<select id="Product4" style="width: 100px;" name="Product4" >
<option value="" style="display:none;"></option>
<option value="Cow_Milk_Items">Cow Milk Items</option>
<option value="Buffalo_Milk_Items">Buffalo Milk Items</option>
<option value="Dry_Items">Dry Items</option>
</select>
<label>Item Name04 :
<input list="Item_Name4" style="width: 100px;" name="Item_Name4" /></label>
<datalist id="Item_Name4" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty04 :
<input type="Number" name="Qty4" style="width: 100px;" >
<label for="KG_PC">KG/PC :</label>
<select id="KG_PC4" name="KG_PC4">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate04 :
<input type="Number" name="Rate4" id="Number" style="width: 100px;" >
Size04 :
<input type="text" name="Size4" id="Size4" style="width: 100px;" >
Order No.04 :
<input type="Number" name="Order_No4" id="Order_No4" style="width: 100px;" >
</div>
<button onclick="myFunction()">Show More</button>
<button id="butn" >Submit</button>
</form>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "visible";
}
}
document.querySelector("#myform").addEventListener("submit",
function(e) {
e.preventDefault();
google.script.run.withSuccessHandler(resetForm)
.addNewItem(this);
});
function resetForm() {
document.querySelector("#myform").reset();
alert("Order Submited")
}
</script>
</body>
</html>
解决方案
就一个字错!
使用块而不是可见
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
}
更正的代码如下
<!DOCTYPE html>
<html>
<body style="background-color:lightgrey;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.5">
<base target="_top">
</head>
<body>
<h1>Internal Order Form</h1>
<form id="myform" >
<div>
<label for="Product1">Product01 :</label>
<select id="Product1" style="width: 100px;" name="Product1" required >
<option value="" style="display:none;"></option>
<option value="Cow_Milk_Items">Cow Milk Items</option>
<option value="Buffalo_Milk_Items">Buffalo Milk Items</option>
<option value="Dry_Items">Dry Items</option>
</select>
<label>Item Name01 :
<input list="Item_Name1" style="width: 100px;" name="Item_Name1" /></label>
<datalist id="Item_Name1" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty01 :
<input type="Number" name="Qty1" style="width: 100px;" >
<label for="KG_PC1">KG/PC :</label>
<select id="KG_PC1" name="KG_PC1">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate01 :
<input type="Number" name="Rate1" id="Number" style="width: 100px;" >
Size01 :
<input type="text" name="Size1" id="Size1" style="width: 100px;" >
Order No.01 :
<input type="Number" name="Order_No1" id="Order_No1" style="width: 100px;" >
<br>
<label for="Product2">Product02 :</label>
<select id="Product2" style="width: 100px;" name="Product2" >
<option value="" style="display:none;"></option>
<option value="Cow_Milk_Items">Cow Milk Items</option>
<option value="Buffalo_Milk_Items">Buffalo Milk Items</option>
<option value="Dry_Items">Dry Items</option>
</select>
<label>Item Name02 :
<input list="Item_Name2" style="width: 100px;" name="Item_Name2" /></label>
<datalist id="Item_Name2" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty02 :
<input type="Number" name="Qty2" style="width: 100px;" >
<label for="KG_P">KG/PC :</label>
<select id="KG_PC2" name="KG_PC2">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate02 :
<input type="Number" name="Rate2" id="Number" style="width: 100px;" >
Size02 :
<input type="text" name="Size2" id="Size2" style="width: 100px;" >
Order No.02 :
<input type="Number" name="Order_No2" id="Order_No2" style="width: 100px;" >
<br>
</div>
<div id="myDIV" style="display: none;">
<label for="Product3">Product03 :</label>
<select id="Product3" style="width: 100px;" name="Product3" >
<option value="" style="display:none;"></option>
<option value="Cow_Milk_Items">Cow Milk Items</option>
<option value="Buffalo_Milk_Items">Buffalo Milk Items</option>
<option value="Dry_Items">Dry Items</option>
</select>
<label>Item Name03 :
<input list="Item_Name3" style="width: 100px;" name="Item_Name3" /></label>
<datalist id="Item_Name3" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty03 :
<input type="Number" name="Qty3" style="width: 100px;" >
<label for="KG_PC">KG/PC :</label>
<select id="KG_PC3" name="KG_PC3">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate03 :
<input type="Number" name="Rate3" id="Number" style="width: 100px;" >
Size03 :
<input type="text" name="Size3" id="Size3" style="width: 100px;" >
Order No.03 :
<input type="Number" name="Order_No3" id="Order_No3" style="width: 100px;" >
<br>
<label for="Product4">Product04 :</label>
<select id="Product4" style="width: 100px;" name="Product4" >
<option value="" style="display:none;"></option>
<option value="Cow_Milk_Items">Cow Milk Items</option>
<option value="Buffalo_Milk_Items">Buffalo Milk Items</option>
<option value="Dry_Items">Dry Items</option>
</select>
<label>Item Name04 :
<input list="Item_Name4" style="width: 100px;" name="Item_Name4" /></label>
<datalist id="Item_Name4" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty04 :
<input type="Number" name="Qty4" style="width: 100px;" >
<label for="KG_PC">KG/PC :</label>
<select id="KG_PC4" name="KG_PC4">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate04 :
<input type="Number" name="Rate4" id="Number" style="width: 100px;" >
Size04 :
<input type="text" name="Size4" id="Size4" style="width: 100px;" >
Order No.04 :
<input type="Number" name="Order_No4" id="Order_No4" style="width: 100px;" >
</div>
<button onclick="myFunction()">Show More</button>
<button id="butn" >Submit</button>
</form>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
}
}
document.querySelector("#myform").addEventListener("submit",
function(e) {
e.preventDefault();
google.script.run.withSuccessHandler(resetForm)
.addNewItem(this);
});
function resetForm() {
document.querySelector("#myform").reset();
alert("Order Submited")
}
</script>
</body>
</html>
谢谢!:)
推荐阅读
- django - 复杂的 prefetch_related
- powershell - 如果您知道原因,如何使警告静音甚至更好:已分配但从不
- python - 如何将数据发布到立即将您重定向到另一个网站的网站
- google-apps-script - 来自不同电子表格的多个值
- python-3.x - 需要帮助保存 PyMuPDF
- c++ - 如何从 C++(winapi) 中的资源加载 GDI::Image (GIF)?
- python - Flask-RESTful:有一个单一功能的类可以吗
- dfa - 对 {0,1} 中右端第十个符号为 1 的所有字符串的集合进行 DFA
- nfc - NXP Mifare NTAG213 中的异常块 4,带有文本 NDEF 编码
- android - 为什么 bigText 不返回 Style 类型