Javascript/jQuery incrementer on ASP.Net textbox

Question

We are trying to use a Javascript incrementer and decrementer on an ASP.Net textbox to up the numerical value. The default textbox is set at 0.

We append 2 divs that fire Javascript to increment and decrement the value in the ASP.Net textbox. The values get changed BUT...

We are also having issue where the Javascript is supposedly supposed to prevent the value from going below 0. However, when we decrement below 0 the textbox goes blank and then when we try to increment, we get a NaN value. My plan is to just make the decrementing button disappear when the value gets to '0'. Any help is appreciated. Is it possible to use a Javascript/jQuery incrementer/decrementer on an ASP.Net textbox?

Any pointers on how to make the decrementer button to disappear when the value hit's '0' and reappear when the value is above '0'. PLUS if it is possible to use a Javascript incrementing/decrementing on an ASP.Net textbox.

Thanks in advance.

Here is my Javascript below:

  if (Modernizr.mq("screen and (max-width:767px)")) {
        if ($('.product-variant-list td span.quantity input.numerictextboxtext:not([disabled])')) {
            $('input.numerictextboxtext:not([disabled])').parent().append('<div class="incButton button">+</div><div class="decButton button">-</div>');
        }

        if ($('input.numerictextboxtext').val() == 0) {
            $(".decButton").hide();
        }
        if ($('input.numerictextboxtext').val() >= 1) {
            $(".decButton").show();
        }

        $(".button").click(function () {
            var $button = $(this);
            var oldValue = $button.parent().find("input.numerictextboxtext").val();

            //TODO: See if you can show and hide button on based on value of textbox
            if(oldValue == 0){
                $(".decButton").hide();
            }
            if (oldValue >= 1) {
                $(".decButton").show();
            }

            if ($button.text() == "+") {
                var newVal = parseFloat(oldValue) + 1;

            } else {
                // Don't allow decrementing below zero - supposedly. But this does not work in our case
                if (oldValue >= 1) {
                    var newVal = parseFloat(oldValue) - 1;
                }
            }
            $button.parent().find("input.numerictextboxtext").val(newVal);
        });//End button click
    }//End Modernizr check

Ann L. · Accepted Answer · 2013-03-29 18:42:26Z

1

I think one of your problems may be in here. I've changed the formatting a litle to make it clearer where I think the problem is.

if ($button.text() == "+") {
   var newVal = parseFloat(oldValue) + 1;
} else {
   // Don't allow decrementing below zero - supposedly. But this does not work in our case
   if (oldValue >= 1) {
     var newVal = parseFloat(oldValue) - 1;
   }
}
$button.parent().find("input.numerictextboxtext").val(newVal);

newVal is declared within the if clause and the else clause. But then you use it in an expression that is outside either of those clauses. So newVal at the time you use it with the val() function is not defined.

Try declaring it up where you define oldVal.

   $(".button").click(function () {
        var $button = $(this);
        var oldValue = $button.parent().find("input.numerictextboxtext").val();
        var newValue = oldValue; // Declaring the variable here gives it 
                                 // the same scope as oldValue.  Giving it 
                                 // oldValue as a default value means that it
                                 // will have a value even if not assigned to again.

        //TODO: See if you can show and hide button on based on value of textbox
        if(oldValue == 0){
            $(".decButton").hide();
        }
        if (oldValue >= 1) {
            $(".decButton").show();
        }

        if ($button.text() == "+") {
            newVal = parseFloat(oldValue) + 1;
        } else {
            // Don't allow decrementing below zero
            if (oldValue >= 1) {
                newVal = parseFloat(oldValue) - 1;
            }
        }
        $button.parent().find("input.numerictextboxtext").val(newVal);
    });//End button click

edited Mar 29, 2013 at 18:42

answered Mar 29, 2013 at 18:30

Ann L.

14k5 gold badges39 silver badges67 bronze badges

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

4 Comments

ClosDesign Over a year ago

Can you give an example of this? I am not clear on what you are trying to say. If I take it out of the if/else than I can not target the value if the old value is >= 1.

ClosDesign Over a year ago

What was changed in your most recent edit? The edits made did not seem to hide the .decButton. The .decButton was still showing when the value in the textbox hit '0' . Not sure why.

ClosDesign Over a year ago

There should be an edit where var newValue = oldValue, it should be newVal = oldValue; I just saw that. That fixed the issue with the number disappearing if going below '0'. Now I just need to hide the '.decButton' if the value hits 0. and shows if above 1

ClosDesign Over a year ago

I figured it out. Thanks for the tips, it got me on my way to solving it. I will post my solution.

ClosDesign · Accepted Answer · 2013-03-29 22:01:24Z

Answer to our question is here. I hope this helps others.

     if (Modernizr.mq("screen and (max-width:767px)")) {
        if ($('.product-variant-list td span.quantity input.numerictextboxtext:not([disabled])')) {
            $('input.numerictextboxtext:not([disabled])').parent().append('<div class="incButton button">+</div><div class="decButton button">-</div>');
        }
        if ($('input.numerictextboxtext').val() == 0) {
            $(".decButton").hide();
        }
        $(".button").click(function () {
            var $button = $(this);
            var oldValue = $button.parent().find("input.numerictextboxtext").val();
            var newVal = oldValue;
            //Hide .decButton for oldValue
            if (newVal == 0 || oldValue == 0) {$button.parent().find(".decButton").hide(); oldValue = 0}
            else {$button.parent().find(".decButton").show();}
            if ($button.text() == "+") { var newVal = parseFloat(oldValue) + 1;} else {
                // Don't allow decrementing below zero
                if (oldValue >= 1) {var newVal = parseFloat(oldValue) - 1;}
            }
            //Hide .decButton for newVal
            if (newVal == 0) {$button.parent().find(".decButton").hide();}
            else {$button.parent().find(".decButton").show();}
            $button.parent().find("input.numerictextboxtext").val(newVal);
        });//End button click
    }//End Modernizr check

Collectives™ on Stack Overflow

Javascript/jQuery incrementer on ASP.Net textbox

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related