[Resolved] Help modify simple JavaScript code to work with all fields in the form

[Author]

Posts

[ahmedA-7]

Tell us what you are trying to do?
I'am trying add animated Input Spinner With Pure JavaScript and CSS/CSS3

Is there any documentation that you are following?
hidden link

---------------------------------------------

I try this and it is working excellent but with only one field in the form, I need working with all fields in the from, I think I need simple modify in javascript to working with all fields in the form.

my code in the post form

<div class="row">

			<div class="form-group col-sm-4">
            <label>Test1</label> 
             <div class='ctrl'>
                <div class='ctrl__button ctrl__button--decrement'>&ndash;</div>
                <div class='ctrl__counter'>
                   [cred_field field='first' force_type='field' class='ctrl__counter-input ctrl__counter-num' output='bootstrap' value='0']
                 
                </div>
                <div class='ctrl__button ctrl__button--increment'>+</div>
                </div>
			</div>
           
             
			<div class="form-group col-sm-4">
            <label>Test2</label> 
             <div class='ctrl'>
                <div class='ctrl__button ctrl__button--decrement'>&ndash;</div>
                <div class='ctrl__counter'>
                   [cred_field field='second' force_type='field' class='ctrl__counter-input ctrl__counter-num' output='bootstrap' value='0']
                 
                </div>
                <div class='ctrl__button ctrl__button--increment'>+</div>
                </div>
			</div>
    
    </div>

----------------------------------

in the JS editor
------------------------------

(function() {
  'use strict';

  function ctrls()  {
    var _this = this;

    this.counter = 0;
    this.els = {
      decrement: document.querySelector('.ctrl__button--decrement'),
      counter: {
        container: document.querySelector('.ctrl__counter'),
        num: document.querySelector('.ctrl__counter-num'),
        input: document.querySelector('.ctrl__counter-input')
      },
      increment: document.querySelector('.ctrl__button--increment')
    };
	
    this.decrement = function() {
      var counter = _this.getCounter();
      var nextCounter = (_this.counter > 0) ? --counter : counter;
      _this.setCounter(nextCounter);
    };

    this.increment = function() {
      var counter = _this.getCounter();
      var nextCounter = (counter < 9999999999) ? ++counter : counter;
      _this.setCounter(nextCounter);
    };

    this.getCounter = function() {
      return _this.counter;
    };

    this.setCounter = function(nextCounter) {
      _this.counter = nextCounter;
    };

    this.debounce = function(callback) {
      setTimeout(callback, 100);
    };

    this.render = function(hideClassName, visibleClassName) {
      _this.els.counter.num.classList.add(hideClassName);

      setTimeout(function() {
        _this.els.counter.num.innerText = _this.getCounter();
        _this.els.counter.input.value = _this.getCounter();
        _this.els.counter.num.classList.add(visibleClassName);
      }, 100);

      setTimeout(function() {
        _this.els.counter.num.classList.remove(hideClassName);
        _this.els.counter.num.classList.remove(visibleClassName);
      }, 200);
    };

    this.ready = function() {
      _this.els.decrement.addEventListener('click', function() {
        _this.debounce(function() {
          _this.decrement();
          _this.render('is-decrement-hide', 'is-decrement-visible');
        });
      });

      _this.els.increment.addEventListener('click', function() {
        _this.debounce(function() {
          _this.increment();
          _this.render('is-increment-hide', 'is-increment-visible');
        });
      });

      _this.els.counter.input.addEventListener('input', function(e) {
        var parseValue = parseInt(e.target.value);
        if (!isNaN(parseValue) && parseValue >= 0) {
          _this.setCounter(parseValue);
          _this.render();
        }
      });

      _this.els.counter.input.addEventListener('focus', function(e) {
        _this.els.counter.container.classList.add('is-input');
      });

      _this.els.counter.input.addEventListener('blur', function(e) {
        _this.els.counter.container.classList.remove('is-input');
        _this.render();
      });
    };
  };

  // init
  var controls = new ctrls();
  document.addEventListener('DOMContentLoaded', controls.ready);
})();

and of course I put all necessary style in the CSS editor. as in doc. link above

[Christian Cox]

This code is only written to support one input on the page. It is not written in a way that can track more than one counter (_this.counter is only one number), or add more than one event listener to more than one increment button, change CSS classes on different inputs, and so on. This needs a major refactor to work with more than one input field, and to track which input field is mapped to which counter and click handler and so on...far outside the scope of support we offer here in the forums. This is completely custom code that has nothing to do with Toolset, unfortunately, and our support policy dictates that this code is the responsibility of the client. Thanks for understanding.

[ahmedA-7]

My issue is resolved now. Thank you!