PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Multi page form won't submit to next page possible problem with hidden field or

  1. I have a form where a user fills out words in a text input field and clicks an "add" button that takes the word(s) they typed and puts them in an empty div as list items. (see screenshot here: http://d.pr/i/BLYp ). The entered word is also put into a hidden field as " • word" to be spit out as a bulleted list on the next page (the "review" page). When the Add button is clicked it does these two things and also clears the input area to be ready for another word.

    Here's the problem:

    If I have words entered (just like in the screenshot) and click my "next" button, the form page refreshes with "#gf_2" appended to the URL but the form stays on the same page. My hidden field still holds all the words I added, my div does not (all other form fields remain as filled out before hitting next"). If I hit "next" again without changing anything the form moves on as expected. If I add another word with the add button and hit "next" the form refreshes again but still doesn't move to the next page. My div and input fields are HTML Blocks with the input and div written in there. The hidden field is a GF hidden field type.

    My jquery for adding and removing words is:

    //Add words to list (and hidden field) when Add button is clicked
    	$('#add_word').click(function() {
    		var word = $('#word_entry').val();  //The word(s) in the input box
    		$('#word_entry').val('');  //Clear the input box
    		$('div.word_list').html(function( index, value) {
    			if(word != '')   //If they clicked "Add" but didn't type anything, ignore it
    				return value + ' <li class="listed_word">' + word + '</li>';  //Turn the word into a list item and add it to the others
    		});
    		$('input.gform_hidden').val(function( index, value) {
    			if(word != '')   //If they clicked "Add" but didn't type anything, ignore it
    				return value + ' $bull; ' + word;
    		});
    		$('#word_entry').focus();
    	});
    
    	//Remove words from list (and hidden field) when clicked
    	$('.word_list').on("click", "li", function(e) {
    		var word = $(this).html();
    		$(this).remove();
    		$('input.gform_hidden').val(function(index, val) {
    			removed = val.replace(' &bull; ' + word, '').trim();
    			return removed;
    		});
    
    	});

    It seems like it doesn't like there being extra html added in my div, that seems to be the only common factor when it doesn't submit properly. Any ideas? The form is on a site that is not live yet, hidden behind a "coming soon" plugin. If you'll need to see it I'll need to be able to send a login to someone.

    Posted 9 years ago on Tuesday July 24, 2012 | Permalink
  2. We're going to need to see the form online to see what the problem is. Chances are it's a jQuery or JavaScript error causing trouble. Please send the login to get around the 'coming soon' page to chris@rockegenius.com and I will take a look for you.

    Posted 9 years ago on Tuesday July 24, 2012 | Permalink
  3. Login information sent. It's on the page http://clearmint.rumspeed.com/personal/custom-typographic-artwork/

    I'm also having a hard time getting the price total to update dynamically. I'm filtering a script in with the gform_pre_render filter but I think my problem is that gform_product_total isn't being called because I'm not using actual product fields. I havent' finished scouring the forums for the way to have this called on click or change though. Thanks!

    Posted 9 years ago on Tuesday July 24, 2012 | Permalink
  4. I think I've got the pricing thing figured out. Although it doesn't seem to be working consistently. I think I *need* a product field to have a "total" field work and be able to process payment through a gateway, but I'm having trouble getting the right value passed into a product.

    Also my conditional logic started getting screwy. In the admin side when I set conditional logic and to "Show if [field] is [value1]" after updating the form it is always changing itself to "Show if [field] is [value2]" and on the front end it's not working the way it's supposed to or as the rogue settings dictate. Sometimes I've seen GF get a little "funny" after I've been doing a lot of adjusting and readjusting of a form, or if it's a really long form. Like the JS sort of starts losing track of things. This may have been caused by outside things in the past, but if not maybe this is just GF getting quirky because I keep meddling with the form.

    Posted 9 years ago on Wednesday July 25, 2012 | Permalink
  5. Any update on this? Even if that update is "no idea"

    Posted 9 years ago on Friday July 27, 2012 | Permalink
  6. Hi JnJ. I have your email and will take a look at this Sunday/Monday. Thanks for your patience.

    Posted 9 years ago on Sunday July 29, 2012 | Permalink
  7. just wanted to bump this since I think you meant this past sunday/monday and not this coming. i know what busy is like, i'm not upset. client is waiting to launch their app and this is the major issue holding it up. thanks.

    Posted 9 years ago on Thursday August 2, 2012 | Permalink
  8. Jarrod, I just emailed you. Sorry for the delay. --Chris

    Posted 9 years ago on Friday August 3, 2012 | Permalink
  9. @Jarrod, I see a couple jQuery errors when I first load the page. Can you eliminate those, so we can eliminate the possibility that those are conflicting, and we can go from there:

    Timestamp: 8/5/12 9:45:53 PM
    Error: illegal character
    Source File: http://clearmint.rumspeed.com/personal/custom-typographic-artwork/
    Line: 912, Column: 1999
    Source Code:
    function stripeResponseHandler(status, response) {if (response.error) {var param = response.error.param;var form$ = jQuery('#gform_2');form$.append("<input type='hidden' name='create_token_error' value='" + message + "' />");} else {var form$ = jQuery('#gform_2');var token = response['id'];form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");}form$.get(0).submit();}jQuery(document).bind('gform_post_render', function(event, formId, currentPage) {jQuery('#gform_2').submit(function(){var last_page = jQuery('#gform_target_page_number_2').val();if ( last_page === '0' ){var form$ = jQuery('#gform_2');Stripe.setPublishableKey('pk_MTOkJGqQ8IQatAv8hGCvj0jQJbTMP');var card_number = jQuery('#gform_2 span.ginput_cardextras').prev().children(':input').val();var exp_month = jQuery('#gform_2 .ginput_card_expiration_month').val();var exp_year = jQuery('#gform_2 .ginput_card_expiration_year').val();var cvc = jQuery('#gform_2 .ginput_card_security_code').val();var cardholder_name = jQuery('#gform_2 #input_2_48_5').val();var address_line1 = jQuery('#gform_2 #input_2_27_1').val();var address_state = jQuery('#gform_2 #input_2_27_4').val();var address_zip = jQuery('#gform_2 #input_2_27_5').val();var address_country = jQuery('#gform_2 #input_2_27_6').val();var card_number_valid = Stripe.validateCardNumber(card_number);var exp_date_valid = Stripe.validateExpiry(exp_month, exp_year);var cvc_valid = Stripe.validateCVC(cvc);var cardholder_name_valid = (cardholder_name.length > 0 ) ? true : false;if ( !card_number_valid || !exp_date_valid || !cvc_valid || !cardholder_name_valid ) {form$.append("<input type='hidden' name='card_number_valid' value='" + card_number_valid + "' /><input type='hidden' name='exp_date_valid' value='" + exp_date_valid + "' /><input type='hidden' name='cvc_valid' value='" + cvc_valid + "' /><input type='hidden' name='cardholder_name_valid' value='" + cardholder_name_valid + "' />");} else if ( ( ! ( typeof address_line1 === 'undefined' ) ) && ( ( ! ( address_line1.length > 0 ) ) || ( ! ( address_zip.length > 0 ) ) || ( ( ! ( typeof address_state === 'undefined' ) ) && ( ! ( address_state.length > 0 ) ) ) || ( ( ! ( typeof address_country === 'undefined' ) ) && ( ! ( address_country.length > 0 ) ) ) ) ) { } else {var token = Stripe.createToken({number: card_number,exp_month: exp_month,exp_year: exp_year,cvc: cvc,name: cardholder_name,address_line1: ( ! ( typeof address_line1 === 'undefined' ) ) ? address_line1 : '',address_zip: ( ! ( typeof address_zip === 'undefined' ) ) ? address_zip : '',address_state: ( ! ( typeof address_state === 'undefined' ) ) ? address_state : '',address_country: ( ! ( typeof address_country === 'undefined' ) ) ? address_country : '',}, stripeResponseHandler);return false;}}});});
    Timestamp: 8/5/12 9:45:53 PM
    Error: downloadable font: download failed (font-family: "WebSymbolsRegular" style:normal weight:normal stretch:normal src index:1): status=2147746065
    source: http://clearmint.rumspeed.com/wp-content/themes/pixellin/fonts/websymbols-regular-webfont.woff
    Source File: http://clearmint.rumspeed.com/wp-content/themes/pixellin/style.css
    Line: 0
    Source Code:
    @font-face {   font-family: "WebSymbolsRegular";   font-style: normal;   font-weight: normal;   src: url("fonts/websymbols-regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/websymbols-regular-webfont.woff") format("woff"), url("fonts/websymbols-regular-webfont.ttf") format("truetype"), url("fonts/websymbols-regular-webfont.svg#WebSymbolsRegular") format("svg"); }

    Those two were on page load. The font one comes up again after form submission. I submitted a fake test which can be safely ignored and deleted.

    Let's start with getting rid of the jQuery errors and maybe we can find out something in the process. Thanks.

    Posted 9 years ago on Monday August 6, 2012 | Permalink
  10. Jarrod I emailed you about the [raw] shortcode, invalid HTML in your HTML blocks, and the "downloadable font" error.

    Thanks,
    Chris

    Posted 9 years ago on Wednesday August 8, 2012 | Permalink
  11. Jarrod, I just emailed you some more details and questions. Thanks for hanging in there.

    Posted 9 years ago on Friday August 17, 2012 | Permalink
  12. Just to sum things up from my end. The issue seemed to be with adding data into my hidden field via jquery, because when I didn't try to do that, things worked fine. I didn't find out how to fix it, but instead went with a textarea hidden by CSS to hold my data and that works. Thanks Chris for your assistance!

    Posted 9 years ago on Friday August 17, 2012 | Permalink