Enable inputs as filling

Asked

Viewed 47 times

1

How can I make each input field filled next appear in jQuery? Would thus, select drive after the user selects the party period, after choosing the day appear the last field to choose the party type

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
  • 1

    Because it does not use radio instead of checkbox? so you don’t have to use this script that you posted.

  • So in the application it’s like a shopping cart that it takes the dynamic value and keeps adding and subtracting... On the radio, I couldn’t apply

  • Man if you don’t use radio the user will be able to choose both times, this is exactly what you want?

  • @Leandro he can not select the two times why I’m using a selection with javascript

2 answers

1

Man I made an example here, see if this helps you:

$(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>
	<script src="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>

1


As you proposed the @Leandro response, add the attribute hidden in divs .form-group except in the first. With jQuery you can show the divs thus removing the attribute hidden of div subsequent:

$('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>
<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" 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" />

  • Cool this way you did with Closest.

  • Thank you so much for the help, I had not been able to find anything related to this, looking well the function is even easy

Browser other questions tagged javascript jquery html5

You are not signed in. Login or sign up in order to post.