在html表单中隐藏代码集或中间div，当我单击show按钮时，它将显示，或者如果单击submit，它将提交
在下面的HTML中，从Product1到Order No.1是这样一个集合，我有product 2 div，product 3 div直到product 20集合，所以我需要名为“show more”的按钮以及submit按钮，如果我单击“show more”按钮，下一个5将显示，或者如果我单击submit data将提交，tq 我试过使用document.getElementById（“blablabla”）.style.display=“visible”；通过使用onclick调用函数。但当我单击show时，它会立即显示并提交（未添加到下面的代码中） 由于以下字符限制有限制代码（直到设置10）在html表单中隐藏代码集或中间div，当我单击show按钮时，它将显示，或者如果单击submit，它将提交,html,google-apps-script,google-sheets,userform,Html,Google Apps Script,Google Sheets,Userform,在下面的HTML中，从Product1到Order No.1是这样一个集合，我有product 2 div，product 3 div直到product 20集合，所以我需要名为“show more”的按钮以及submit按钮，如果我单击“show more”按钮，下一个5将显示，或者如果我单击submit data将提交，tq 我试过使用document.getElementById（“blablabla”）.style.display=“visible”；通过使用onclick调用函数。但当
工厂订单
.表格-r{
宽度：自动；
填充：10px；
边框：3倍纯色灰色；
保证金：0；
边缘底部：15px；
}
内部订单
条目名称：
门店名称：
Gokul-Lord sinha路
Gokul Bhog-阿纳迪亚
交货日期：
交货时间：
产品1：
牛奶项目
水牛奶制品
干货
项目名称1：
Qty1：
千克/件：
公斤
个人计算机
费率1：
尺寸1：
第1号命令：
产品2：
牛奶项目
水牛奶制品
干货
项目名称2：
Qty2：
千克/件：
公斤
个人计算机
费率2：
尺寸2：
第2号命令：
产品3：
牛奶项目
水牛奶制品
干货
项目名称3：
Qty3：
千克/件：
公斤
个人计算机
费率3：
尺寸3：
第3号命令：
产品4：
牛奶项目
水牛奶制品
干货
项目名称4：
Qty4：
千克/件：
公斤
个人计算机
费率4：
尺寸4：
第4号命令：
产品5：
牛奶项目
水牛奶制品
干货
项目名称5：
Qty5：
千克/件：
公斤
个人计算机
费率5：
尺寸5：
第5号命令：
产品6：
牛奶项目
水牛奶制品
干货
项目名称6：
Qty6：
千克/件：
公斤
个人计算机
费率6：
尺寸6：
第6号命令：
产品7：
牛奶项目
水牛奶制品
干货
项目名称7：
第7季度：
千克/件：
公斤
个人计算机
费率7：
尺寸7：
第7号命令：
产品8：
牛奶项目
水牛奶制品
干货
项目名称8：
第8季度：
千克/件：
公斤
个人计算机
费率8：
尺寸8：
第8号命令：
产品9：
牛奶项目
水牛奶制品
干货
项目名称9：
第9季度：
千克/件：
公斤
个人计算机
比率9：
尺寸9：
第9号命令：
产品10：
牛奶项目
水牛奶制品
干货
项目名称10：
<!DOCTYPE html>
<html>
<title>Factory Order Form</title>
<body style="background-color:lightgrey;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.5">
<base target="_top">
</head>
<style>
.form-r{
width: auto;
padding: 10px;
border: 3px solid gray;
margin: 0;
margin-bottom:15px;
}
</style>
<body>
<h1>Internal Order Form</h1>
<form id="myform" >
<h3>
<div class="form-r">
Entry Name:
<input type="text" name="Entry_Name" id="Entry_Name" required>
<label for="Store_Name" >Store Name :</label>
<select id="Store_Name" name="Store_Name" required >
<option value="" ></option>
<option value="Gokul - Lord Sinha Road">Gokul - Lord sinha road</option>
<option value="Gokul Bhog Anadya">Gokul Bhog - Anadya</option>
</select>
<br>
<br>
Delivery Date:
<input type="date" name="Delivery_Date" id="Delivery_Date" required >
Delivery time:
<input type="time" name="Delivery_time" id="Delivery_time" required >
</div>
</h3>
<hr><hr>
<div >
<label for="Product1">Product1 :</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 Name1 :
<input list="Item_Name1" style="width: 100px;" name="Item_Name1" /></label>
<datalist id="Item_Name1" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty1 :
<input type="Number" name="Qty1" style="width: 100px;" >
<label for="KG_PC1">KG/PC :</label>
<select id="KG_PC1" style="width: 100px;" name="KG_PC1">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate1 :
<input type="Number" name="Rate1" id="Number" style="width: 100px;" >
Size1 :
<input type="text" name="Size1" id="Size1" style="width: 100px;" >
Order No.1 :
<input type="Number" name="Order_No1" id="Order_No1" style="width: 100px;" >
</div>
<div >
<label for="Product2">Product2 :</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 Name2 :
<input list="Item_Name2" style="width: 100px;" name="Item_Name2" /></label>
<datalist id="Item_Name2" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty2 :
<input type="Number" name="Qty2" style="width: 100px;" >
<label for="KG_P">KG/PC :</label>
<select id="KG_PC2" style="width: 100px;" name="KG_PC2">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate2 :
<input type="Number" name="Rate2" id="Number" style="width: 100px;" >
Size2 :
<input type="text" name="Size2" id="Size2" style="width: 100px;" >
Order No.2 :
<input type="Number" name="Order_No2" id="Order_No2" style="width: 100px;" >
</div>
<div >
<label for="Product3">Product3 :</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 Name3 :
<input list="Item_Name3" style="width: 100px;" name="Item_Name3" /></label>
<datalist id="Item_Name3" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty3 :
<input type="Number" name="Qty3" style="width: 100px;" >
<label for="KG_PC">KG/PC :</label>
<select id="KG_PC3" style="width: 100px;" name="KG_PC3">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate3 :
<input type="Number" name="Rate3" id="Number" style="width: 100px;" >
Size3 :
<input type="text" name="Size3" id="Size3" style="width: 100px;" >
Order No.3 :
<input type="Number" name="Order_No3" id="Order_No3" style="width: 100px;" >
</div>
<div >
<label for="Product4">Product4 :</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 Name4 :
<input list="Item_Name4" style="width: 100px;" name="Item_Name4" /></label>
<datalist id="Item_Name4" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty4 :
<input type="Number" name="Qty4" style="width: 100px;" >
<label for="KG_PC">KG/PC :</label>
<select id="KG_PC4" style="width: 100px;" name="KG_PC4">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate4 :
<input type="Number" name="Rate4" id="Number" style="width: 100px;" >
Size4 :
<input type="text" name="Size4" id="Size4" style="width: 100px;" >
Order No.4 :
<input type="Number" name="Order_No4" id="Order_No4" style="width: 100px;" >
</div>
<div >
<label for="Product5">Product5 :</label>
<select id="Product5" style="width: 100px;" name="Product5" >
<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 Name5 :
<input list="Item_Name5" style="width: 100px;" name="Item_Name5" /></label>
<datalist id="Item_Name5" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty5 :
<input type="Number" name="Qty5" style="width: 100px;" >
<label for="KG_PC">KG/PC :</label>
<select id="KG_PC5" style="width: 100px;" name="KG_PC5">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate5 :
<input type="Number" name="Rate5" id="Number" style="width: 100px;" >
Size5 :
<input type="text" name="Size5" id="Size5" style="width: 100px;" >
Order No.5 :
<input type="Number" name="Order_No5" id="Order_No5" style="width: 100px;" >
</div>
<hr>
<div >
<label for="Product6">Product6 :</label>
<select id="Product6" style="width: 100px;" name="Product6" >
<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 Name6 :
<input list="Item_Name6" style="width: 100px;" name="Item_Name6" /></label>
<datalist id="Item_Name6" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty6 :
<input type="Number" name="Qty6" style="width: 100px;" >
<label for="KG_PC">KG/PC :</label>
<select id="KG_PC6" style="width: 100px;" name="KG_PC6">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate6 :
<input type="Number" name="Rate6" id="Number" style="width: 100px;" >
Size6 :
<input type="text" name="Size6" id="Size6" style="width: 100px;" >
Order No.6 :
<input type="Number" name="Order_No6" id="Order_No6" style="width: 100px;" >
</div>
<div >
<label for="Product7">Product7 :</label>
<select id="Product7" style="width: 100px;" name="Product7" >
<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 Name7 :
<input list="Item_Name7" style="width: 100px;" name="Item_Name7" /></label>
<datalist id="Item_Name7" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty7 :
<input type="Number" name="Qty7" style="width: 100px;" >
<label for="KG_PC">KG/PC :</label>
<select id="KG_PC7" style="width: 100px;" name="KG_PC7">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate7 :
<input type="Number" name="Rate7" id="Number" style="width: 100px;" >
Size7 :
<input type="text" name="Size7" id="Size7" style="width: 100px;" >
Order No.7 :
<input type="Number" name="Order_No7" id="Order_No7" style="width: 100px;" >
</div>
<div >
<label for="Product8">Product8 :</label>
<select id="Product8" style="width: 100px;" name="Product8" >
<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 Name8 :
<input list="Item_Name8" style="width: 100px;" name="Item_Name8" /></label>
<datalist id="Item_Name8" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty8 :
<input type="Number" name="Qty8" style="width: 100px;" >
<label for="KG_PC">KG/PC :</label>
<select id="KG_PC8" style="width: 100px;" name="KG_PC8">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate8 :
<input type="Number" name="Rate8" id="Number" style="width: 100px;" >
Size8 :
<input type="text" name="Size8" id="Size8" style="width: 100px;" >
Order No.8 :
<input type="Number" name="Order_No8" id="Order_No8" style="width: 100px;" >
</div>
<div >
<label for="Product9">Product9 :</label>
<select id="Product9" style="width: 100px;" name="Product9" >
<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 Name9 :
<input list="Item_Name9" style="width: 100px;" name="Item_Name9" /></label>
<datalist id="Item_Name9" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty9 :
<input type="Number" name="Qty9" style="width: 100px;" >
<label for="KG_PC">KG/PC :</label>
<select id="KG_PC9" style="width: 100px;" name="KG_PC9">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate9 :
<input type="Number" name="Rate9" id="Number" style="width: 100px;" >
Size9 :
<input type="text" name="Size9" id="Size9" style="width: 100px;" >
Order No.9 :
<input type="Number" name="Order_No9" id="Order_No9" style="width: 100px;" >
</div>
<div >
<label for="Product10">Product10 :</label>
<select id="Product10" style="width: 100px;" name="Product10" >
<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 Name10 :
<input list="Item_Name10" style="width: 100px;" name="Item_Name10" /></label>
<datalist id="Item_Name10" >
<option value="" style="display:none;"></option>
<?!= getVendors(); ?>
</datalist>
Qty10 :
<input type="Number" name="Qty10" style="width: 100px;" >
<label for="KG_PC">KG/PC :</label>
<select id="KG_PC10" style="width: 100px;" name="KG_PC10">
<option value="" style="display:none;"></option>
<option value="KG">KG</option>
<option value="PC">PC</option>
</select>
Rate10 :
<input type="Number" name="Rate10" id="Number" style="width: 100px;" >
Size10 :
<input type="text" name="Size10" id="Size10" style="width: 100px;" >
Order No.10 :
<input type="Number" name="Order_No10" id="Order_No10" style="width: 100px;" >
</div>
<h2>
<button id="butn" >Submit</button>
</h2>
</form>
<script>
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>
---------------JS Code-----------
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('form');
return htmlOutput.evaluate();
}
function addNewItem(data)
{
var ss1 = SpreadsheetApp.getActiveSpreadsheet();
var of = ss1.getSheetByName("Prod data Submit");
of.getRange("b1").setValue(data.Entry_Name)
of.getRange("b2").setValue(data.Store_Name)
of.getRange("b3").setValue(data.Delivery_Date)
of.getRange("b4").setValue(data.Delivery_time)
of.appendRow([data.Product1,data.Item_Name1 ,data.Qty1,data.KG_PC1,data.Rate1,data.Size1,data.Order_No1 ]);
of.appendRow([data.Product2,data.Item_Name2 ,data.Qty2,data.KG_PC2,data.Rate2,data.Size2,data.Order_No2 ]);
of.appendRow([data.Product3,data.Item_Name3 ,data.Qty3,data.KG_PC3,data.Rate3,data.Size3,data.Order_No3 ]);
of.appendRow([data.Product4,data.Item_Name4 ,data.Qty4,data.KG_PC4,data.Rate4,data.Size4,data.Order_No4 ]);
of.appendRow([data.Product5,data.Item_Name5 ,data.Qty5,data.KG_PC5,data.Rate5,data.Size5,data.Order_No5 ]);
//-------more code here
prod_dt_submit()
return data
}
function prod_dt_submit() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var pds = ss.getSheetByName("Prod data Submit");
var mpd = ss.getSheetByName("Master data Prod");
var pdslr = pds.getLastRow()
var mpdlr = mpd.getLastRow()+1
var ts = Utilities.formatDate(new Date(),SpreadsheetApp.getActive().getSpreadsheetTimeZone(), "dd-MM-yyyy hh:mm:ss");
var dn = pds.getRange("b1").getDisplayValue();
var mae= pds.getRange("b2").getDisplayValue();
var pd = pds.getRange("b3").getDisplayValue();
var pt = pds.getRange("b4").getDisplayValue();
var fsno = pds.getRange("b5").getDisplayValue();
for(var k = mpdlr ; k <((mpdlr+pdslr)-6) ; k++){
mpd.getRange(k,1).setValue(ts);
mpd.getRange(k,3).setValue(dn);
mpd.getRange(k,4).setValue(mae);
mpd.getRange(k,5).setValue(pd);
mpd.getRange(k,6).setValue(pt);
mpd.getRange(k,2).setValue(fsno);
}
mpd.getRange(mpdlr,7,(pdslr-6),7).setValues(pds.getRange(7,1,(pdslr-6),7).getDisplayValues());
pds.getRange("B1:B4").clearContent();
pds.getRange("A7:G").clearContent();
}
function getVendors() {
var active = SpreadsheetApp.getActive();
var sheet = active.getSheetByName("Item_Names");
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("A2:A" + lastRow);
var data = myRange.getValues();
var optionsHTML = "";
for (var i = 0; i < data.length; i+=1) {
optionsHTML += '<option>' + data[i][0] + '</option>';
};
return optionsHTML;
}