RSVP表格在每次回覆後提交 - 需要所有回覆提交給家庭的回覆

Question

這是私人婚禮網站。邀請函發送給客人，可能是個人或整個家庭。這些邀請包括一個特殊的密碼，讓他們訪問該網站。一旦進入，在RSVP部分，我們已經返回了邀請客人的名字。 目標是允許已登錄的任何訪客通過單擊「是」我將出席或「否」我不會參加回覆RSVP回覆。 該問題適用於該組中的所有人員。然後該人可以進入其他信息+爲婚禮提供歌曲建議。我希望在那時完整地提交整個表格。

問題：只要客人點擊（是）或（否）表單自動提交，然後刷新頁面。在這一點上，你不能再看到什麼選擇了。如何更改此代碼，以便我的客人可以點擊所有是和否，然後點擊所有其他信息，然後在點擊提交哪個提交（）整個表單之前，他們可以看到他們的所有答案？

例： 約翰（是） （否）

艾米莉（是） （否）

路易斯（是） （否）

郵寄地址（表單字段） （表單欄） 電話號碼（表欄） 歌曲標題（表欄） 藝術家（表單欄）

按鈕（提交）

 <!-- FORM --> 
     <div class="row"> 
      <div id="result" class="col-md-12"> <!-- Show Message --> </div> 
       <div class="col-md-6"> 
        <div id="events" class="form-group"> 
<?php 
global $wpdb; 
$guestname = $wpdb->get_results("SELECT * FROM `wp_password_a` where pwd_a_id='" . $_SESSION['admin_id'] . "' "); 
$guest = $guestname[0]->name_guest; 
$id_res = $guestname[0]->wp_response_id; 
$myrows = $wpdb->get_results("SELECT * FROM `wp_pwd_a_response` where guestname='" . $guest . "' "); 
//echo "<pre>";print_r($myrows); 
$i = 1; 
foreach ($myrows as $pro_data) { 
    ?> 


      <form method="post" id="formName<?php echo $pro_data->wp_response_id; ?>" > 
          <div class="col-md-12"> 

           <div class="col-md-4" style="margin:10px 0px;"> 
          <?php echo $pro_data->member; ?> 
           </div> 
           <div class="col-md-4"> 
            <div class="checkbox"> 
             <label><input type="checkbox" class="checkbox" onchange="document.getElementById('formName<?php echo $pro_data->wp_response_id; ?>').submit()" name="response" value="YES">Will be in Attendance</label> 
            </div> 
           </div> 
           <div class="col-md-4"> 
            <div class="checkbox"> 
             <label><input type="checkbox" class="checkbox" onchange="document.getElementById('formName<?php echo $pro_data->wp_response_id; ?>').submit()" name="response" value="NO">Regretfully Declines</label> 
            <input type="hidden" name="res_id" value="<?php echo $pro_data->wp_response_id; ?>"> 
            </div> 
           </div> 
          </div> 
      </form> 
<?php } ?> 
      <form method="post"> 
         <div id="fullname" class="form-group"> 
          <label for="inputname"><i><b>Mailing Address</b></i></label> 
          <input type="text" name="address" class="form-control" id="inputname" placeholder=""> 
         </div> 
         <div class="form-group"> 
          <label for="inputname"><i><b>E-mail Address</b></i></label> 
          <input type="text" name="phone" class="form-control" id="inputname" placeholder=""> 
         </div> 
<div class="form-group"> 
          <label for="inputname"><i><b>Phone Number</b></i></label> 
          <input type="text" name="phone" class="form-control" id="inputname" placeholder=""> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="col-md-12"> 
         <i></br></br>In celebration of the bride and groom’s special day, I would like to dedicate the following song:</i> 
        </div> 
        <div id="fullname" class="form-group"> 
         <label for="inputname"></br></br><i><b>Song Title</b></i></label> 
         <input type="text" name="song" class="form-control" id="inputname" placeholder=""> 
        </div> 
        <div class="form-group"> 
         <label for="inputname"><i><b>Artist</b></i></label> 
         <input type="text" name="artist" class="form-control" id="inputname" placeholder=""> 
        </div> 
       </div> 
       <div class="col-md-12 text-center text-danger"></br></br> 
        <div><b><i>Please provide a response by August 1, 2015.</i></b></div> 
       </div> 
       <div class="col-md-12 text-center"> 
        <div class="form-group"> 
         <input type="submit" id="submitButton" name="submitresponse" class="btn btn-default btn-lg" value="Submit"> 
        </div> 
       </div> 
      <form> 
     </div> 
    </div> 
</section><!--END of RSVP SECTION--> 

Answer 1

基於你提供的代碼示例中，它出現在創建針對每個複選框，其是從包含其它信息的形式分離的新形式。此外，在生成的複選框的形式，你的代碼：

平變化=「的document.getElementById（‘？formNamewp_response_id;>’）提交（）」

這說明了其行爲，你看到的時候複選框被點擊並刷新頁面。 onchange事件觸發，表單提交。

要實現您正在查找的行爲，請將每個複選框輸入呈現到較低的表單中，並在每個複選框輸入中刪除「onchange」處理程序。然後，當您提交表單時，所有字段將立即提交。只要確保您正在發佈的終端正確處理新的字段。