Question 165216 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can Javascript be used to add an input spinner to a WordPress input number?

my friends, I used a gravity form builder on my site.

For the input number field, I need to be able to increase or decrease the number with the + and – button.

As far as I know, two buttons can be added via JavaScript and given css.

Please help me with what JavaScript code can I do this?

enter image description here

The structure of the Gravity Form plugin field is as follows:

<div id="field_1_6" class="gfield gfield--width-full gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible">
    <label class="gfield_label" for="input_1_6">
        Number of People
        <span class="gfield_required">
            <span class="gfield_required gfield_required_asterisk">
                *
            </span>
        </span>
    </label>
    <div class="ginput_container ginput_container_number">
        <input name="input_6" id="input_1_6" type="number" step="any" value="" class="large" aria-required="true" aria-invalid="false">
    </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to solve this problem with JavaScript, I put the code here if anyone can encounter this problem can use it.

    This code has no style, you can css it according to your taste

    jQuery('<div class="quantity-button quantity-up"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.93585 6.41509H15.0642V9.0566H8.93585V16H6.1283V9.0566H0V6.41509H6.1283V0H8.93585V6.41509Z" fill="#909090"/></svg></div><div class="quantity-button quantity-down"><svg width="13" height="2" viewBox="0 0 13 2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.4238 1.80838H0.423828V0H12.4238V1.80838Z" fill="#909090"/></svg></div>').insertAfter('.quantity input');
jQuery('.ginput_container_number').each(function() {
  var spinner = jQuery(this),
    input = spinner.find('input[type="number"]'),
    btnUp = spinner.find('.quantity-up'),
    btnDown = spinner.find('.quantity-down'),
    min = input.attr('min'),
    max = input.attr('max');

  btnUp.click(function() {
    var oldValue = parseFloat(input.val());
    if (oldValue >= max) {
      var newVal = oldValue;
    } else {
      var newVal = oldValue + 1;
    }
    spinner.find("input").val(newVal);
    spinner.find("input").trigger("change");
  });

  btnDown.click(function() {
    var oldValue = parseFloat(input.val());
    if (oldValue <= min) {
      var newVal = oldValue;
    } else {
      var newVal = oldValue - 1;
    }
    spinner.find("input").val(newVal);
    spinner.find("input").trigger("change");
  });
});

  2. 0 
    var score = 0
 function up(){
  score ++;
  document.getElementById("result").innerHTML = score;
}


function down(){
  if(score > 0 ){
    score --;
  }
  document.getElementById("result").innerHTML = score;
}   

<div>
  <button onclick="up()"> + </button>
  <p id="result"></p>
  <button onclick="down()"> - </button>  
<div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search