Javascript 多按钮在html webform中不起作用，当单击“显示”按钮提交时
在下面的HTML代码中，我们有两个div，一个在打开表单时可见，另一个必须在单击“show”按钮时可见，还有一个按钮“submit” 但是，当我点击“显示”按钮时，它正在提交数据。当我点击“提交”按钮时，它正在提交数据Javascript 多按钮在html webform中不起作用，当单击“显示”按钮提交时,javascript,html,google-apps-script,google-sheets,webforms,Javascript,Html,Google Apps Script,Google Sheets,Webforms,在下面的HTML代码中，我们有两个div，一个在打开表单时可见，另一个必须在单击“show”按钮时可见，还有一个按钮“submit” 但是，当我点击“显示”按钮时，它正在提交数据。当我点击“提交”按钮时，它正在提交数据 <!DOCTYPE html> <html> <body style="background-color:lightgrey;">
<!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>
<!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>
内部订单
产品01：
牛奶项目
水牛奶制品
干货
项目名称01：
Qty01：
千克/件：
公斤
个人计算机
比率01：
尺寸01：
第01号命令：
产品02：
牛奶项目
水牛奶制品
干货
项目名称02：
Qty02：
千克/件：
公斤
个人计算机
费率02：
尺寸02：
第02号命令：
产品03：
牛奶项目
水牛奶制品
干货
项目名称03：
Qty03：
千克/件：
公斤
个人计算机
费率03:
尺寸03：
第03号命令：
产品04：
牛奶项目
水牛奶制品
干货
项目名称04：
Qty04：
千克/件：
公斤
个人计算机
费率04：
尺寸04：
第04号命令：
显示更多
提交
函数myFunction（）{
var x=document.getElementById（“myDIV”）；
如果（x.style.display==“无”）{
x、 style.display=“可见”；
}
}
document.querySelector（“myform”）.addEventListener（“提交”，
职能（e）{
e、 预防默认值（）；
google.script.run.withSuccessHandler（resetForm）
.addNewItem（本）；
});
函数resetForm（）{
document.querySelector（“#myform”）.reset（）；
警报（“已提交订单”）
}
使用块而不是可见的
更正了下面的代码
内部订单
产品01：
牛奶项目
水牛奶制品
干货
项目名称01：
Qty01：
千克/件：
公斤
个人计算机
比率01：
尺寸01：
第01号命令：
产品02：
牛奶项目
水牛奶制品
干货
项目名称02：
Qty02：
千克/件：
公斤
个人计算机
费率02：
尺寸02：
第02号命令：
产品03：
牛奶项目
水牛奶制品
干货
项目名称03：
<script>
function myFunction() {
var x = document.getElementById("myDIV");{
x.style.display = "block";
}
<a href="#" onclick="myFunction()">show more</a>