How can I change option values without submitting the page?

Gravity Support Forums » Plugin Support » Gravity Forms

Rob Rasmussen
Member
Hello,

I can see others have asked this question but the replies were taken to private emails so I didn't see the solutions.

I am trying to build a leasing calculator and provide users the ability to input two values and select one of four desired lease terms (which will be calculated based on our rates and their entered values). The user has the ability to change the amounts and click calculate and without submitting, the form will recalculate and refresh with the new term lease amounts. Example below:

Input fields from User:
-Estimated Loan Amount: $50,000
-Estimated Monthly Profit: $5,000
```
[html]
Available Monthly Terms
24             36          48          60
$2,284	$1,590	$1,244	$1,038
to	           to	    to	    to
$2,401	$1,709	$1,366	$1,163
```
Several other values/fields based on the calculation will be returned as well but I just need to get this part going first.

I would appreciate any help. Right now we have this calculator working on our live website but it is split on three pages and dumping calculations to HTML fields and causing the user to have to go back two pages to re-enter their starting Loan and Profit amounts.

Thanks!
Posted 12 years ago on Wednesday September 26, 2012 | Permalink
Chris Hajer
Key Master

To perform calculations on the same page, you're going to have to use jQuery or JavaScript. Gravity Forms is not involved until the form is actually submitted.

Posted 12 years ago on Wednesday September 26, 2012 | Permalink
Rob Rasmussen
Member

Yes I realize that, my question is what is the proper way to do so with Gravity forms and php. Is there a certain function within Gravity Forms that should be used/called to execute? I keep coming across gform_pre_render and other functions that look like they will work but when I add my code to set the values for the fields and perform the calculations, it doesn't happen.

I am looking for a similar event to a .NET onchange(). I am a new to PHP, wordpress, and jQuery so please excuse my asking for assistance or for any examples.

Posted 12 years ago on Wednesday September 26, 2012 | Permalink
Chris Hajer
Key Master

There won't be any Gravity Forms-specific functions to call. There won't be any PHP since the server will not be doing any processing. It will all be jQuery added to the page, to take values entered in specific fields and perform your calculations on them. That calculated number will then be added to an existing field, and maybe that is what gets submitted with the form. It's not related to Gravity Forms or PHP at all: it will all be user functionality on the front end using JavaScript or the jQuery library.

jQuery has a whole bunch of event methods: http://api.jquery.com/category/events/

Posted 12 years ago on Wednesday September 26, 2012 | Permalink
Chris Hajer
Key Master

The only way you would use Gravity Forms functions and PHP would be if you are using multiple forms and passing the values between, or if you knew up front what the user input would be, so you could add the calculated value with the gform_pre_render filter.

Posted 12 years ago on Wednesday September 26, 2012 | Permalink
Rob Rasmussen
Member

So there is no way to keep everything on the same page then for the user experience? The user can change their value at any time and will need to be able to have the ability to calculate, which is somewhat like a submit but not complete the submission process until they are done and fill out their name and email etc.

I am trying a redirect to the same form right now on submit with query values holding the Loan and Profit amount re-populating the fields upon clicking Submit in order to treat Submitting as a calculation button rather than Submission. Have you seen this approach before? Am I headed in a good direction?

Posted 12 years ago on Wednesday September 26, 2012 | Permalink
Chris Hajer
Key Master

There is a way: it is with jQuery (JavaScript). It's not Gravity Forms functionality. The calculation is done on the client side, in the browser, with jQuery.

You could redirect to the same form somehow and pre-populate certain fields. You'd have to keep track of the status of the submission (if it's a calculation submission or a real submission.) You could make the real submit button conditional on something. Display the calculate button to fake a submission. I don't think this is a good approach and I am sure there are pitfalls involved.

I would go with a jQuery or JavaScript solution which is normally how that functionality is added to a web page without requiring a form submission to do the calculations.

Posted 12 years ago on Wednesday September 26, 2012 | Permalink
Rob Rasmussen
Member

Yes that is how I am doing it with JQuery. I just thought there would have been someone kind enough in here that might have done something similar to this before that could have provided some examples or guidance on this topic.

Thanks anyway.

Posted 12 years ago on Wednesday September 26, 2012 | Permalink
Chris Hajer
Key Master

I'll leave the topic open in case someone with experience wants to post the code here for you. I don't have any examples of that functionality to share with you currently.

Posted 12 years ago on Friday September 28, 2012 | Permalink