val – devfrontend.info

[jQuery] Vérifier en cours de saisie en live si un input[type= »text »] contient du contenu avec l’événement Input et la méthode Val

24/04/2018 / admin

Dans l’exemple qui suit, on procède à cette vérification pour désactiver une fonctionnalité de Collapse (Bootstrap) des champs de formulaires si du texte est saisi.

    <div class="form-group address-extra-info-trigger">
        <span class="control-label">
            <spring:theme code="address.line2"/>
        </span>
        <button id="triggerBillingAddressExtraInfo" class="btn-naked" type="button" data-toggle="collapse" data-target="#collapseBillingAddressExtraInfo" aria-expanded="false" aria-controls="collapseBillingAddressExtraInfo">
            <span class="show-extra-fields">
                <i class="glyphicon glyphicon-chevron-down"></i> <spring:theme code="naos.show"/></span>
            <span class="hide-extra-fields">
                <i class="glyphicon glyphicon-chevron-up"></i> <spring:theme code="naos.hide"/></span>
        </button>
    </div>

    <div class="collapse address-extra-info-fields" id="collapseBillingAddressExtraInfo">
        <input type="text" id="one" />
        <input type="text" id="two" />
        <input type="text" id="three" />
        [...]
    </div>

<spring:theme code="address.line2"/>

</span>

</button>

</div>

[...]

</div>

Si un seul champ à vérifier:

Si le champ qui a le focus n’est pas vide, on agit sur #triggerBillingAddressExtraInfo en ajoutant un style inline pointer-events: none; (qui désactive la possibilité de cliquer sur l’élément).

    $('input').on('input', function(e){
        var toto = $(this).val();
        console.log(toto);

        if(!toto == ''){
            $('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');
        }
        else{
            $('#triggerBillingAddressExtraInfo').removeAttr('style');
        }
    });

$('input').on('input', function(e){

var toto = $(this).val();

console.log(toto);

if(!toto == ''){

$('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');

}

else{

$('#triggerBillingAddressExtraInfo').removeAttr('style');

}

});

Si plusieurs champs à vérifier:

Sources: jQuery check if any text input has value et Detect changed input text box.

On ajoute la condition: si tous les champs au sein de #collapseBillingAddressExtraInfo sont vides, on retire le style inline pointer-events: none;.

    function hasValue(elem) {
        return $(elem).filter(function() { return $(this).val(); }).length > 0;
    }

    $('input', '#collapseBillingAddressExtraInfo').on('input', function(e){
        var toto = $(this).val();
        var titi = hasValue('#collapseBillingAddressExtraInfo input');
        // console.log(toto);
        // console.log(titi);

        if(!toto == ''){
            $('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');
        }
        else if(!titi == true) {
            $('#triggerBillingAddressExtraInfo').removeAttr('style');
        }
    });

function hasValue(elem) {

return $(elem).filter(function() { return $(this).val(); }).length > 0;

}

$('input', '#collapseBillingAddressExtraInfo').on('input', function(e){

var toto = $(this).val();

var titi = hasValue('#collapseBillingAddressExtraInfo input');

// console.log(toto);

// console.log(titi);

if(!toto == ''){

$('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');

}

else if(!titi == true) {

$('#triggerBillingAddressExtraInfo').removeAttr('style');

}

});

Mieux, avec deux fonctions

    function hasValue(elem) {
        return $(elem).filter(function() { return $(this).val(); }).length > 0;
    }

    function deactivateCollapse(collapseElement, triggerElement){
        $('input', collapseElement).on('input', function(e){
            var focusedInputValue = $(this).val();
            var inScopeInputsValues = hasValue(collapseElement+' input');

            if(!focusedInputValue == ''){
                $(triggerElement).css('pointer-events', 'none');
            }
            else if(!inScopeInputsValues == true) {
                $(triggerElement).removeAttr('style');
            }
        });
    }

    deactivateCollapse('#collapseBillingAddressExtraInfo', '#triggerBillingAddressExtraInfo');
    deactivateCollapse('#collapseDeliveryAddressExtraInfo', '#triggerDeliveryAddressExtraInfo');

function hasValue(elem) {

return $(elem).filter(function() { return $(this).val(); }).length > 0;

}

function deactivateCollapse(collapseElement, triggerElement){

$('input', collapseElement).on('input', function(e){

var focusedInputValue = $(this).val();

var inScopeInputsValues = hasValue(collapseElement+' input');

if(!focusedInputValue == ''){

$(triggerElement).css('pointer-events', 'none');

}

else if(!inScopeInputsValues == true) {

$(triggerElement).removeAttr('style');

}

});

}

deactivateCollapse('#collapseBillingAddressExtraInfo', '#triggerBillingAddressExtraInfo');

deactivateCollapse('#collapseDeliveryAddressExtraInfo', '#triggerDeliveryAddressExtraInfo');

[javaScript] Désactiver un bouton d’action si le champ input associé affiche une valeur inférieure ou égale à zéro

11/12/2017 / admin

Solution 1:

Vérifier que le contenu à changé avec l’événement input (source: Can jQuery check whether input content has changed?).

$('.input-group-field').on('input', function() {
  var selectElem = $(this);
  var inputValue = parseInt(selectElem.val());
  
  if(!inputValue || inputValue < 0) {
    selectElem
      .next('.js-trigger-add-to-cart')
      .attr('disabled', 'disabled');
  }
  else {
    selectElem
      .next('.js-trigger-add-to-cart')
      .removeAttr('disabled');
  }
});

$('.input-group-field').on('input', function() {

var selectElem = $(this);

var inputValue = parseInt(selectElem.val());

if(!inputValue || inputValue < 0) {

selectElem

.next('.js-trigger-add-to-cart')

.attr('disabled', 'disabled');

}

else {

selectElem

.next('.js-trigger-add-to-cart')

.removeAttr('disabled');

}

});

Où (optimisé)

$('.input-group-field').on('input', function() {
  var selectElem = $(this);
  var inputValue = parseInt(selectElem.val());
  var targetElems = selectElem
                      .closest('.input-group')
                      .find('input[type="hidden"], .js-trigger-add-to-cart');
  
  if(!inputValue || inputValue < 0) {
    targetElems
      .attr('disabled', 'disabled');
  }
  else {
    targetElems
      .removeAttr('disabled', 'disabled');
  }
});

$('.input-group-field').on('input', function() {

var selectElem = $(this);

var inputValue = parseInt(selectElem.val());

var targetElems = selectElem

.closest('.input-group')

.find('input[type="hidden"], .js-trigger-add-to-cart');

if(!inputValue || inputValue < 0) {

targetElems

.attr('disabled', 'disabled');

}

else {

targetElems

.removeAttr('disabled', 'disabled');

}

});

Solution 2:

avec les attributs onkeyup et disabled

<div class="input-group">
	<input type="hidden" name="solrsearchParam[selected_product][${id}]" id="productselect_${id}" value="${id}" disabled="disabled"/>
	<input tal:condition="canAdd" class="input-group-field" type="text" size="3" value="0" name="solrsearchParam[quantities][${id}]" id="product_${id}" onkeyup="
		var selectElem = document.getElementById('btn_productselect_${id}');
		var inputValue = parseInt(this.value);
		if(!inputValue || inputValue < 0)
			selectElem.setAttribute('disabled', 'disabled');
		else
			selectElem.removeAttribute('disabled');"/>
	<button id="btn_productselect_${id}" class="button js-trigger-add-to-cart" type="button" disabled="disabled">
		<i class="iconfont iconfont-shopping_cart"></i>
		<span class="show-for-sr">${trans:m.catalog.frontoffice.add-to-cart,ucf}</span>
	</button>
</div>

<input tal:condition="canAdd" class="input-group-field" type="text" size="3" value="0" name="solrsearchParam[quantities][${id}]" id="product_${id}" onkeyup="

var selectElem = document.getElementById('btn_productselect_${id}');

var inputValue = parseInt(this.value);

if(!inputValue || inputValue < 0)

selectElem.setAttribute('disabled', 'disabled');

else

selectElem.removeAttribute('disabled');"/>

<span class="show-for-sr">${trans:m.catalog.frontoffice.add-to-cart,ucf}</span>

</button>

</div>

[jQuery] Retourner un tableau de valeurs avec la méthode Val et trouver la plus haute avec Math.max.apply

04/09/2016 / admin

  var listWidth = $.map($('ul.list-select a.list-select-item'), function(val){
		return $(val).width();
  });
  var biggest = Math.max.apply(null, listWidth);
  $('ul.list-select').width(biggest);

var listWidth = $.map($('ul.list-select a.list-select-item'), function(val){

return $(val).width();

});

var biggest = Math.max.apply(null, listWidth);

$('ul.list-select').width(biggest);

Articles récents

Catégories

Archives

Méta

Étiquette : val

[jQuery] Vérifier en cours de saisie en live si un input[type= »text »] contient du contenu avec l’événement Input et la méthode Val

Si un seul champ à vérifier:

Si plusieurs champs à vérifier:

Mieux, avec deux fonctions

[javaScript] Désactiver un bouton d’action si le champ input associé affiche une valeur inférieure ou égale à zéro

Solution 1:

Solution 2:

[jQuery] Retourner un tableau de valeurs avec la méthode Val et trouver la plus haute avec Math.max.apply