How to add and subtract input value with minimum and maximum attribute. Jquery

Question

I am creating a form where the user can add and subtract from the value of the input field in this case to display a number of children.

Naturally I can add and subtract from the number which displays on my screen, however the actual value stays the same at 0 when I check in console. It is important for me to be able to check this value so I can set a minimum and a maximum amount.

How do I make sure the value changes on click of my buttons?

JS:

childVal = $('#pageSearch-children').val();
minValueChild = $('#pageSearch-children').attr('min');
maxValueChild = $('#pageSearch-children').attr('max');

if (childVal < maxValueChild) {
    $('.add').click(function () {
        $('#pageSearch-children').val( function(i, oldval) {
            return ++oldval;
        });
        $('#pageSearch-children').val() + 1;
    });
}
if (childVal > minValueChild) {
    $('.sub').click(function () {
        $('#pageSearch-children').val( function(i, oldval) {
            return --oldval;
        });
        $('#pageSearch-children').val() - 1;
    });
}

HTML:

<h3 class="white black">
    <input class="backgroundNoneInput" type="number" value="0" id="pageSearch-children" name="children" min="0" max="{{ $property--property_sleeps or '99' }}"> 
</h3>
<button type="button" class="sub backgourndNoneButt">
    <span class="white fa fa-minus fa-2x faPlusMin" aria-hidden="true">                      
    </span>
</button>
<button type="button" class="add backgourndNoneButt">
    <span class="white fa fa-plus fa-2x faPlusMin" aria-hidden="true">                        
    </span>
</button>

your if statements need to be inside your "click" functions, not the other way round. Right now it only ever evalutes those if statements once, when the page is first created. And consequently only ever at most 1 of your button click handlers will ever be added. — ADyson
– ADyson, Commented Jul 19, 2018 at 14:10

Carsten Løvbo Andersen · Accepted Answer · 2018-07-19 14:11:32Z

3

I would surgest you change your code to the following in order to make it work better:

childVal = $('#pageSearch-children').val();
minValueChild = $('#pageSearch-children').attr('min');
maxValueChild = $('#pageSearch-children').attr('max');
$('.add').click(function() {
  if (childVal < maxValueChild) {
    $('#pageSearch-children').val(function(i, oldval) {
      return ++oldval;
    });
    childVal = $('#pageSearch-children').val();
  }
});
$('.sub').click(function() {
  if (childVal > minValueChild) {
    $('#pageSearch-children').val(function(i, oldval) {
      return --oldval;
    });
    childVal = $('#pageSearch-children').val();
  }
});

One of the problems is that your $('.sub').click would never run since it would never pass if (childVal > minValueChild) { in your originale code.

demo

childVal = $('#pageSearch-children').val();
minValueChild = $('#pageSearch-children').attr('min');
maxValueChild = $('#pageSearch-children').attr('max');
$('.add').click(function() {
  if (childVal < maxValueChild) {
    $('#pageSearch-children').val(function(i, oldval) {
      return ++oldval;
    });
    childVal = $('#pageSearch-children').val();
  }
});
$('.sub').click(function() {
  if (childVal > minValueChild) {
    $('#pageSearch-children').val(function(i, oldval) {
      return --oldval;
    });
    childVal = $('#pageSearch-children').val();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 class="white black">
  <input class="backgroundNoneInput" type="number" value="0" id="pageSearch-children" name="children" min="0" max="99" readonly> Children
</h3>
<button type="button" class="sub backgourndNoneButt">
    <span class="white fa fa-minus fa-2x faPlusMin" aria-hidden="true">   sub                   
    </span>
</button>
<button type="button" class="add backgourndNoneButt">
    <span class="white fa fa-plus fa-2x faPlusMin" aria-hidden="true">      add                  
    </span>
</button>

edited Jul 19, 2018 at 14:11

answered Jul 19, 2018 at 14:09

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Carsten Løvbo Andersen Over a year ago

@DicedMango No problem, happy to help

Diced Mango Over a year ago

I am trying to do the same thing but adding two fields together and if the both exceed the maximum amount the buttons are disabled.. I have added to fiddlejs.. if you could help i would be very grateful: jsfiddle.net/dghLm6f7/1

Collectives™ on Stack Overflow

How to add and subtract input value with minimum and maximum attribute. Jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related