Enable inputs as required

Question

Enable inputs as required

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

How can I make each input field filled in the next one appear in jQuery? It would be so, select unit then the user selects the period of the party, after choosing the day the last field to choose the type of party appears

function marcaDesmarcaPeriodo(caller) {
  var checks = document.querySelectorAll('.periodo');    
  checks.forEach(c => c.checked = (c == caller) );
}

function marcaDesmarcaFesta(caller) {
  var checks = document.querySelectorAll('.tfesta');    
  checks.forEach(c => c.checked = (c == caller) );
}

<div class="form-group">
  <label>Selecione a unidade que deseja realizar a Festa</label>
  <select class="form-control" id="list-lugar" name="unidade">
    <option value="0" disabled="true" selected="true">Selecione uma Unidade</option>
    <option name="PMA" value="200">Praia</option>
    <option name="BRB" value="200">Bourbon</option>
    <option name="MTO" value="100">Morumbi</option>
    <option name="CN" value="100">Shopping</option>
    <option name="SCS" value="100">Park</option>
    <option name="TPL" value="100">Tiête</option>
    <option name="SBC" value="100">São</option>
  </select>
</div>

<div class="form-group">
  <label>Escolha o período da Festa</label>
  <div class="checkfesta">
    <div class="row">
      <div class="col-md-5">
        <input id="add-periodo-t" onclick="marcaDesmarcaPeriodo(this)" class="periodo" type="checkbox" name="tarde" value="299" />
        <label for="add-periodo-t">Período da Tarde</label>
      </div>
      <div class="col-md-5">
        <input id="add-periodo-n" onclick="marcaDesmarcaPeriodo(this)" class="periodo" type="checkbox" name="noite" value="499" />
        <label for="add-periodo-n">Período da Noite</label>
      </div>
    </div>
  </div>
</div>

<div class="form-group">
  <label>Escolha o dia da Festa</label>
  <input type="text" class="form-control" name="data" id="data" placeholder="Escolha a data da Festa">
</div>

<div class="form-group">
  <label>Escolha o tipo de Festa que deseja</label>
  <div class="checkfesta">
    <div class="row">
      <div class="col-md-4 col-sm-6">
        <input id="add-festa-k" onclick="marcaDesmarcaFesta(this)" class="tfesta" type="checkbox" name="kids" value="1499" />
        <label for="add-festa-k">Festa 1</label>
      </div>
      <div class="col-md-4 col-sm-6">
        <input id="add-festa-s" onclick="marcaDesmarcaFesta(this)" class="tfesta" type="checkbox" name="space" value="2000" />
        <label for="add-festa-s">Festa 2</label>
      </div>
    </div>
  </div>
</div>

<input type="button" id="proximo2" name="next" class="next action-button" value="Próximo" />

javascript jquery html5

asked by anonymous 21.05.2018 / 21:41

2 answers

1

Dude I made an example here, see if this helps:

$(document).ready(function() {
	$("#list-lugar").on("blur", function() {
		$(".form-group:eq(1)").removeAttr("hidden");
	})
	$("#add-periodo-t, #add-periodo-n").on("click", function() {
		$(".form-group:eq(2)").removeAttr("hidden");
	})
	$("#data").on("blur", function() {
		$(".form-group:eq(3)").removeAttr("hidden");
	})
	$("#add-festa-k, #add-festa-s").on("click", function() {
		$("input[type=button]").removeAttr("hidden");
	})

	$("#data").datepicker();

})

function marcaDesmarcaPeriodo(caller) {
  	var checks = document.querySelectorAll('.periodo');    
  	checks.forEach(c => c.checked = (c == caller) );
}

function marcaDesmarcaFesta(caller) {
  	var checks = document.querySelectorAll('.tfesta');    
  	checks.forEach(c => c.checked = (c == caller) );
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="container">
		<div class="row">
			<div class="form-group">
				<label>Selecione a unidade que deseja realizar a Festa</label>
				<select class="form-control" id="list-lugar" name="unidade">
					<option value="0" disabled="true" selected="true">Selecione uma Unidade</option>
					<option name="PMA" value="200">Praia</option>
					<option name="BRB" value="200">Bourbon</option>
					<option name="MTO" value="100">Morumbi</option>
					<option name="CN" value="100">Shopping</option>
					<option name="SCS" value="100">Park</option>
					<option name="TPL" value="100">Tiête</option>
					<option name="SBC" value="100">São</option>
				</select>
			</div>
		</div>
		
		<div class="row">
			<div class="form-group" hidden>
				<label>Escolha o período da Festa</label>
				<div class="checkfesta">
					<div class="row">
						<div class="col-md-5">
							<input id="add-periodo-t" class="periodo" type="checkbox" name="tarde" value="299" onclick="marcaDesmarcaPeriodo(this)" />
							<label for="add-periodo-t">Período da Tarde</label>
						</div>
						<div class="col-md-5">
							<input id="add-periodo-n" class="periodo" type="checkbox" name="noite" value="499" onclick="marcaDesmarcaPeriodo(this)"/>
							<label for="add-periodo-n">Período da Noite</label>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="form-group" hidden>
				<label>Escolha o dia da Festa</label>
				<input type="text" class="form-control" name="data" id="data" placeholder="Escolha a data da Festa">
			</div>
		</div>

		<div class="row">
			<div class="form-group" hidden>
				<label>Escolha o tipo de Festa que deseja</label>
				<div class="checkfesta">
					<div class="row">
						<div class="col-md-4 col-sm-6">
							<input id="add-festa-k" class="tfesta" type="checkbox" name="kids" value="1499" onclick="marcaDesmarcaFesta(this)" />
							<label for="add-festa-k">Festa 1</label>
						</div>
						<div class="col-md-4 col-sm-6">
							<input id="add-festa-s" class="tfesta" type="checkbox" name="space" value="2000" onclick="marcaDesmarcaFesta(this)" />
							<label for="add-festa-s">Festa 2</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<input type="button" id="proximo2" name="next" class="btn next action-button" value="Próximo" hidden />
	</div>

21.05.2018 / 22:38

Send PHP checkbox value Create a pdf on android

score 1 · Accepted Answer

As the @Leandro response proposed, add the hidden attribute to div s .form-group less in the first. With jQuery you can show% s of% s in this way by removing the div attribute from the subsequent hidden :

$('input, select', '.form-group').on('change', function(){
   $(this)
   .closest('.form-group')
   .next()
   .removeAttr('hidden');
});

function marcaDesmarcaPeriodo(caller) {
  var checks = document.querySelectorAll('.periodo');    
  checks.forEach(c => c.checked = (c == caller) );
}

function marcaDesmarcaFesta(caller) {
  var checks = document.querySelectorAll('.tfesta');    
  checks.forEach(c => c.checked = (c == caller) );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="form-group">
  <label>Selecione a unidade que deseja realizar a Festa</label>
  <select class="form-control" id="list-lugar" name="unidade">
    <option value="0" disabled="true" selected="true">Selecione uma Unidade</option>
    <option name="PMA" value="200">Praia</option>
    <option name="BRB" value="200">Bourbon</option>
    <option name="MTO" value="100">Morumbi</option>
    <option name="CN" value="100">Shopping</option>
    <option name="SCS" value="100">Park</option>
    <option name="TPL" value="100">Tiête</option>
    <option name="SBC" value="100">São</option>
  </select>
</div>

<div class="form-group" hidden>
  <label>Escolha o período da Festa</label>
  <div class="checkfesta">
    <div class="row">
      <div class="col-md-5">
        <input id="add-periodo-t" onclick="marcaDesmarcaPeriodo(this)" class="periodo" type="checkbox" name="tarde" value="299" />
        <label for="add-periodo-t">Período da Tarde</label>
      </div>
      <div class="col-md-5">
        <input id="add-periodo-n" onclick="marcaDesmarcaPeriodo(this)" class="periodo" type="checkbox" name="noite" value="499" />
        <label for="add-periodo-n">Período da Noite</label>
      </div>
    </div>
  </div>
</div>

<div class="form-group g3" hidden>
  <label>Escolha o dia da Festa</label>
  <input type="text" class="form-control" name="data" id="data" placeholder="Escolha a data da Festa">
</div>

<div class="form-group g4" hidden>
  <label>Escolha o tipo de Festa que deseja</label>
  <div class="checkfesta">
    <div class="row">
      <div class="col-md-4 col-sm-6">
        <input id="add-festa-k" onclick="marcaDesmarcaFesta(this)" class="tfesta" type="checkbox" name="kids" value="1499" />
        <label for="add-festa-k">Festa 1</label>
      </div>
      <div class="col-md-4 col-sm-6">
        <input id="add-festa-s" onclick="marcaDesmarcaFesta(this)" class="tfesta" type="checkbox" name="space" value="2000" />
        <label for="add-festa-s">Festa 2</label>
      </div>
    </div>
  </div>
</div>

<input hidden type="button" id="proximo2" name="next" class="next action-button" value="Próximo" />