Form no longer renders when repeater field is added

Hey aaelghat! First, can you try removing the conditional logic from the date field for me?

Thanks!

That did it! Thank you. OK, next question… As I mentioned, the form uses the gf_inline tags. In order to force a new line prior to using the repeater, I inserted a blank html field.

With that blank html field, the “+” button has no effect. Can you think of a fix, or an alternate way (other than using the html field) to force a new line after the third inline field?

Many thanks for your fast support.

The issue might have been a caching issue. Everything looks good now…

One other question… You’ll see that the form has a calculated number field of “Total Miles”. How do I total up the individual “Miles” fields in the “Total Miles” field? Thanks in advance.

I’m glad that all started working for you!

To tally up the total miles, I’d recommend updating your version of the plugin to the latest development version (find out how here: https://github.com/kodie/gravityforms-repeater#development) and then this code should do it for you:

jQuery('#gform_37').on('gform_repeater_init_done gform_repeater_after_repeat gform_repeater_after_unrepeat', function(event, repeaterId, repeatId){
	if (repeaterId == 1) {
		var totalMiles = 0;
		var milesFields = gfRepeater_select(37, 1, null, 3, 1);

		jQuery.each(milesFields, function(){
			if (this.val()) { totalMiles += Number(this.val()); }
		});

		jquery('#input_37_11').val(totalMiles);
	}
});

Thank you for the hard work to put that together! Dumb question… Where do I out the javascript code?

Thanks in advance.

No problem! It just needs to be put onto the page somehow. If your WordPress theme has a main javascript file you could put it in there, otherwise you could possibly put it between <script></script> tags in your theme’s footer.php file.

Hello Kodie!

Thank you for this plugin!!
I had the same problem with the conditional logic. Is there a way to bypass this problem? Because I need the conditional.

Thanks ??

Hey elisafern, Do you have any other Gravity Forms add-ons installed other than the repeater plugin? Also, I recently did some work on conditional logic on the latest development version release, I would try installing that to see if it fixes your problem. (find out how here: https://github.com/kodie/gravityforms-repeater#development)

Thanks!

Hi – this is the OP. Thanks again for the javascript code.

I implemented it, but it’s not summing up the miles. It looks like it’s being read because now the Reimbursement field (which is to the right of the Total field) is displaying the css class instead of the placeholder (which obviously isn’t correct). So it looks like the code is being interpreted, but not in the way intended?

Thanks.

Sorry about that, I didn’t really test my code before posting it on here, this one is tested and should work with your form as is:

var gf_miles_formId = 37;
var gf_miles_repeaterId = 1;
var gf_miles_childId_milesField = 3;
var gf_miles_totalMilesId = 11;
var gf_miles_totalPriceId = 12;
var gf_miles_pricePerMile = 8.25;

jQuery('#gform_' + gf_miles_formId).on('gform_repeater_init_done gform_repeater_after_repeat gform_repeater_after_unrepeat gform_repeater_update_price', function(event, repeaterId, repeatId){
	var milesFields = gfRepeater_select(gf_miles_formId, gf_miles_repeaterId, null, gf_miles_childId_milesField, '*');
	var totalMiles = 0;

	jQuery.each(milesFields, function(){
		if (jQuery(this).val()) { totalMiles += Number(jQuery(this).val()); }

		jQuery(this).on('propertychange change click keyup input paste', function(){
			jQuery(this).parents('form').trigger('gform_repeater_update_price');
		});
	});

	var totalPrice = '$' + Number(totalMiles * gf_miles_pricePerMile);

	jQuery('#input_' + gf_miles_formId + '_' + gf_miles_totalMilesId).val(totalMiles);
	jQuery('#input_' + gf_miles_formId + '_' + gf_miles_totalPriceId).val(totalPrice);
});

Let me know if that works for you!

It’s much closer… I copied in the script and the only issue is that if I try it from a computer I get the message below when I enter the mileage for the second line… If I try it using Safari on an iPhone it is very laggy. Eventually the numbers get added together, but then the form reloads on the iPhone and it says “A problem occurred with this web page so it was reloaded”.

A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.

One thing I noticed in the script is that you are calculating total price. If you notice, it is very laggy clicking from one mileage field to another, and that’s what triggers the unresponsive message. If it helps, I can calculate the price by using the calculation option of the numeric field.

Unfortunately I don’t know javascript well enough to know why it slows down…

hmmm, try this:

var gf_miles_formId = 37;
var gf_miles_repeaterId = 1;
var gf_miles_childId_milesField = 3;
var gf_miles_totalMilesId = 11;
var gf_miles_totalPriceId = 12;
var gf_miles_pricePerMile = 8.25;

jQuery('#gform_' + gf_miles_formId).on('gform_repeater_init_done gform_repeater_after_repeat gform_repeater_after_unrepeat gform_repeater_update_price', function(event, repeaterId, repeatId){
	var milesFields = gfRepeater_select(gf_miles_formId, gf_miles_repeaterId, null, gf_miles_childId_milesField, '*');
	var totalMiles = 0;

	jQuery.each(milesFields, function(){
		if (jQuery(this).val()) { totalMiles += Number(jQuery(this).val()); }
	});

	var totalPrice = '$' + Number(totalMiles * gf_miles_pricePerMile);

	jQuery('#input_' + gf_miles_formId + '_' + gf_miles_totalMilesId).val(totalMiles);
	jQuery('#input_' + gf_miles_formId + '_' + gf_miles_totalPriceId).val(totalPrice);

	updateMilesTrigger(repeatId);
});

function updateMilesTrigger(repeatId) {
	var milesField = gfRepeater_select(gf_miles_formId, gf_miles_repeaterId, repeatId, gf_miles_childId_milesField, '*').first();

	jQuery(milesField).on('propertychange change click keyup input paste', function(){
			jQuery(this).parents('form').trigger('gform_repeater_update_price');
	});
}

Thanks for the revised code.

It is still very laggy and the page becomes unresponsive… https://goo.gl/0Nx34M

You may need to hard-refresh your browser or clear your cache because I tried your link and it seems to be working fine now.