Je veux changer l'arrière-plan de div lorsque l'utilisateur remplit toutes les entrées dans une partie du formulaire. Existe-t-il un moyen de le faire, mais d'y placer un bouton et de cliquer sur ce bouton pour changer l'arrière-plan

.step-dots div {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: #d9d9d9;
    margin-left: 6px;
}
<form action="">
        <div class="row">
            <div class="col-lg-3">
                <label for="">Apple</label>
                <input type="text" id="" name="text-group" checked>
            </div>
            <div class="col-lg-3">
                <label for="">Apple</label>
                <input type="text" id="" name="text-group">
            </div>
            <div class="col-lg-3">
                <label for="">Apple</label>
                <input type="text" id="" name="text-group">
            </div>
            <div class="col-lg-3">
                <label for="">Apple</label>
                <input type="text" id="" name="text-group">
            </div>
        </div>
</form>
<div class="step-dots">
        <div></div>
        <div></div>
        <div></div>
</div>
1
Dương Thái Sơn 20 juin 2019 à 07:08

3 réponses

Meilleure réponse

Vous pouvez utiliser l'événement blur, vérifier la valeur d'entrée et en fonction de cet ajout / suppression de votre classe div.

$("input").blur(function() {
  let Counter = true;
  $('[name="text-group"]').each(function() {
    if (this.value == '') {
      Counter = false;
      return false;
    }
  });
  if (Counter) {
    $('.step-dots div').addClass('divColor');
  } else {
    $('.step-dots div').removeClass('divColor');
  }

});
.step-dots div {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background: #d9d9d9;
  margin-left: 6px;
}

.divColor {
  background: red !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <div class="row">
    <div class="col-lg-3">
      <label for="">Apple</label>
      <input type="text" id="" name="text-group" checked>
    </div>
    <div class="col-lg-3">
      <label for="">Apple</label>
      <input type="text" id="" name="text-group">
    </div>
    <div class="col-lg-3">
      <label for="">Apple</label>
      <input type="text" id="" name="text-group">
    </div>
    <div class="col-lg-3">
      <label for="">Apple</label>
      <input type="text" id="" name="text-group">
    </div>
  </div>
</form>
<div class="step-dots">
  <div></div>
  <div></div>
  <div></div>
</div>

Alternative:

Vous pouvez également utiliser keup au lieu de blur. Le choix vous appartient et cela dépend de vos besoins.

1
Shree 20 juin 2019 à 06:17

Vous devez ajouter des points d'étape en tant que quantité de champs de saisie dans le formulaire.

$(document).ready(function() {

	// Loop through each Input field
	$('input[type="text"]').each(function(index, el) {

		// If Input field don't have ID, assign Input Index number as a ID of it's Step dot
		if ($(this).attr('id') == '') {
			$(this).attr('id', index);

			// Add step dots dynamically as amount of Input fields
			$(this).parents('form').siblings('.step-dots').append('<div data-target='+index+'></div>');
		}

		// If Input field have ID, assign Input ID as a ID of it's Step dot
		else{

			// Add step dots dynamically as amount of Input fields
			$(this).parents('form').siblings('.step-dots').append('<div data-target='+$(this).attr('id')+'></div>');
		}
	});

	// Check Input field value then change background color if any value in it
	$('input[type="text"]').on('keyup', function(event) {
		event.preventDefault();

		// If input field is not blank, step dot has background color 
		if ($(this).val() != '') {
			$('.step-dots').find('[data-target="'+$(this).attr('id')+'"]').css('background', 'red');
		}

		// If input field is blank, step dot hasn't background color
		else{
			$('.step-dots').find('[data-target="'+$(this).attr('id')+'"]').removeAttr('style');
		}
	});
});
.step-dots div {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 100%;
	background: #d9d9d9;
	margin-left: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
	<div class="row">
		<div class="col-lg-3">
			<label for="">Apple</label>
			<input type="text" id="" name="text-group" checked>
		</div>
		<div class="col-lg-3">
			<label for="">Apple</label>
			<input type="text" id="" name="text-group">
		</div>
		<div class="col-lg-3">
			<label for="">Apple</label>
			<input type="text" id="" name="text-group">
		</div>
		<div class="col-lg-3">
			<label for="">Apple</label>
			<input type="text" id="" name="text-group">
		</div>
	</div>
</form>
<div class="step-dots">
</div>
1
Asfan Shaikh 20 juin 2019 à 05:20
function checkFilled() {
	var inputVal = document.getElementById("textinput");
    if (inputVal.value == "") {
        inputVal.style.backgroundColor = "red";
    }
    else{
        inputVal.style.backgroundColor = "";
    }
}
 
checkFilled();
.step-dots div {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: #d9d9d9;
    margin-left: 6px;
}
<form action="">
        <div class="row">
            <div class="col-lg-3">
                <label for="">Apple</label>
                <input type="text" id="textinput" name="text-group" onchange="checkFilled();">
            </div>
         </div>
</form>
<div class="step-dots">
        <div></div>
        <div></div>
        <div></div>
</div>
0
Akshay Mulgavkar 20 juin 2019 à 04:14