<?php
use phpformbuilder\Form;
use phpformbuilder\Validator\Validator;
use phpformbuilder\database\Mysql;
/* =============================================
start session and include form class
============================================= */
session_start();
include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/Form.php';
/* =============================================
validation if posted
============================================= */
if ($_SERVER["REQUEST_METHOD"] == "POST" && Form::testToken('movies-form') === true) {
// create validator & auto-validate required fields
$validator = Form::validate('movies-form');
// additional validation
$validator->email()->validate('user-email');
// check for errors
if ($validator->hasErrors()) {
$_SESSION['errors']['movies-form'] = $validator->getAllErrors();
} else {
/* (disabled in demo - no database enabled)
require_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/database/db-connect.php';
require_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/database/Mysql.php';
$db = new Mysql();
$filter['user-email'] = Mysql::sqlValue($_POST['user-email'], Mysql::SQLVALUE_TEXT);
$update['movie'] = Mysql::SQLValue($_POST['movie']);
if (!$db->UpdateRows('movies', $update, $filter)) {
$msg = '<p class="alert alert-danger">' . $db->error() . '<br>' . $db->getLastSql() . '</p>' . "\n";
} else {
*/
$msg = '<p class="callout success">Database updated successfully !</p>'. " \n";
// $msg = '<p class="alert alert-success">Database updated successfully !<br>Last query : <strong>' . $db->getLastSql() . '</strong></p>'. " \n";
/*
}
*/
}
}
/* The demo is not connected to any database and use the array below to build the options.
Uncomment this part of code if you want to retrieve the options values from your database
$categories_ids = array();
$categories = array();
$qry = 'SELECT id, category FROM categories';
$db = new Mysql();
$db->query($qry);
$db_count = $db->rowCount();
if(!empty($db_count)) {
while (! $db->endOfSeek()) {
$row = $db->row();
$categories_ids[] = $row->categories_ids;
$categories[] = $row->categories;
}
}
*/
// values for demo
$db_count = 10;
$categories_ids = array('1', '2', '3', '4', '5', '6', '7', '8', '9', '10');
$categories = array(
'Action',
'Adventure',
'Animation',
'Comedy',
'Documentary',
'Drama',
'Horror',
'Mystery',
'Thriller',
'War'
);
$form = new Form('movies-form', 'vertical', 'novalidate', 'foundation');
$form->setMode('development');
$form->startFieldset('<h2 class="mb-5">Choose a movie category</h2>');
for ($i = 0; $i < $db_count; $i++) {
$form->addOption('category', $categories_ids[$i], $categories[$i]);
}
$form->addSelect('category', 'Categories', 'class=select2, required');
// create a div with an id to retrieve the dependent select box with Ajax
$form->addHtml('<div id="movies"> </div>');
$form->addInput('email', 'user-email', '', 'Your email : ', 'required');
$form->addHtml('<p> </p>');
$form->addBtn('submit', 'submit-btn', 1, 'Submit <i class="fi fi-mail append"></i>', 'class=success button ladda-button, data-style=zoom-in');
$form->endFieldset();
// jQuery validation
$form->addPlugin('formvalidation', '#movies-form');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Foundation Form - Dependent Select dropdown form</title>
<meta name="description" content="Foundation Form Generator - Example of dynamic dropdown depending on a main select box">
<link rel="canonical" href="https://www.phpformbuilder.pro/templates/foundation-forms/dependent-select-dropdown.php" />
<!-- Foundation CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet">
<!-- foundation icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
<?php $form->printIncludes('css'); ?>
<style type="text/css">
fieldset {
margin-bottom: 80px;
}
</style>
</head>
<body>
<h1 class="text-center">Php Form Builder - Foundation Form with Dependent Select dropdown<br><small>Dynamic dropdown depending on a main select box</small></h1>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-10 small-offset-1 medium-8 medium-offset-2 cell">
<?php
if (isset($msg)) {
echo $msg;
}
$form->render();
?>
</div>
</div>
</div>
<!-- jQuery -->
<script src="//code.jquery.com/jquery.min.js"></script>
<?php
$form->printIncludes('js');
$form->printJsCode();
?>
<script>
$(document).ready(function() {
var form = forms['movies-form'];
$('select[name="category"]').on('change', function() {
let target = $('#movies');
$.ajax({
url: 'dependent-select-dropdown-form/ajax-dependent-select-dropdown.php',
type: 'POST',
data: {
'movie_id': $('select[name="category"]').val()
}
}).done(function(data) {
target.html(data);
var run = window.run;
if (typeof(run) != 'undefined') {
setTimeout(run, 0);
}
}).fail(function(data, statut, error) {
console.log(error);
});
})
$('select[name="category"]').trigger('change');
});
</script>
</body>
</html>