0

I'm stuck on the last part of something I want to achieve with a form I made. When selecting a particular value from the dropdown list there will pop up 4 more name fields then the standard form. I don't know to require these optional fields. After filling the form the form will be send to an email address.

HTML:

<form id="register-form" method="post" class="form">
     <div class="col-sm-12">
        <select name="typeTicket" id="typeTicket" class="selectTicket">
            <option value="EarlyBird">Early Bird</option>
            <option value="Regular">Regular</option>
            <option value="TeamTicket">Team Ticket</option>
        </select>
    </div>

    <div class="col-sm-12">
        <input name="name" id="name" type="text" placeholder="Voor- en achternaam" required>
    </div>

    <div class="col-sm-12">
        <div id="extraNamen" style="display:none;">
            <input type="text" id="name1" name="name1" placeholder="Voor- en achternaam">
            <input type="text" id="name2" name="name2" placeholder="Voor- en achternaam">
            <input type="text" id="name3" name="name3" placeholder="Voor- en achternaam">
            <input type="text" id="name4" name="name4" placeholder="Voor- en achternaam">
        </div>
    </div>

    <div class="col-sm-12">
        <input name="email" id="email" type="email" placeholder="Email" required>
    </div>

    <div class="col-sm-12">
        <input name="organisatie" id="organisatie" type="text" placeholder="Organisatie">
    </div> 

    <div class="col-sm-12">
        <input name="functie" id="functie" type="text" placeholder="Functie">
    </div>


    <div class="col-sm-12">
        <input type="submit" value="Aanmelden" name="submit">
    </div>
    <p class="form-notification" style="display: none;">Bedankt voor de aanmelding, tot ziens op 18 juni 2015</p>


</form>

This script will collapse/expand the hidden form fields:

<script>
$('#typeTicket').on('change', function() {
    if ($(this).val() === "TeamTicket") {
        $("#extraNamen").show();
    } else {
        $("#extraNamen").hide();
    }
});
</script>

Main JS function:

// Registration Form
    RegisterForm: function () {
        $("#register-form").submit(function (e) {
            e.preventDefault();
            var typeTicket = $("#typeTicket").val(),
                name = $("#name").val(),
                name1 = $("#name1").val(),
                name2 = $("#name2").val(),
                name3 = $("#name3").val(),
                name4 = $("#name4").val(),
                email = $("#email").val(),
                organisatie = $("#organisatie").val(),
                functie = $("#functie").val(),
                dataString = '&typeTicket=' + typeTicket + '&name=' + name + '&name1=' + name1 + '&name2=' + name2 + '&name3=' + name3 + '&name4=' + name4 + '&email=' + email + '&organisatie=' + organisatie + '&functie=' + functie;

            function isValidEmail(emailAddress) {
                var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
                return pattern.test(emailAddress);
            }

            if (isValidEmail(email) && (name.length > 1)) {
                $.ajax({
                    type: "POST",
                    url: "php/process.php",
                    data: dataString,
                    success: function () {
                        $('#register-form .form-notification').fadeIn(500);
                    }
                });
            } else {
                if (!isValidEmail(email)) {
                    $('input#email').addClass('not-valid');
                } else {
                    $('input#email').removeClass('not-valid');
                }
                if (name.length === 0) {
                    $('input#name').addClass('not-valid');
                } else {
                    $('input#name').removeClass('not-valid');
                }
            }
            return false;
        });
    },

PHP:

$youremail = "Email adress hidden";

// Register Form
if ( isset($_POST['email']) && isset($_POST['name']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {

    // Detect & Prevent Header Injections
    $test = "/(content-type|bcc:|cc:|to:)/i";
    foreach ( $_POST as $key => $val ) {
        if ( preg_match( $test, $val ) ) {
            exit;
        }
    }

    // Email Format
    $body  =    "New User Registration \n\n";
    $body .=    "========== \n\n";

    $body .=    "Ticket type:  $_POST[typeTicket] \n\n";

    if($_POST[typeTicket] == "TeamTicket") {
        $body .=    "Naam:  $_POST[name] \n\n";
        $body .=    "Naam:  $_POST[name1] \n\n";
        $body .=    "Naam:  $_POST[name2] \n\n";
        $body .=    "Naam:  $_POST[name3] \n\n";
        $body .=    "Naam:  $_POST[name4] \n\n";
    } else {
        $body .=    "Naam:  $_POST[name] \n\n";
    }

    $body .=    "Organisatie:  $_POST[organisatie] \n\n";
    $body .=    "Functie:  $_POST[functie] \n\n";

    $body .=    "Email:  $_POST[email] \n\n";

    //Send email
    mail( $youremail, "New User Registration", $body, "From:" . $_POST['email'] );
}

1 Answer 1

2

How about trying this...

<script>
$('#typeTicket').on('change', function() {
    if ($(this).val() === "TeamTicket") {
        $("#extraNamen").show();
        $("#extraNamen").attr("required",true);
    } else {
        $("#extraNamen").hide();
    }
});
</script>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.