Issue with jQuery and Gravity form

Having a little trouble with some jQuery & Gravity Forms.

I added some Jquery to it to add a plus and minus button to increase and decrease the value in a number field but when I submit the form it just resets the form and the problem seems to lie within that script for the number functionality.

jQuery(document).ready(function($){
$(".ginput_container_number").append('<div class="inc button">+</div><div class="dec button">-</div>');
$(".button").on("click",function(){
var $button=$(this);
var oldValue=$button.parent().find("input").val();
if($button.text()=="+"){
var newVal=parseFloat(oldValue)+1;

} else {
if(oldValue>0){
var newVal=parseFloat(oldValue)-1;
} else {
newVal=0;
}
}
$button.parent().find("input").val(newVal);
});
});

You can find the form here:

https://john++++++++hl.com/track/

and the script is at http://na++++++idel.com/john++++++++hl.com/wp-content/themes/sc-platform/js/custom.js

  • Adam Czajczyk
    • Support Gorilla

    Hi Nick

    I hope you’re fine today!

    The code that you’re using is executed on “click” on an element with a “.button” class but that’s quite a “generic” class that’s also assigned to e.g. “next” and “end the game” (submit) buttons. So it’s executed for this buttons as well.

    Then there’s the “if… else…” condition which first checks if the text of the button is “+” and if so increases the value of input but then it decreases value or sets it to 0 if the text is…. anything else than “+”. In other words – the code applies “increase value by one” only if the “+” button is clicked but it applies “decrease value by one or set it to 0” if any other button on the form is clicked.

    Furthermore, in case of submit button it can’t find any “input in parent” so it applies it to “itself”.

    The simplest solution to this (even though it would be better to improve the “if… else…” condition there) would be to simply use more specific selector for “click” event.

    Since you’re injecting these +/- buttons with the same code, I made a small change to it and in the first line (the one that appends +/- buttons) I simply added additional CSS class to these two buttons “valbutton” (for “value button” – but you can change it to whatever you want as long as it’s not used for other elements of the form).

    Then I’ve adjusted the “click” line to listen for the click on “.valbutton” class instead of “.button” so it now binds only to these “+/-” buttons but no other.

    Can you check please if it’s fine now?

    Best regards,

    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.