Como preencher próximo campo select com JavaScript e salvar no banco de dados com PHP


Neste tutorial, ser√° apresentado como preencher o pr√≥ximo campo select com JavaScript e salvar no banco de dados com PHP. 

Primeiramente, ser√° mostrado como preencher o campo select com PHP; conforme a op√ß√£o selecionada pelo usu√°rio, ela √© recuperada no JavaScript. 

Em seguida, ser√° apresentado como preencher o pr√≥ximo campo select com JavaScript. 

Por fim, ser√° mostrado como salvar no banco de dados.

Download do código fonte desenvolvido na aula: Download

Curso de PHP Developer: Mais Detalhes do Curso

Receber as aulas gratuitas do curso de PHP Developer: Acessar

Para começar, é criado o arquivo "index.php" com a estrutura básica do HTML e o formulário.

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Celke</title>
</head>

<body>

    <h2>Preencher próximo select</h2>

    <form method="POST" action="">

        <label>Curso: </label>
        <select name="curso_id" id="curso_id">
            <option value="">Selecione</option>
        </select><br><br>

        <label>Módulo: </label>
        <select name="modulo_id" id="modulo_id">
            <option value="">Selecione</option>
        </select><br><br>

        <label>Conte√ļdo: </label>
        <textarea name="conteudo" id="conteudo" cols="30" rows="4" placeholder="Conte√ļdo do curso"></textarea><br><br>

        <input type="submit" value="Salvar"><br><br>

    </form>

</body>

</html>

Criado o arquivo "js/custom.js". Nele, é implementado para receber os seletores dos campos "curso" e "módulo". Com os seletores recuperados, verifica-se se o seletor "curso" existe na página para evitar erros no JavaScript. Se o seletor existir, aguarda-se o usuário selecionar um curso no formulário. Ao selecionar um curso, a função JavaScript é executada, recuperando o ID do curso selecionado pelo usuário e chamando o arquivo "listar_modulos.php", responsável por recuperar no banco de dados os módulos que pertencem ao curso.

// Receber o SELETOR do campo curso do formul√°rio
const inputCursoId = document.getElementById("curso_id");

// Receber o SELETOR do campo módulo do formulário
const inputModuloId = document.getElementById("modulo_id");

// Somente acessa o IF quando existir o SELETOR "curso_id"
if (inputCursoId) {

    // Aguardar o usuario clicar no botao apagar
    inputCursoId.addEventListener("change", async () => {

        // Receber o id da opção selecionada
        const cursoId = inputCursoId.value;

        // Criar a opção carregando para o campo select módulo
        inputModuloId.innerHTML = "<option value=''>Carregando...</option>";

        // Chamar o arquivo PHP responsável em recuperar os módulos do banco de dados
        const dados = await fetch('listar_modulos.php?cursoid=' + cursoId);

    });

}

Necess√°rio incluir o arquivo "custom.js" com JavaScript no arquivo "index.php".

<script src="./js/custom.js"></script>

Criada a base de dados "celke" com as tabelas "cursos", "modulos" e "aulas". Abaixo est√° o SQL para criar a tabela "cursos" e inserir alguns registros.

CREATE TABLE IF NOT EXISTS `cursos` (
  `id` int NOT NULL AUTO_INCREMENT,
  `nome` varchar(220) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

INSERT INTO `cursos` (`id`, `nome`) VALUES
(1, 'Curso de PHP'),
(2, 'Curso de Laravel');

Abaixo está o SQL para criar a tabela "modulos" e inserir alguns registros, indicando a qual curso pertence o módulo.

CREATE TABLE IF NOT EXISTS `modulos` (
  `id` int NOT NULL AUTO_INCREMENT,
  `nome` varchar(220) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
  `curso_id` int NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

INSERT INTO `modulos` (`id`, `nome`, `curso_id`) VALUES
(1, 'Módulo 1 - Introdução ao PHP', 1),
(2, 'Módulo 2 - PHP e Banco de Dados', 1),
(3, 'Módulo 1 - Introdução ao Laravel', 2),
(4, 'Módulo 2 - Como criar sistema administrativo com Laravel', 2),
(5, 'Módulo 3 - Criar sistema de papeis com Laravel', 2);

Abaixo est√° o SQL para criar a tabela "aulas".

CREATE TABLE IF NOT EXISTS `aulas` (
  `id` int NOT NULL AUTO_INCREMENT,
  `conteudo` text NOT NULL,
  `modulo_id` int NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

O próximo passo é criar o arquivo "conexao.php", no qual é implementada a conexão do projeto com a base de dados "celke".

<?php

//Inicio da conex√£o com o banco de dados utilizando PDO
$host = "localhost";
$user = "root";
$pass = "";
$dbname = "celke";
$port = 3306;

try {
    //Conex√£o com a porta
    //$conn = new PDO("mysql:host=$host;port=$port;dbname=" . $dbname, $user, $pass);

    //Conex√£o sem a porta
    $conn = new PDO("mysql:host=$host;dbname=" . $dbname, $user, $pass);
    //echo "Conex√£o com banco de dados realizado com sucesso.";
} catch (PDOException $err) {
    echo "Erro: Conex√£o com banco de dados n√£o realizado com sucesso. Erro gerado " . $err->getMessage();
}
    //Fim da conex√£o com o banco de dados utilizando PDO

No arquivo "index.php", é incluído o arquivo "conexao.php", recuperados os cursos no banco de dados e impressos no campo "cursos".

// Incluir o arquivo com a conex√£o com banco de dados
include_once './conexao.php';

// Recuperar do banco de dados os cursos
$query_cursos = "SELECT id, nome FROM cursos ORDER BY nome ASC";

// Prepara a QUERY
$result_cursos = $conn->prepare($query_cursos);

// Executar a QUERY
$result_cursos->execute();

?>

<label>Curso: </label>
<select name="curso_id" id="curso_id">
	<option value="">Selecione</option>

	<?php

	// Percorrer o array de cursos retornado do banco de dados
	while ($row_curso = $result_cursos->fetch(PDO::FETCH_ASSOC)) {

		// Extrair o array de dados para usar o nome do elemento do array como vari√°vel
		extract($row_curso);

		// Criar a opção para o campo select
		echo "<option value='$id'>$nome</option>";
	}

	?>

</select><br><br>

Criado o arquivo "listar_modulos.php", responsável por recuperar os módulos conforme o curso selecionado no formulário. Após recuperar os registros do banco de dados, são retornados para o JavaScript.

<?php

// Incluir o arquivo com a conex√£o com banco de dados
include_once './conexao.php';

// Receber o id do curso
$curso_id = filter_input(INPUT_GET, 'cursoid', FILTER_SANITIZE_NUMBER_INT);
// $curso_id = 100;

// QUERY para recuperar os módulos
$query_modulos = "SELECT id, nome FROM modulos WHERE curso_id =:curso_id ORDER BY nome ASC";

// Prepara a QUERY
$result_modulos = $conn->prepare($query_modulos);

// Substituir o link pelo valor
$result_modulos->bindParam(':curso_id', $curso_id);

// Executar a QUERY
$result_modulos->execute();

// Acessar o IF quando encontrar módulo no banco de dados
if(($result_modulos) and ($result_modulos->rowCount() != 0)){

    // Ler os registros recuperado do banco de dados
    $dados = $result_modulos->fetchAll(PDO::FETCH_ASSOC);

    // Criar o array com o status e os dados
    $retorna = ['status' => true, 'dados' => $dados];

}else{

    // Criar o array com o status e os dados
    $retorna = ['status' => false, 'msg' => 'Nenhum módulo encontrado!'];
}

// Converter o array em objeto e retornar para o JavaScript
echo json_encode($retorna);

No JavaScript, é feita a leitura dos dados retornados do PHP e verificado se algum registro foi encontrado, neste caso, algum módulo. Se não encontrar, envia a opção para o campo de módulos indicando que não foram encontrados registros. No entanto, se encontrar registros, acessa o bloco IF, que contém um laço de repetição percorrendo a lista de módulos. Após percorrer a lista de módulos, os dados são enviados para o campo de módulos.

// Ler os dados
const resposta = await dados.json();
//console.log(resposta);

// Acessar o IF quando encontrar módulo no banco de dados
if (resposta['status']) {

	// Criar a opção selecione para o campo select módulo
	var opcoes = "<option value=''>Selecione</option>";

	// Percorrer a lista de módulos
	for (var i = 0; i < resposta.dados.length; i++){

		// Criar a lista de op√ß√Ķes para o campo select m√≥dulos
		opcoes += `<option value='${resposta.dados[i]['id']}'>${resposta.dados[i]['nome']}</option>`;
	}

	// Enviar as op√ß√Ķes para o campo select no HTML
	inputModuloId.innerHTML = opcoes;
} else {

	// Enviar a opção vazia para o campo select no HTML
	inputModuloId.innerHTML = `<option value=''>${resposta['msg']}</option>`;
}

Para finalizar, é acrescentado no arquivo "index.php" na tag <form> para qual arquivo os dados do formulário devem ser enviados quando o usuário clicar no botão salvar.

<form method="POST" action="cadastrar_aula.php">

Criado o arquivo "cadastrar_aula.php", respons√°vel por cadastrar o registro no banco de dados e atribuir a mensagem de erro ou sucesso na sess√£o "msg".

<?php

session_start(); // Iniciar a sess√£o

// Limpar o buffer de saida
ob_start();

// Incluir o arquivo com a conex√£o com banco de dados
include_once './conexao.php';

// Receber os dados enviado pelo formul√°rio
$dados = filter_input_array(INPUT_POST, FILTER_DEFAULT);
// var_dump($dados);

// Criar a QUERY cadastrar módulo no banco de dados
$query_cad_aula = "INSERT INTO aulas (conteudo, modulo_id) VALUES (:conteudo, :modulo_id)";

// Prepara a QUERY
$cad_aula = $conn->prepare($query_cad_aula);

// Substituir o link pelo valor
$cad_aula->bindParam(':conteudo', $dados['conteudo']);
$cad_aula->bindParam(':modulo_id', $dados['modulo_id']);

// Verificar se consegui cadastrar corretamente
if ($cad_aula->execute()) {

    // Criar a sess√£o msg e atribuir a mensagem de sucesso
    $_SESSION['msg'] = "<p style='color: #082;'>Aula cadastrada com sucesso!</p>";

    // Redirecionar o usu√°rio para o formul√°rio
    header("Location: index.php");
} else {

    // Criar a sess√£o msg e atribuir a mensagem de sucesso
    $_SESSION['msg'] = "<p style='color: #f00;'>Aula n√£o cadastrada!</p>";

    // Redirecionar o usu√°rio para o formul√°rio
    header("Location: index.php");
}

A mensagem de erro ou sucesso, criada no arquivo "cadastrar_aula.php", será impressa para o usuário através do arquivo "index.php". Primeiramente, a sessão é iniciada e verifica-se se existem mensagens. Se existirem, são impressas.

session_start(); // Iniciar a sess√£o

// Verificar se existe a sess√£o msg
if (isset($_SESSION['msg'])) {

	// Imprimir o valor que est√° na sess√£o
	echo $_SESSION['msg'];

	// Destruir a sess√£o
	unset($_SESSION['msg']);
}

Baixar o código-fonte completo do projeto.

Bom, era isso. Espero que o tutorial tenha sido √ļtil!