Drop down list in html using php and MySql

Question

I am trying to create a dropdown list that uses php to connect to a MySql database. But it's not working and I'm sure it's a simple change I need to make but because of the complicated fancy bootstrap form, I can't figure it out!

Here is the code I have:

<form method="post" action="bookings.php" class="popup-form">
                    <fieldset>
          <input id="email" name="email" type="text" class="form-control form-white" placeholder="Email">
                    <input id="firstname" name="firstname" type="text" class="form-control form-white" placeholder="Firstname">
                    <input id="lastname" name="lastname" type="text" class="form-control form-white" placeholder="Surname">
          <div class="dropdown">
                        <button id="dLabel" for="retreatseleted" class="form-control form-white dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Select Retreat:
                        </button>
                        <ul for="retreatseleted" class="dropdown-menu animated fadeIn" role="menu" aria-labelledby="dLabel">
                            <li id="retreatseleted" name="retreatseleted" value="Clifftop Cottage" class="animated lightSpeedIn"><a href="#">Clifftop Cottage</a></li>
                            <li id="retreatseleted" name="retreatseleted" value="Cherry Trees" class="animated lightSpeedIn"><a href="#">Cherry Trees</a></li>
              <li id="retreatseleted" name="retreatseleted" value="The Beach House" class="animated lightSpeedIn"><a href="#">The Beach House</a></li>
                        </ul>
                    </div>
          <input id="fromdate" name="fromdate" type="date" class="form-control form-white" placeholder="From Date:">
          <input id="todate" name="todate" type="date" class="form-control form-white" placeholder="To Date:">
                    <div class="checkbox-holder text-left">
                        <div class="checkbox">
                            <input type="checkbox" value="None" id="squaredOne" name="check" />
                            <label for="squaredOne"><span>I Agree to the <strong>Terms &amp; Conditions</strong></span></label>
                        </div>
                    </div>
                    <button type="submit" value="Submit" class="btn btn-submit">Submit</button>
                    </fieldset>
                </form>

And the php code I have is:

ob_start();
session_start();

include("connectdb.php");

unset($_SESSION['error']);

  if (!empty($_POST)
   && !empty($_POST['email'])
   && !empty($_POST['firstname'])
   && !empty($_POST['lastname'])
   && !empty($_POST['retreatselected'])
   && !empty($_POST['fromdate'])
   && !empty($_POST['todate'])) {

    $email = $_POST['email'];
    $firstname = $_POST['firstname'];
    $lastname = $_POST['lastname'];
    $retreatselected = $_POST['retreatseleted'];
    $fromdate = $_POST['fromdate'];
    $todate = $_POST['todate'];

    $query = "SELECT COUNT(*) AS count FROM bookings WHERE fromdate = '".$fromdate."' and retreatselected = '".$retreatselected."'";
    $result = $db->query($query);
    $data = $result->fetch_assoc();


    if ($data['count'] > 0) {

      $_SESSION['error'] = "Unfortunately this date has already been taken at $retreatselected.";
      header("location: index.php");


    } else {


      $query = "INSERT INTO bookings (email, firstname, lastname, retreatselected, fromdate, todate)
                VALUES ('".$email."','".$firstname."','".$lastname."','".$retreatselected."','".$fromdate."','".$todate."')";
      "</p>";


      $result = $db->query($query);


      if ($result) {

        $_SESSION['thankyou'] = "Thank you for booking $retreatselected. You will receive a confirmation email shortly.";
            header("location: index.php");

      } else {
          echo "SQL Error: " . $db->error;
      }
    }
  }
?>

It works perfectly when I take out the dropdown list and 'retreatselected' variable. I have a column in my database for retreatselected and I want the value the user chooses to appear in the database.

I'm pretty sure it's a simple id=/name=/value= correction to make but I'm going mad trying every possibility!

Any help greatly appreciated :)

Answer 1

To keep twitter bootstrap styling of any HTML form element, you must give it a class of "form-control". This applies to:

• input (text)
• input (password)
• input (radio)
• input (checbox)
• select
• textarea

So, to follow on from Rigg's answer, you should use:

Select Retreat:
<select name="retreatseleted" id="retreatseleted" class="form-control">
    <option value="Clifftop Cottage">Clifftop Cottage</option>
    <option value="Cherry Tree">Cherry Trees</option>
    <option value="The Beach House">The Beach House</option>
</select>

Hope this helps!

Answer 2

The reason is that the retreatselected's are not form input fields, so there will be no data called $_POST['retreatselected'] in the $_POST array. Unless there is some javascript doing something clever in the background you are not telling us about,

Replace

<button id="dLabel" for="retreatseleted" class="form-control form-white dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Select Retreat:
</button>
<ul for="retreatseleted" class="dropdown-menu animated fadeIn" role="menu" aria-labelledby="dLabel">
    <li id="retreatseleted" name="retreatseleted" value="Clifftop Cottage" class="animated lightSpeedIn"><a href="#">Clifftop Cottage</a></li>
    <li id="retreatseleted" name="retreatseleted" value="Cherry Trees" class="animated lightSpeedIn"><a href="#">Cherry Trees</a></li>
    <li id="retreatseleted" name="retreatseleted" value="The Beach House" class="animated lightSpeedIn"><a href="#">The Beach House</a></li>
</ul>

With

Select Retreat:
<select name="retreatseleted" id="retreatseleted">
    <option value="Clifftop Cottage">Clifftop Cottage</option>
    <option value="Cherry Tree">Cherry Trees</option>
    <option value="The Beach House">The Beach House</option>
</select