This is for a private wedding website. Invitations are sent to guests, which could be individuals or entire families. Those invitations include a special Passcode that lets them access the website. Once inside, in the RSVP section we have returned the names of the guests invited.
The goal is to allow whichever guest that has logged in to respond to the RSVP by clicking a box that says “Yes” I’ll be in attendance or “No” I won’t be attending.
The question is available to all of the people in the group. Then the person can enter other info + offer a song suggestion for the wedding. I’d like at that point for the entire form to be submitted altogether.
PROBLEM: As soon as a guest clicks on (Yes) or (No) the form automatically submits, and then refreshes the page. At that point you can’t see what selection was made any longer. How do I change this code so that my guests can click all of the yes’s and no’s and then entire the other information, where then they can see all of their responses before clicking Submit which submits() the whole form?
Ex:
John (Yes)
(No)
Emily (Yes)
(No)
Louis (Yes)
(No)
Mailing Address (form field)
Email Address (form field)
Phone number (form field)
Song Title (form field)
Artist (form field)
Button (Submit)
<!-- 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-->
Based on the code sample you provided, it appears you are creating a new form for each checkbox, which is separate from the form containing the other information. Furthermore, in the generated checkbox forms, you have the code:
onchange=”document.getElementById(‘formNamewp_response_id; ?>’).submit()”
This explains the behavior you are seeing when the checkbox is clicked and the page refreshes. The onchange event fires, and the form submits.
To achieve the behavior you are looking for, render each your checkbox inputs into the lower form, and remove the ‘onchange’ handler on each checkbox input. Then when you submit the form, all fields will be submitted at once. Just make sure that the endpoint you are POSTing to properly handles the new fields.