【发布时间】：2021-05-28 16:45:52
【问题描述】：
在下面的 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>
【问题讨论】：
标签： javascript html google-apps-script google-sheets webforms