Part of form doesn't submit

Question

I have a problem with a small project I'm working on.

I have a form in HTML with 9 fields. If I hit submit it sends an email with all the form data. A part of the form is only shown when the corresponding radiobutton is selected. Although this works perfect (used JQuery for this), the input fields in that 'subform' don't get submitted. The other input fields work just fine. This is my code:

HTML:

<form name="contactForm" id="contactForm" method="post" action="">
            <fieldset>
                <div class="group">
                    <input name="groupName" type="text" id="groupName" placeholder="Groepsnaam" value=""
                           minLength="2"
                           required/>
                </div>
                <div>
                    <input name="contactName" type="text" id="contactName" placeholder="Naam contactpersoon"
                           value="" minLength="2"
                           required/>
                </div>
                <div>
                    <input name="contactEmail" type="email" id="contactEmail" placeholder="Email contactpersoon"
                           value=""
                           required/>
                </div>
                <div>
                    <input name="contactPhone" type="tel" id="contactPhone"
                           placeholder="Telefoonnummer contactpersoon" value=""
                           required/>
                </div>
                <div>
                    <select name="amountMembers" id="amountMembers " required>
                        <option value="" selected>Aantal groepsleden</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                    </select>
                </div>
                <div>
                    <textarea name="groupMembers" id="groupMembers" placeholder="Groepsleden" rows="10" cols="50"
                              required></textarea>
                </div>

                <div> <!-- If the first rdb is select, show fields. Else hide. -->

                    <input type="radio" onclick="displayForm(this)" name="food" value="1"> Ik wil me inschrijven
                    voor het pasta-buffet<br>
                    <input type="radio" onclick="displayForm(this)" name="food" value="2"> Ik neem niet deel aan het
                    pasta-buffet<br>
                </div>
                <div id="foodform" style="display:none;">

                    <input name="volwassenenPorties" type="text" id="volwassen" placeholder="Aantal volwassenen"
                           value=""
                           required/>


                    <input name="kinderPorties" type="text" id="kind" placeholder="Aantal kinderen (-12j) " value=""
                           required/>
                    <br>
                </div>
                <div>
                    <button class="submitform">Submit</button>
                    <div id="submit-loader">
                        <div class="text-loader">Sending...</div>
                        <div class="s-loader">
                            <div class="bounce1"></div>
                            <div class="bounce2"></div>
                            <div class="bounce3"></div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form> <!-- Form End -->

JQuery:

function displayForm(c) {
if (c.value == "1") {
    jQuery('#foodform').fadeIn();
}
if (c.value == "2") {
    jQuery('#foodform').fadeOut();
}
};

PHP:

<?php
$siteOwnersEmail = 'Myemail@website.be';

if($_POST) {
$groupName = trim(stripslashes($_POST['groupName']));
$contactName = trim(stripslashes($_POST['contactName']));
$email = trim(stripslashes($_POST['contactEmail']));
$phone = trim(stripslashes($_POST['contactPhone']));
$amountMembers = trim(stripslashes($_POST['amountMembers']));
$groupMembers = trim(stripslashes($_POST['groupMembers']));
$food = trim(stripslashes($_POST['food']));
$volwassenen = trim(stripslashes($_POST['volwassen']));
$kinderen = trim(stripslashes($_POST['kind']));

// Set Message
$message .= "Groepsnaam: " . $groupName . "<br />";
$message .= "Naam contactpersoon: " . $contactName . "<br />";
$message .= "email: " . $email . "<br />";
$message .= "telefoonnr: " . $phone . "<br />";
$message .= "Aantal groepsleden: " . $amountMembers . "<br />";
$message .= "Namen groepsleden: " . $groupMembers . "<br />";
$message .= "Eten 1=ja, 2=nee: " . $food . "<br />";
$message .= "Volwassenen porties: " . $volwassenen . "<br />";
$message .= "Kinder porties:  " . $kinderen . "<br />";
$message .= "<br /> ----- <br /> Deze email werd verstuurd via het inschrijvingsformulier. <br />";

// Set From: header
$from =  $contactName . " <" . $email . ">";

// Email Headers
$headers = "From: " . $from . "\r\n";
$headers .= "Reply-To: ". $email . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";


if (!$error) {
  ini_set("sendmail_from", $siteOwnersEmail); // for windows server
  $mail = mail($siteOwnersEmail, $subject, $message, $headers);

    if ($mail) { echo "OK"; }
  else { echo "Something went wrong. Please try again."; }

 } # end if - no validation error

 else {
 //there was a validation error
}

Does anyone know why the input fields inside the "foodform" dont submit? I've been struggling on this for a while now.

Thanks in advance

Simon

Answer 1

Try replacing in your PHP code:

$volwassenen = trim(stripslashes($_POST['volwassen']));
$kinderen = trim(stripslashes($_POST['kind']));

with this:

$volwassenen = trim(stripslashes($_POST['volwassenPorties'])); 
$kinderen = trim(stripslashes($_POST['kindPorties']));