html form elements and using php to get data

Question

I have searched and found some good potential solutions, but can't seem to make this work. I'm still a beginner. I'm using form elements with dropdowns, and attempting to get the user input and then send the information via email. I will post the html and php here:

            <form method = "post">
            <fieldset class="form-group">
                <div class="dropdown">
                  <button class="btn btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" name="size">Choose Size&nbsp;
                  <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li>14 x 20</li>
                    <li>16 x 26</li>
                    <li>18 x 30</li>
                    <li>20 x 32</li>
                    <li>22 x 38</li>
                    <li>28 x 44</li>
                  </ul>
                </div>
            </fieldset>


            <div class="dropdown">
              <button class="btn btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" name="color">Choose Color
              <span class="caret"></span></button>

                <ul class="dropdown-menu">
                    <li>Blue</li>
                    <li>Lt Blue</li>
                    <li>Purple</li>
                    <li>Lavendar</li>
                    <li>Green</li>
                    <li>Lt Green</li>
                    <li>Black</li>
                    <li>Pink</li>

                </ul>
            </div>

and the PHP:

<?php

$error = ""; $successMessage = "";

if (isset($_POST['size'])) {
    $size = $_POST['size'];
    $size_string = "";
    for($i=0;$i<count($size);$i++) {

        if($i!=0) {

            $size_string = $size_string . ", ";

        }

        $size_string = $size_string . $service[$i];

    }

} else {

    $error .= "Please select a size from the dropdown menu.<br>";

}

    if (isset($_POST['color'])) {

        $color = $_POST['color'];
        $color_string = "";
        for($i=0;$i<count($color);$i++) {

            if($i!=0)  {

                $color_string = $color_string . ", ";

            }

            $color_string = $color_string . $color[$i];

        }

    } else {

        $error .= "Please select a color from the dropdown menu.<br>";

    }

...

$emailTo = "me@mydomain.com";

$subject = "Mat Order";

$content = $_POST['color'];
$content .= $_POST['size'];
$content .= $_POST['monogram']

Sorry for the large amount of code, just trying to paste the pertinent areas. Any suggestions would be greatly appreciated.

Answer 1

As an alternative to the plugins mentioned above, below is a snippet of jQuery code that will pre-process and submit the form. Also as mentioned in the comments above make sure to add and "action" to your form and a submit button.

<form method="post" action="pathToYourphp.php">
    <!-- Your form content here -->
    <button id="submitBtn" class="btn btn-primary" type="submit">Submit</button>
</form>

jQuery code:

<script>
$(document).ready(function() {
    // This will replace the text in the dropdown with the item selected from the list
    $(".dropdown-menu li").click(function(){
        $(this).parents(".dropdown").find('.dropdown-toggle').html($(this).text() + ' <span class="caret"></span>');
        $(this).parents(".dropdown").find('.dropdown-toggle').val($(this).data('value'));
    });
    // Handle the submit button click
    $('#submitBtn').click(function(event) {
        // prevent the form from submitting
        event.preventDefault();
        // Get the form to submit
        var form = $(this).closest('form');
        // Add hidden inputs dynamically to the form
        // and fill them with the correct value
        // This will grab the "name" attribute from
        // your button
        $('.dropdown-toggle').each(function() {
            var input = $("<input>")
           .attr("type", "hidden")
           .attr("name", $(this).attr("name"))
           .val($(this).text().trim());
            form.append($(input));
        });
        //submit the form
        form.submit();
    });
});
</script>

You should have jQuery available since you are using bootstrap.