Detailed explanations here: Material Design Forms
<?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="card-panel red accent-2">' . $db->error() . '<br>' . $db->getLastSql() . '</p>' . "\n";
} else {
*/
$msg = '<p class="card-panel teal accent-2">Database updated successfully !</p>' . " \n";
// $msg = '<p class="card-panel teal accent-2">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', 'material');
$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', '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="material-icons right">check</i>', 'class=btn waves-effect waves-light 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>Material Design Form - Dependent Select dropdown form</title>
<meta name="description" content="Material Design Form Form Generator - Example of dynamic dropdown depending on a main select box">
<link rel="canonical" href="https://www.phpformbuilder.pro/templates/material-forms/dependent-select-dropdown.php" />
<!-- Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Material icons CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<?php $form->printIncludes('css'); ?>
</head>
<body>
<h1 class="center-align">Php Form Builder - Material Design Dependent Select dropdown form<br><small>Dynamic dropdown depending on a main select box</small></h1>
<div class="container">
<?php
// information for users - remove this in your forms
include_once '../assets/material-forms-notice.php';
?>
<div class="row">
<div class="col m11 l10">
<?php
if (isset($msg)) {
echo $msg;
}
$form->render();
?>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Materialize JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?php
$form->printIncludes('js');
$form->printJsCode();
?>
<script>
$(document).ready(function() {
$('select[name="category"]').formSelect();
$('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>