This definitely has been asked/answered before, I just don't really know how to formulate it, so couldnt find anything
I have two fields street_1 and street_2, the actions for both fields should be exactly the same, so I was wondering if I can somehow use the same functions for both fields, in a way that it would alternate between 1 and 2 depending which field is used.
For example:
$('street_1').on('input', function(e){
document.getElementById('count1').innerHTML = $('street_1').value.length+'/'+ max;
if ($('street_1').value.length>max) {
document.getElementById('count1').style.color = "red";
}
else document.getElementById('count1').style.color = "black";
});
All of the 1's should be changed to 2 if street_2 would be the field thats receiving the input.
HTML
<div class="fieldset">
<h2 class="legend"><?php echo $this->__('Address') ?></h2>
<ul class="form-list">
<?php $_streetValidationClass = $this->helper('customer/address')->getAttributeValidationClass('street'); ?>
<li class="wide">
<label for="street_1" class="required"><em>*</em><?php echo $this->__('Street Address') ?></label>
<div style="position: relative;" class="input-box">
<input style="color: transparent; caret-color: black; z-index: 1;" type="text" name="street[]" value="<?php echo $this->escapeHtml($this->getAddress()->getStreet(1)) ?>" title="<?php echo $this->__('Street Address') ?>" id="street_1" class="street
input-text
form-control
required-entry
<?php echo $_streetValidationClass ?>" />
<span id="street1span" class="input-text" style="display: inline-block; white-space: nowrap; overflow-x: hidden; width: 98%; position: absolute; top: 0.25px; left: 2px; padding: 1px; z-index: 2; pointer-events: none;" ></span>
<span id="count1" class="input-text" style="position: absolute; display: block; right: 5px; top: 2px; z-index: 9;"></span>
</div>
I have this exact same setup again, only with 2's so street_1, street2span and count2
street_1 and street_2 are ids for the inputs desired, so you have to use $ sign in order to do a jquery selector.
Also, I suggest you do not mix javascript with jquery. Use only one.
I used closest, find and eq in order to find the span element which belongs to desired input. You can do in the following way:
$('#street_1,#street_2').on('input', function(e){
let count=$(this).closest('div').find('span').eq(1);
count.text($(this).value.length+'/'+ max);
if ($(this).value.length>max) {
count.css('color','red');
}
else count.css('color','black');
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments