HTML Como fazer para carregar campos, a partir de um select no mesmo formulário?

Thesalos · 26 de fevereiro de 2020

Preciso que ao selecionar uma opção do select, outros campos do formulários carreguem, de acordo com opção selecionada.

Por exemplo se selecionar a opção computadores no formulário, irá abrir campos para preencher referente a computadores no mesmo formulário.

Aqui está o select.

<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" type="text/css" href="css/formstyle.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<title>Help Desk</title>
</head>
<body>
	<form class="form" method="post" action="#">
		<h1>Cadastrar Ativos</h1>

			<fieldset class="grupo">

				<div class="campo">
					<label for="status">Tipo Ativo</label>
						<select name="status" id="status" required>
							<option value=""></option>
							<option value="#">Computadores</option>
							<option value="#">Impressoras</option>
							<option value="#">Monitores</option>
							<option value="#">programas</option>
							<option value="#">Outros</option>
						</select>
				</div>
			</fieldset>
	</form>
</body>
</html>

E aqui está uns dos formulários q quero carregar de acordo com a opção selecionada (no caso computadores), mas que carrega fique tudo num formulário só.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" type="text/css" href="css/formstyle.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<title>Help Desk</title>
</head>
<body>
	<form class="form" method="post" action="#">
		<!--<h1>Cadastrar Computadores</h1>-->

			<fieldset class="grupo">

				<div class="campo">
					<label for="status">Status</label>
						<select name="status" id="status" required>
							<option value=""></option>
							<option value="#">Habilitado</option>
							<option value="#">Desabilitado</option>
						</select>
				</div>

				<div class="campo">
					<label for="inventario">Nº de inventário</label>
					<input type="number" name="inventario" id="inventario" placeholder="Informe um número" >
				</div>

				<div class="campo">
					<label for="nome">Nome</label>
					<input type="text" name="nome" id="nome" placeholder="Digite o nome para identificação" required>
				</div>
			</fieldset>

			<fieldset class="grupo">
				<div class="campo">
					<label for="fab">Fabricante</label>
						<input type="text" name="fab" id="fab" placeholder="Informe o fabricante">
				</div>

				<div class="campo">
					<label for="model">Modelo</label>
						<input type="text" name="model" id="model" placeholder="Informe o modelo" >
				</div>
			</fieldset>

			<fieldset class="grupo">
				<div class="campo">
					<label for="pm">Placa-mãe</label>
						<input type="text" name="pm" id="pm" placeholder="Informe o modelo" >
				</div>

				<div class="campo">
					<label for="proc">Processador</label>
						<input type="text" name="proc" id="proc" placeholder="Informe o modelo" >
				</div>

				<div class="campo">
					<label for="ram">Memória RAM</label>
						<input type="number" name="ram" id="ram" placeholder="Informe a qtd em GB" >
				</div>
			</fieldset>

			<fieldset class="grupo">
				<div class="campo">
					<label for="hd">Qtd. HD</label>
						<input type="number" name="hd" id="hd" placeholder="Informe a qtd em GB" >
				</div>

				<div class="campo">
					<label for="video">Placa de vídeo</label>
						<input type="text" name="video" id="video" placeholder="Informe o modelo" >
				</div>

				<div class="campo">
					<label for="fonte">Fonte de alimentação</label>
						<input type="text" name="fonte" id="fonte" placeholder="Informe o modelo" >
				</div>
			</fieldset>

				<div class="campo">
					<label for="leitor">Driver óptico</label>
						<input type="text" name="leitor" id="leitor" placeholder="Informe o modelo" >
				</div>

				<div class="campo">
            		<label for="mensagem">Comentários</label>
            		<textarea rows="6" style="width: 32em" id="mensagem" name="mensagem"></textarea>
        		</div>

			<fieldset>
				<button type="submit" name="enviar" value="enviar">Enviar</button>
				<button type="reset" name="limpar" value="limpar" style="margin-right: 15px;">Limpar</button>
			</fieldset>
	</form>
<body>

</html>

GabrielSennaMs · 27 de fevereiro de 2020

@Rickkdinho Uma maneira de você fazer isso, é você setar o evento de change do seu select, e depois você usar o valor do select como parametro para liberar uma parte do form.

Aqui tem um exemplo de como fazer

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <title>Help Desk</title>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                display: flex;
            }

            .form {
                max-width: 600px;
                margin: auto;
                padding: 1em;
                box-shadow: 1px 1px 15px #999;
            }

            .fieldset {
                display: none;
            }

        </style>
    </head>
    <body>
        <div class="form">
            <form method="post" action="#">
                <fieldset class="grupo">
                    <div class="campo">
                        <label for="status">Tipo Ativo</label>
                        <select name="status" id="status" required>
                            <option disabled selected>Selecione um Ativo</option>
                            <option value="#computadores">Computadores</option>
                            <option value="#impressoras">Impressoras</option>
                            <option value="#monitores">Monitores</option>
                            <option value="#programas">programas</option>
                            <option value="#outro">Outros</option>
                        </select>
                        <br><br>
                        <fieldset class="fieldset" id="computadores" disabled>
                            <p>Computadores</p>
                        </fieldset>
                        <fieldset class="fieldset" id="impressoras" disabled>
                            <p>Impressoras</p>
                        </fieldset>
                        <fieldset class="fieldset" id="monitores" disabled>
                            <p>Monitores</p>
                        </fieldset>
                        <fieldset class="fieldset" id="programas" disabled>
                            <p>Programas</p>
                        </fieldset>
                        <fieldset class="fieldset" id="outro" disabled>
                            <p>Outros</p>
                        </fieldset>
                    </div>
                </fieldset>
            </form>
        </div>

        <script>
            $(function(){
                $('#status').on('change', function(){
                    let campo = $($(this).val());

                    $('.fieldset').css('display', 'none');
                    $('.fieldset').attr('disabled', true);

                    if(campo)
                    {
                        campo.css('display', 'block');
                        campo.attr('disabled', false);
                    }
                });
            });
        </script>
    </body>
</html>

Nesse exemplo eu uso Jquery, mas é possivel fazer usando javascript puro.

Pra ficar legal você ainda pode colocar um efeito de transição e tambem vai ter que fazer alguns ajuste no form.

Thesalos · 27 de fevereiro de 2020

@GabrielSennaMs Era exatamente o q eu queria amigo, mas só carrega um campo depois de selecionar a opção, tentei adicionar outros e n foi.

GabrielSennaMs · 28 de fevereiro de 2020

@Rickkdinho Para adicionar outros campos, basta você adicionar um elemento option no select com o valor id corespondente ao campo que você quer adicionar.

<option value="#outro_campo">Outros</option>

<fieldset class="fieldset" id="outro_campo" disabled>
	<p>Outros</p>
</fieldset>

Para que um campo esteja aberto por padrão no formulario, você deve setar a propriedade display para block e remover o disabled

<fieldset class="fieldset" style="display: block;" id="outro_campo">
	<p>Outros</p>
</fieldset>

Entrar

HTML Como fazer para carregar campos, a partir de um select no mesmo formulário?

Posts recomendados

Thesalos

Link para o comentário

Compartilhar em outros sites

GabrielSennaMs

Link para o comentário

Compartilhar em outros sites

Thesalos

Link para o comentário

Compartilhar em outros sites

GabrielSennaMs

Link para o comentário

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos