我在 Google App Script 中的 HTML 服务上使用手风琴结构 (jQueryUI) 内的表单。表单结构看起来像这样:
相关代码如下:
<div id="accordion">
<h3 id='academic-information'>
<a href='#'>
<label><input class='header-checkbox' type='checkbox' />Academic Information</label>
</a>
</h3>
<div>
<form id='calcForm'>
<label>Choose from a Student Type: </label><br />
<input name = "stateTuition" type="radio" id = 'sTuition' value='0'/>Resident Student<br />
<input name = "stateTuition" type="radio" id = 'sTuition' value ='1'/>Non-Resident Student<br />
<br /><br />
<label>Stipulated period of Education :</label><br />
<input name = "academicTrack" type="radio" id = "aTrack" value='0' />4 Years - 15 cr./semester<br />
<input name = "academicTrack" type="radio" id = "aTrack" value='1' />5 Years - 12 cr./semester<br />
<input name = "academicTrack" type="radio" id = "aTrack" value='2' />6 Years - 10 cr./semester<br />
<input name = "academicTrack" type="radio" id = "aTrack" value='3' />7 Years - Non-Traditional<br />
<input name = "academicTrack" type="radio" id = "aTrack" value='4' />8 Years - Non-Traditional<br />
</form>
</div>
<h3 id='campus-housing'>
<a href='#'>
<label><input class='header-checkbox' type='checkbox' />Campus Housing</label>
</a>
</h3>
<div>
<form id='calcForm'>
<label>What is the nature of Housing Plan you wish to subscribe: </label><br />
<input name = "housingType" type="radio" id = "hType" value='0' />No Housing<br />
<input name = "housingType" type="radio" id = "hType" value='1' />Dorm<br />
<input name = "housingType" type="radio" id = "hType" value='2' />Apartment<br />
<br /><br />
<label>Choose from a room type of your desire: </label><br />
<input name = "roomType" type="radio" id = "rType" value='0' />No Housing<br />
<input name = "roomType" type="radio" id = "rType" value='1' />Single Occupancy Room<br />
<input name = "roomType" type="radio" id = "rType" value='2' />Double Occupancy Room<br />
<input name = "roomType" type="radio" id = "rType" value='3' />Single Occupancy - Double Room<br />
<br /><br />
</form>
</div>
<h3 id='other-info'>
<a href='#'>
<label><input class='header-checkbox' type='checkbox' />Miscellaneous Information</label>
</a>
</h3>
<div>
<form id='calcForm'>
<label>Subscription to On-Campus meal plans:</label><br />
<input name = "campusMealPlan" type="radio" id = 'mPlan' value='0' />No Meal Plan<br />
<input name = "campusMealPlan" type="radio" id = 'mPlan' value ='1' />Gold Plan 1<br />
<input name = "campusMealPlan" type="radio" id = 'mPlan' value ='2' />Gold Plan 2<br />
<input name = "campusMealPlan" type="radio" id = 'mPlan' value ='3' />Silver Plan 1<br />
<input name = "campusMealPlan" type="radio" id = 'mPlan' value ='4' />Silver Plan 2<br />
</form>
</div>
</div>
<form id='calcForm'>
<input type="button" value="Project Cost" onclick = 'google.script.run.withSuccessHandler(processCost).processForm(this.parentNode)'/>
</form>
一切正常,除了执行 processForm 的 google.script.run 无法传递与表单“calcForm”关联的所有值。我假设这是因为 div 之间的表单被破坏了。对此的解决方案是什么,换句话说,如何在单击提交按钮时将通过手风琴中的表单收集的所有信息发送到 processForm 函数。