jump between pages « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

dez
Member
I have a multi-page form on my site and I have created icons for the different pages. I have also added functions that stores the data to database and recalls their answers when they come back to the form. Once they have completed the form once. I don't want them to have to click through every page to change an answer... What I am trying to accomplish is letting the user click the image and jump to that page.

I have designed the images/icons to work as a progress bar.. They are gray until they reach that page, then they are green. I have added these icons in a html block at the top of each page and have added the following code to them.
```
<input type="image" src="http://leafywallet.com/wp-content/uploads/2012/07/button_1.png" width="60" height="60" onclick="jQuery("#gform_target_page_number2_3").val('3'); jQuery("#gform_3").trigger("submit",[true]); ">
```
With the value changing for a particular page.. but, when they click on any of the images, it only goes to next page.

How would I do this?
Posted 11 years ago on Monday July 9, 2012 | Permalink
dez
Member

It would be great to get some insight into this.. My client is bugging me... lol

If someone needs to see exactly what I am talking about, here is the link.
btw, the website is http://leafywallet.com/calculate-your-c-q

but the site is a membership site and will require a quick sign up.

Posted 11 years ago on Monday July 9, 2012 | Permalink
David Peralty

Shouldn't it be #gform_target_page_number_3 vs #gform_target_page_number2_3? Just looking at the example that Alex gave you previously. I'm no JavaScript expert, and most of the support staff have left for the day.

Posted 11 years ago on Monday July 9, 2012 | Permalink
dez
Member

thats what I have... still doesnt work.. It only advances 1 page

Posted 11 years ago on Monday July 9, 2012 | Permalink

this was a typo

<input type="image" src="http://leafywallet.com/wp-content/uploads/2012/07/button_1.png" width="60" height="60" onclick="jQuery("#gform_target_page_number2_3").val('3'); jQuery("#gform_3").trigger("submit",[true]); ">

this is what I have

<input type="image" src="http://leafywallet.com/wp-content/uploads/2012/07/button_1.png" width="60" height="60" onclick="jQuery("#gform_target_page_number_3").val('3'); jQuery("#gform_3").trigger("submit",[true]); ">

Posted 11 years ago on Monday July 9, 2012 | Permalink

David Peralty

Instead of putting it on the actual image, can you do the following:

In your header.php file can you put code related to each click event using .click http://api.jquery.com/click/

You will also want to give a CSS class to each one. Then you can target each element and we can see what is going on. That's my best "not so good with JavaScript" suggestion on getting this working.

Posted 11 years ago on Monday July 9, 2012 | Permalink
dez
Member

im not quite sure I follow?

Posted 11 years ago on Monday July 9, 2012 | Permalink
David Peralty
Currently, you have an input with an onclick event on each one.

Can you instead change a few of them to test out the following:
```
$(".button_2").click(function() {
     jQuery("#gform_target_page_number_3").val('3');
     jQuery("#gform_3").trigger("submit",[true]);
});
```
In your header.php instead of using the onclick event. Making sure that each picturehas its own class.
Posted 11 years ago on Monday July 9, 2012 | Permalink
dez
Member

header.php of the site theme?

Posted 11 years ago on Monday July 9, 2012 | Permalink
David Peralty

That's correct.

Posted 11 years ago on Monday July 9, 2012 | Permalink
dez
Member

Im so lost. Why am I adding this to the header and where does it need to go?

Posted 11 years ago on Monday July 9, 2012 | Permalink
David Peralty

Sorry, I assumed because you were doing something so custom that you were really savvy in terms of development. It might be best to have you wait until one of the developers are around tomorrow morning to have them look at this and give some step by step instructions for you rather than attempting to apply my fix which might not even fix the issue you are having.

Posted 11 years ago on Monday July 9, 2012 | Permalink
dez
Member
this needs to go in the header?
```
$(".button_2").click(function() {
     jQuery("#gform_target_page_number_3").val('3');
     jQuery("#gform_3").trigger("submit",[true]);
});
```
I am really lost here.

Is there an example somewhere that shows how to do this?
Posted 11 years ago on Monday July 9, 2012 | Permalink
dez
Member

I have got everything else functioning the way I want it and I think gravity form is awesome. I am quite capable when it comes to writing functions and such.. Maybe it has just been a long day and nothing is really registering with me right now.

Will a developer be available in the morning?

Posted 11 years ago on Monday July 9, 2012 | Permalink
David Peralty

There will be multiple developers and multiple support staff. :) Let's work on it then, and I'll be sure that you get a solution that will work the first time.

Posted 11 years ago on Monday July 9, 2012 | Permalink
dez
Member

Sounds good... thank you for your help today.

Posted 11 years ago on Monday July 9, 2012 | Permalink
dez
Member

Hey guys.. Is there a developer that can help me this morning with the above mentioned help?

Posted 11 years ago on Tuesday July 10, 2012 | Permalink
dez
Member

Is there anyone available to help with this?

Posted 11 years ago on Tuesday July 10, 2012 | Permalink
David Peralty

I've e-mailed one of our developers who will jump on here as soon as she has a moment.

Posted 11 years ago on Tuesday July 10, 2012 | Permalink
dez
Member

thank you David.

Posted 11 years ago on Tuesday July 10, 2012 | Permalink
Dana Cobb
Administrator

Hi, dez,

I am seeing a problem when viewing the actual source of the page. The code you intend for the images isn't coming out correctly. Take a look at this image here of what the html source is: http://grab.by/eFLC . The html is all messed up so the onclick event doesn't even appear to be firing. It is probably an issue with the quotes when outputting the html; if using double-quotes to surround the text inside the onclick, use single-quotes around the name of the field when referencing it with jQuery. Oh, and make sure you are consistently using the word as "jQuery" with the uppercase Q.

Take a look and see if it works once you get the html spitting out correctly because setting the hidden field that holds the target page number is right.

Let us know how it goes.

Posted 11 years ago on Tuesday July 10, 2012 | Permalink
dez
Member

Your ROCK Dana!! That was the issue! "The quotes"!! Thank you so much!!!!

Gravity forms is awesome!

Posted 11 years ago on Tuesday July 10, 2012 | Permalink
Dana Cobb
Administrator

Sweet, glad you got it! I am closing this topic and the other related one out then. Enjoy!

Posted 11 years ago on Tuesday July 10, 2012 | Permalink

This topic has been resolved and has been closed to new replies.