1
votes

masquer un attribut de formulaire sans "masquer" la ligne d'amorçage col-4 à l'aide de jquery

J'ai besoin de pouvoir cacher le form1 mais PAS l'espace d'amorçage col-4-md qu'il occupe. Quand je cache form1, form2 qui est dans la même rangée est poussé sur l'espacement de 4 col. La courte vidéo d'une minute pourrait être le moyen le plus simple de voir ce que j'essaie de faire.

Code HTML:

$('#delivery_btn').on('click', function(){
  $('#form1').toggle();

});

$('#pickup_btn').on('click', function(){
  $('#form2').toggle();
});

Jquery Code

<div class="row">
  <div class="col-1"> </div>
<input type="submit" class="col-4 btn btn-success" id="delivery_btn" value="Enter Delivery Address"></input> 
<div class="col-2 center"> OR </div>
  <input type="submit" class="col-4 btn btn-success" id="pickup_btn" value="Find Pickup Location"></input>
<div class="col-1"> </div>
</div>

<div class="row">
    <div class="col-1"> </div>
    <form class="col-4" id='form1'>

      <label>Enter Address</label>
    <input type="text" placeholder="Example: 123 Main St."></input> <br>
  <label>Enter Zip Code</label>
    <input type="text" placeholder="Enter Zip Code"></input> <br>
    <input type="submit"></input>
</form> 
<div class="col-2"></div>

   <form class="col-4" id='form2'>
<input type="text" value="Zip"></input ><br>
    <input type="submit" value="search"></input>
</form> 
</div>

Utilisation d'accessoires comme Changer .prop à l'aide de jQuery ne déclenche pas d'événement .change était une idée que j'avais, mais prop n'est PAS pris en charge sur IE. De plus, je ne suis même pas sûr que cela fonctionnerait car cela cacherait probablement encore le col-4.

Je suis sûr qu'il pourrait y avoir un moyen simple de résoudre ce que j'essaie de faire. Merci en avance.

jquery html css bootstrap-4

1 commentaires

Utilisez le style CSS Visibilité .

4 Réponses :

0
votes

Vous pouvez y parvenir en définissant le style visibilité du formulaire sur hidden ou opacity sur 0 .

$('#delivery_btn').toggle(function(){
    $('#form1').css({'visibility': 'hidden'});
}, function() {
    $('#form1').css({'visibility': 'visible'});
});

0 commentaires

0
votes

Une approche consiste à utiliser toggle () sur les enfants du formulaire, essentiellement comme ceci:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="container-fluid">

<div class="row">

  <div class="offset-1 col-4">
    <button class="btn btn-success btn-block" id="delivery_btn">
      Enter Delivery Address
    </button>
  </div>
  
  <div class="col-2 text-center">OR</div>

  <div class="col-4">
    <button class="btn btn-success btn-block" id="pickup_btn">
      Find Pickup Location
    </button>
  </div>

</div>

<div class="row">

  <div class="offset-1 col-4 mt-1">
    <form id='form1'>
      <div class="form-group">
        <label for="address">Enter Address</label>
        <input class="form-control" type="text" placeholder="Example: 123 Main St." id="address">  
      </div>
      <div class="form-group">
        <label for="zip">Enter Zip Code</label>
        <input class="form-control" type="text" placeholder="Enter Zip Code" id="zip">
      </div>
      <button type="submit" class="btn btn-info btn-block">
        Submit
      </button>
    </form>
  </div>

  <div class="offset-2 col-4 mt-1">
    <form id='form2'>
      <div class="form-group">
        <input class="form-control" type="text" value="Zip">
      </div>
      <button class="btn btn-warning btn-block" type="submit">
        Search
      </button>
    </form>
  </div>

</div>

</div>

Cependant, j'utiliserai une version modifiée du squelette que vous avez pour obtenir un meilleur modèle Bootstrap, consultez l'exemple:

$(document).ready(function()
{
    $("#form2").hide();
});

$('#delivery_btn, #pickup_btn').on('click', function()
{
    $('#form1, #form2').slideToggle();
});

$('#delivery_btn').on('click', function()
{
    $('#form1').children().toggle();
});

$('#pickup_btn').on('click', function()
{
    $('#form2').children().toggle();
});

0 commentaires

1
votes

Il y a une petite erreur dans le code html et jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="row">
	<div class="col-1"> </div>
	<input type="submit" class="col-4 btn btn-success" id="delivery_btn" value="Enter Delivery Address">
</input> 
<div class="col-2 center"> OR </div>
<input type="submit" class="col-4 btn btn-success" id="pickup_btn" value="Find Pickup Location"></input>
<div class="col-1"> </div>
</div>

<div class="row">
	<div class="col-1"> </div>
	<div class="col-4">
		
		<form id='form1'>
			<label>Enter Address</label>
			<input type="text" placeholder="Example: 123 Main St."></input> <br>
			<label>Enter Zip Code</label>
			<input type="text" placeholder="Enter Zip Code"></input> <br>
			<input type="submit"></input>
		</form> 
	</div>
	<div class="col-2"></div>
	<div class="col-4">
		<form id='form2'>
			<input type="text" value="Zip"></input ><br>
			<input type="submit" value="search"></input>
		</form> 
	</div>
</div>
<script type="text/javascript">
	$('#delivery_btn').on('click', function(){
		$('#form1').toggle();
		$('#form2').hide();
	});
  
	$('#pickup_btn').on('click', function(){
		$('#form2').toggle();
		$('#form1').hide();
	});

</script>

3 commentaires

intéressant vous l'avez fait sans la visibilité comme tout le monde. et le vôtre bascule aussi dans les deux sens comme le site Web de papa johns. quelle a été mon erreur? Merci de répondre!

ce qui rend ce

une ligne au-dessus de

a beaucoup de sens car ils sont techniquement séparés maintenant (mais un à la fois). Je suppose que c'est ainsi que vous avez résolu ce problème sans utiliser de visible.

vous devez d'abord comprendre comment Grid dans bootstrap fonctionne réellement, consultez le lien ci-dessous. getbootstrap.com/docs/4.2/layout/grid

0
votes

.control-group{
  display inline-block
  vertical-align top
  background $color--white
  text-align left
  box-shadow 0 1px 2px rgba(0, 0, 0, 0.1)
  padding 30px
  width 200px
  height 210px
  margin 10px
}

.control {
  display block
  position relative
  padding-left 30px
  margin-bottom 15px
  cursor pointer
  font-size 18px
}

0 commentaires