<?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="alert alert-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', 'bs3');
$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 <span class="glyphicon glyphicon-envelope append"></span>', 'class=btn btn-success 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>Bootstrap Form - Dependent Select dropdown form</title>
<meta name="description" content="Bootstrap Form Generator - Example of dynamic dropdown depending on a main select box">
<link rel="canonical" href="https://www.phpformbuilder.pro/templates/bootstrap-3-forms/dependent-select-dropdown.php" />
<!-- Link to Bootstrap css here -->
<?php $form->printIncludes('css'); ?>
</head>
<body>
<h1 class="text-center">Php Form Builder - Dependent Select dropdown form<br><small>Dynamic dropdown depending on a main select box</small></h1>
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<?php
if (isset($msg)) {
echo $msg;
}
$form->render();
?>
</div>
</div>
</div>
<!-- jQuery -->
<script src="//code.jquery.com/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<?php
$form->printIncludes('js');
$form->printJsCode();
?>
<script>
$(document).ready(function() {
$('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>