在Google App腳本中使用jQuery手風琴內部的表單結構

我在手風琴結構（jQueryUI）中使用Google App腳本中的HTML服務。和形式結構看起來是這樣的：在Google App腳本中使用jQuery手風琴內部的表單結構

Accordion with form on HtmlService

，相關代碼如下：

<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>

一切工作正常，除外google.script.run這執行processForm不能傳遞與表單'calcForm'相關的所有值。我假設這是因爲表格在div之間斷了。換句話說，如何通過點擊提交按鈕將通過手風琴表格收集的所有信息發送到processForm函數？

來源

2013-01-11 Rijo Simon

你不能以這種方式拆分表單。爲什麼不把所有的div和jquery包裝在一個單一的表單中呢？

來源

2013-01-11 19:57:56

好吧，以便工程，事實是我曾嘗試過。但之前我試圖在「手風琴」下面打開表格，並在關閉手風琴div之前關閉，因爲手風琴div無法正常工作，因爲它會扭曲手風琴。但我只是在「手風琴」div打開和關閉之外將表單標籤打開和關閉，並且它工作正常。感謝Corey。 –

因此，也許你不能以這種方式拆分窗體，但如果每個窗體的命名方式不同，怎麼辦？這可以正常工作嗎？ – Skittles

我實際上是通過包裹表格內部的div

來源

2015-04-08 17:41:36 chntgomez

在Google App腳本中使用jQuery手風琴內部的表單結構

回答

相關問題