Set Number of List Field Rows by Field Value
Increase or decrease the number of rows in a List field by the value of another field. Ordering three tickets? Show three list field rows for ticket information.
December 11, 2023: Fixed compatibility issue with Gravity Forms 2.8.
June 21, 2021: Fixed an issue where List field icons were not hidden.
June 3, 2021: Updated snippet documentation to reflect GF 2.5 changes and fixed an issue where rows were not counted correctly.
March 31, 2021: Migrated snippet to the Snippet Library.
July 27, 2020: Fixed issue where script could be run before jQuery was loaded.
April 25, 2020: Added compatibility for the GravityView Edit Entry screen.
August 22, 2019: Fixed intermittent issue where loading script in Gravity Forms Gutenberg block caused Parent Selector to disappear.
October 5, 2013: Updated snippet to use a class format for easier instantiation which also adds support for applying to multiple forms and multiple fields on the same form.
January 26, 2013: Updated to better select the current list field table rows.
Stop! There's a better way.
This snippet is available as a plugin with Gravity Perks, a suite of over 47 premium Gravity Forms plugins!
Found this interesting question on the Gravity Forms forum:
I’m selling tickets. So each ticket needs to be associated with a name/email/etc…
Basically, the user needs a way to gather a set of data per ordered product/ticket. My first instinct was to simply recommend using the List field. The user could specify the number of tickets and then add/remove however many rows they need.
I kept thinking on it and realized it would be really nice if the number of List field rows increased/decreased automatically based on the number of selected tickets. Here’s a snippet to do just that!
How do I install this snippet?
Just copy and paste the snippet above into your theme’s functions.php file.
Do I need to modify this snippet to work with my form?
You just need to create your own instance of the GWAutoListFieldRows class. You’ll find two examples at the bottom of the snippet. Comment them out and then add your own! All you need to set is the $form_id, the $list_field_id, and the HTML id of your input as the $input_html_id property.
Looking to make all the rows required? Just use our Require All Columns of List Field Snippet and you should be all set!
By removing the +/- button at the end of the list row(s), flex resizes the input boxes to fill the entire width. But the labels stay in their original spot and end up hanging off the left side of the input. It looks terrible. I have screenshots I can email to you.
https://chordsmen.org/2022-spring-show-back-in-business/#tickets
The Name/Email list is linked to the ticket Quantity field. The Email label is misaligned.
This is at the end of the column label row and needs to be deleted to align the labels and inputs.
I didn’t see a Reply link so I entered a new “Reply” (yes, I was mislead by the name of your Comment form).
I tried to paste HTM – div element – but when I submitted the comment, it wasn’t there. So I’m putting it in double quotes and hoping that makes a difference.
This is at the end of the column label row and needs to be deleted to align the labels and inputs. “
“
This is inside its own div. class=”gfield_header_item gfield_header_item–icons”>
div class=”gfield_header_item gfield_header_item–icons”>& nbsp; /div
I take it you can’t post HTML in these comments? I’m trying to trick it.
Hi John,
As you may have seen on the documentation, there is a better way to get this functionality in our GP Auto List Field Perk. Snippet support is also only available to active Gravity Perks license holders and even with that instead of using this snippet, we would recommend using our GP Auto List Field Perk.
Best,
I fixed it. $(“#field_{0}_{1} .gfield_header_item–icons”.format(this.formId, this.listFieldId)).css(‘display’, ‘none’);
Thanks for sharing John!
But Samuel, you still provide the fee snippets, for which I am grateful. And this is a bug. Don’t you want to fix bugs in both the free and paid versions?
It’s not “support”. I’m helping you out by reporting a bug. I would hope you’d fix a bug in anything you produce for the public.
Hi, This snippet was working great for us until the GF update to 2.5 and then suddenly it stopped working.
Luckily for me (since I’m not a programmer), it looks like it was a simple fix. GF changed the ID for the quantity field so instead of using:
‘input_html_id’ => ‘#ginput_quantity_240_5’
The ID name is now:
‘input_html_id’ => ‘#input_240_5_1’
Hopefully this helps someone else. Please let me know if there’s anything else that need to change to keep this snippet working with the new version of GF!
Hi Jennifer,
Thanks for bringing this to our attention. I am forwarding this to our developers to work on a fix. I will update my reply when the issue has been resolved.
Best,
Hi guys, this looks like a great solution to something I’ve been asked to achieve on a company website. We’re a logistics company looking to create a booking form using GF and we wanted a way for the customer to select a number of pallets to be collected and then for the rows below this to ‘open up’ based on the value selected ie 5 pallets would open up 5 rows to be filled in.
Is there a way to append a text field before the first input field on a row and then have that text field increase in value as the form becomes longer? Probably not explaining this very well!
ie someone wants 5 pallets collected, 5 rows are ‘created’ below with each pallet number listed as a pre-filled text field followed by the input fields for that row:
PLT1 ‘Input Field 1’ ‘Input Field 2’ ‘Input Field 3’ ‘Input Field 4’
PLT2 ‘Input Field 1’ ‘Input Field 2’ ‘Input Field 3’ ‘Input Field 4’
PLT3 ‘Input Field 1’ ‘Input Field 2’ ‘Input Field 3’ ‘Input Field 4’
PLT4 ‘Input Field 1’ ‘Input Field 2’ ‘Input Field 3’ ‘Input Field 4’
PLT5 ‘Input Field 1’ ‘Input Field 2’ ‘Input Field 3’ ‘Input Field 4’
Thanks for your time Si
Hi Si,
I am not really tracking your question very well, but if what you’re trying to do, is to number the list field, then we have tutorial documentation and a snippet that you can use to do that here: https://gravitywiz.com/numbering-gravity-forms-list-field-rows/
Best,
hi thank you for you good snippet how can I find $list_field_id and $input_html_id and what are they? thanks
Hello Zoheir, To make this snippet work, all you need to set is the $form_id, the $list_field_id, and the HTML id of your input as the $input_html_id property. These will be within your personal form. So you forms ID will be the form_id. The field id that contains the list will be the list_field_id and the HTML Field ID on your form will be marked as the input_html_id_property;. Hopefully that clears things up.
I have created a woo-commerce frontend product submission form by gravity form plugin. When I uploaded everything is working fine except product gallery images not showing on the product page. I have used _product_image_gallery filed to upload the product images and uploading without any error but not showing on the product page can anyone help me to sort out this advance thanks.
Hi Rajab,
To successfully upload images to the WooCommerce Product Gallery, you’ll need to enable our GP Media Library Perk on the File Upload Field. This way, all images uploaded via the GF file Upload field are also uploaded into WordPress Media Library, making it possible for it to display on the product page.
Best,
Hi there, Is there any way to add the product field in these list fields? So that it can be repeated.
Hi Sarmad,
We don’t have an exact solution to add a product field into List fields, but a workaround would be to use the Nested Forms to handle this. Basically, you’d create a child form that includes your Drop Down Product field in it, and users can add as many entries to that child form. You may want to check out our documentation on Nested Form and how it works.
Best,
Unfortunately this doesn’t validate if all fields are filled out, let alone if the email field is in fact an email address. I had so much hope for this snippet. :(
Hello Claire, we are sorry that this did not resolve your issue. You could set all fields to Required to validate that all fields are filled out and for email address, are you currently using an Email Field? Let us know about your setup so we can help you out with this one. 😃
I used your “download code” button. The beginning now looks like this:
class GWAutoListFieldRows {
etc…(nothing else changed)
Hello Nicholas, thank you for that information. When using the snippet, You just need to create your own instance of the GWAutoListFieldRows class. You’ll find two examples at the bottom of the snippet. Comment them out and then add your own! All you need to set is the $form_id, the $list_field_id, and the HTML id of your input as the $input_html_id property.
// EXAMPLE #1: Number field for the "input_html_id" new GWAutoListFieldRows( array( 'form_id' => 240, 'list_field_id' => 3, 'input_html_id' => '#input_240_4' ) );// EXAMPLE #2: Single Product Field's Quantity input as the "input_html_id" new GWAutoListFieldRows( array( 'form_id' => 240, 'list_field_id' => 6, 'input_html_id' => '#ginput_quantity_240_5' ) );
No need to change the code at the top. If you have a Gravity Perks license we would be more than happy to take a deeper dive into your forms. You could drop us a line through our support channel here. Thanks! 😃
Reading all the comments about how easy this was to implement, I am feeling a right twit because nothing seems to happen.
1) I copied the code snippet to my child functions.php file. 2) I removed the leading <!PHP 3) I configured the inputs:
Where 32 is the ID of my list field and 63 the ID of my source number field. The source field appears just above the list field.
The changes to functions.php saved without errors.
It seems to have exactly NO effect on my form: the list field still displays the +/- buttons and the value entered in the source number field doesn’t change the number of list field rows.
I’m probably doing or overlooking something very obvious and stupid. I would appreciate any thoughts/help.
I should add that I can see no errors and AJAX is not enabled.
Hello Nicholas, I am sorry that you are having this issue. I see that you have done things correctly. Are you keeping the whole configuration?
new GWAutoListFieldRows( array( 'form_id' => 18, 'list_field_id' => 32, 'input_html_id' => '#input_18_63' ) );I just tested the code and everything seems to be working correctly on my end. Could you ensure that you have included the function at the top of the configuration as well as matched the formating? Thank you! 😃Hello Gravitywiz Team,
I’m looking for your solution(https://gravitywiz.com/set-number-of-list-field-rows-by-field-value/) for showing row from passing value in a text field.
But I’m used ajax gravity form so that js code added in above the Html start so it is pushing the jquery error and then my custom js not work on that form.
output_script() js function called in above the html after clicking next.
We are used save and continue form with ajax.
Without ajax is working fine but we need to use ajax form as our client requirement.
Looking for your help.
Hello Lalit, could you please try our Custom JavaScript plugin and see if you are still experiencing this issue. This plugin allows you to easily add custom JavaScript to your Gravity Forms that loads in the appropriate context and doesn’t interfere with other AJAX-enabled forms. Thanks!
How do I make all additional fields required. If I now fill in 1 field (it doesn’t matter which field), the visitor does not have to fill in the rest of the fields. How can I add this requirement. The visitor must complete all fields.
Hello Eduard, Excellent question. We just updated the documentation with this and you can make all field required by using this awesome snippet. 😀
Hi there,
I noticed there is a dangerous issue with running this using a vanilla quantity field. If a user accidentally (or on purpose for that matter) enters a huge quantity (2000) it will crash the browser as it tries to render 2000 input boxes. The solution is to enable drop down selection on the quantity field or use a JavaScript input mask to limit the input. It might be worth warning people about that.
I was also trying to use this snippet with https://gravitywiz.com/better-inventory-with-gravity-forms/ but the stock validation doesn’t seem to work when you combine the two snippets. When combined it still lets you select inputs when there isn’t enough stock and you are using two products on one form. When there is no stock the field disables but a user can still use the submission button. When there is no stock you get the out of stock message displayed correctly and the list input is disabled but the total price acts as if you have one item selected and it allows you to continue to submission. I can’t disable the form because there are other products with stock that need to be sold. I’ve tried setting the default value in the quantity field as 0, I’ve tried setting the default selection as zero. I’ve tried to also set the default value of the product field as zero with a php function rather than gravity forms form GUI. But every time it runs out of stock it defaults the value to 1 unit and allows you to submit.
I don’t know enough about php coding on WordPress to build this from the ground up. My guess is it is something to do with how the list item is first being called. It defaults to one item when the solution to this issue is to set the starting default as zero. I believe there needs to be an amendment to the “Set Number of List Field Rows by Field Value” snippet.
Hey Nick, that’s a good call. I’ve added this to the bug list for this snippet. We’ll get it in the queue to be addressed in the code.
Do you have an example of your Better-Inventory-enabled form? Also, if you could include your configuration of the Better Inventory snippet via a snippi, that’d be very helpful.
Also, if you’re a Gravity Perks customer, feel free to submit a support ticket for faster response times.
Hi, great snippet except it is beyond my mental understanding to a large degree.
https://athenainsurance.com/small-group-health/
I am not understanding how to modify what and where.
Please help
Hi Steve, this might help: https://gravitywiz.com/documentation/snippet-troubleshooting/
That does not help me.
The code-based approach is not for everyone. You might be interested in the plugin version that requires no code interaction. It’s called GP Auto List Field and is available by request to Gravity Perks license holders.
Hi, I have just discovered that when I include this code in my functions.php, the Parent Page selector disappears in under Page Attributes when editing a Page. It makes no sense since the snippet should only impact the form, not the page editor. The form itself works fine with the snippet.
I’m wondering if it has anything to do with the (jQuery) call in the function because there was a second snippet that also causes this error and it also included Javascript.
https://docs.gravityforms.com/making-a-field-read-only/
I created a pared down site using just this code snippet in the Twentynineteen theme to confirm that it’s not a problem with my theme. The site is password protected but I can send the login info if you are interested in taking a look at this unusual error.
Forgot to mention that the site is up to date with the latest WP and plugins. PHP 7.2.9 MySQL 5.7.23 WP v5.2.2
Hi Jennifer, if you’re a Gravity Perks customer, we’ll be happy to take a look at your site via the support form.
Hello, I’m trying to get this to work, but it shows a 404 error. I’m confused about the input_html_id… If my form id is 63 and my number field is 29, should it be:
‘input_html_id’ => ‘#input_63_29’
Or am I missing something? Do I need to add anything to the field itself?
I’m trying to use this to count the number of rows in my list field so that I can use conditional logic to show file upload fields. I’m using Slim Image Cropper, which doesn’t allow multiple file uploads, so I need to dynamically show these fields based on how many rows there are in a list field. Unfortunately I can’t say “if there are 4 rows, show 4 file upload fields”, so this is my more complicated workaround.
Thank you!
Hi Sarah, this doesn’t count the rows, it sets the rows. If you enter 4 in the number field, it adds 4 rows to the corresponding List field. The demo has a good example.
Sorry, I couldn’t reply to my previous comment… I’m aware it sets the rows, I just have further plans for it once I get it to work.
Problem is, I can’t get this to work. I suspect it’s the $input_html_id…
Using Example 1, if my form id is 63, my list field id is 16, and my number field is 27, should it be:
new GWAutoListFieldRows( array( ‘form_id’ => 63, ‘list_field_id’ => 16, ‘input_html_id’ => ‘#input_63_27’ ) );
Using this gives me a 503 Service Unavailable error…
Thank you!
Forgive my ignorance, but is there a syntax error on line 37? It’s highlighted in red.
Hey Sarah, your config looks right based on the field IDs. The red highlight is just the syntax highlighter getting a little confused. The syntax is valid.
I also confirmed that the demo is still working. If you’re still having trouble getting this working on your end, we do have a plugin version of this functionality available for our Gravity Perks customers.
Hi, Right now I am using this function as you have describe here and it works perfect. The user enters a number in a field and the same number of rows is shown. But how about this. Before number of rows the user select between 4 different settings as radio buttons and this will then create the number of columns the list field will generate.
Like this: Order shirts for the team!
Printing: – None – Name – Number – Name and Number
Number of shirts:
If the customer choose “Name” and 8 shirts, the list filed shows 2 columns (Name and size (Dropdown) and 8 rows. If the customer choose “Name and Number” and 4 shorts the list field shows 3 columns (Name, number and size (Dropdown) and 4 rows.
The Dropdown and number of rows is already in place and is working. Any idea about the conditional columns function?
Thanks! Fredrik Sundlöf
Hi Fredrik, this is a cool idea. We don’t have a ready solution for this but definitely something we’ll consider for a future version of this snippet.
I did solve this by creating multiply list fields with the different columns that I wanted and then show each at a time with conditional logic from the radio buttons.
:)
Clever! I like it. ?
I’m trying to run two instances of the code in one form. The first instance is running fine. But the second is not working. I double checked the field Id’s and everything seems to be correct. Any ideas??
new GWAutoListFieldRows( array( ‘form_id’ => 8, ‘list_field_id’ => 22, ‘input_html_id’ => ‘#ginput_quantity_8_16’ ) );
new GWAutoListFieldRows( array( ‘form_id’ => 8, ‘list_field_id’ => 20, ‘input_html_id’ => ‘#ginput_quantity_8_24’ ) );
Hi Adam, I tested this configuration locally and it works as expected. Just FYI, if you’re a Gravity Perks customer, you may be interested in our early-access GF Auto List Field perk available by request. It provides this same functionality but without the need to touch code.
hello there,
i don;t know if this forum is active, but im confused about $input_html_id where to find it? sorry im non dev guy.
THere’s not a great way to fetch the input’s HTML ID without viewing the source of the form. It’ll look something like this: https://gwiz.io/2Be3HvJ If you’d prefer to not touch any code, we do have a plugin version of this available to Gravity Perks users by request.
Hey David, Is this perk still available? I don’t see it in the list. -Rich
Hi Rich, it is an early-access perk, available by request for Gravity Perks users. ?
David, I would be interested in this as a perk. It’s a neat snippet with some scope for improvement. Please keep up work on this one.
Drop us a line via support, Nick. We’ll be happy to get you a copy.
EDIT: Add the following CSS:
field_X_XXX .gfield_list_icons { display: none; }
Hello! How do I put a value in the fields of this listing мф JS? For example, this does not work
$jq(‘.gfield_list_2_cell0 :input’).val(start);
How can I enable the “add” and “remove” buttons to show in the same form for another list field that is not using this script to function?
Do you have a URL where I could see this issue?
Is there a way to just indicate the number of list field rows that should be shown upon page load? My form will not have another field to indicate the number of rows required… I just need to show a minimum number of them for aesthetic purposes.
I don’t need/ wouldn’t want them to be required fields.
Just need say five rows to be shown on page-load, and allow the user to add more using the add another row icon.
I’d like to know about this as well. But in my case they would be required fields.
Out looking for this again…anyone have a snippet that will target a list field and allow me to set the number of rows?
I could use the snippet above, or a perk, but having a hidden field in a form with a default value just to set the number of rows seems a bit bloated.
Any help is appreciated!
Hi KO,
Unfortunately, we do not have a solution for this, aside from using a hidden field with a default value. However, I would think with some customization of the snippet above you should be able to achieve what you want.
Best,
This seems to work. If anyone has a better solution, please share! Hope it can help someone else.
Add the snippet in the link below to the theme’s function.php:
http://snippi.com/s/uofoa8a
NOTE: Be sure to add the class “GWListFixedRows” to the field.
TO REMOVE “+” “-“ buttons add the following CSS:
field_X_XXX .gfield_list_icons { display: none; }
EDIT: Left the hash off of the CSS ID. It should be:
field_X_XXX .gfield_list_icons { display: none; }
Hello David,
This post is exactly the functionality that I needed. However, I’m getting the following error: “Uncaught ReferenceError: jQuery is not defined”. I’ve looked all over and tried a lot of different ways to try to fix this error.
This is the link where I’m using the form: http://iacsconvention.org/product/teachers-convention-registration/
I’d really appreciate your help!
I love this site. That is all.
Thanks for the love!
Hello! amazing snippet! Is it possible to add a droplist field int the list? An example: I sell sportwear Jersey. I’d like let the user set the quantity and generate the following list field rows: [Player number] [Player Name] [Size*]
Thank you!
This might help: https://wordpress.org/plugins/gravity-forms-list-field-select-drop-down/
Or, depending on your use-case, this might be a prettier solution: https://gravitywiz.com/documentation/gravity-forms-nested-forms/
This is really great. I want to however have the first 4 items as one price and then once u get to quantity 5 or more, it starts adding in increments. Would you know how?
I’m not sure I follow?
This is an awesome snippet. I want to apply this to more than one list field in my form. How can I include multiple list field ids for this?
Hi Sandy, this will help: https://gravitywiz.com/documentation/apply-class-based-snippet-different-forms/
Hi David,
Awesome snippet you have here!
It works well for me, but the problem is that even if I set the min/max for the number input, people are still able to type in any number they went before submission, and if they add 5000 let’s say, the form will then automatically produce 5000 lines… this would take 30-50 sec for my pc to process, on other computers it could take longer or even freeze the browser…
So is there anyway I could limit the number of rows? For instance, the list would only create 400 rows, no more, even if people type 5000 in the number field…
Let me know what you think. Thank you!!
This is a good point. We don’t have any plans for adding support for this to this snippet version but we’ll definitely get it added to the plugin version (which is available by request to our Gravity Perks users.
Hi David,
First off, this is a great snippet and one that’s really helped me out – so thank you!
However, I have an issue :-(
When I implement the script, I get the dreaded: Warning: Cannot modify header information – headers already sent by
Looking at the line in the error, it seems to be from the styles. If I remove that, it then errors again on the closing script tag (line 123)
I’ve tried two methods to implement this: 1) Directly in the function file and removing the opening <?php tag as per your trouble shooting 2) Setting it as a stand alone file and called in via the functions file
Any help to fix this would be ace!
Thanks in advanced
Hi Ian, this might be a theme/plugin conflict. Are you using WC GF Product Add-ons? If so, it calls the gform_pre_render filter much earlier than expected which is probably what is causing this issue.
I recommend picking up a copy of Gravity Perks and getting early access to the GP Auto List Field perk. It is a nicer version of this snippet with a super clean UI.
Thanks David
We are indeed using that plugin :-/
Not to sound cheeky but is there another workaround without purchasing the Gravity Perks plugin?
Thanks again
There are a couple options, both of which are designed to make sure the output_scripts() function is not called before the page is being rendered. The first is to make sure the wp_head action has already been called before outputting the script. The second is to call on the output_script() on a different filter that WC GF Product Add-ons isn’t calling early.
Thanks again David
I guess calling before wp_head would be the better/easier option?
Would you happen to know the best approach for this? Appreciate it’s probably above and beyond but any help is much appreciated!
Hey Ian, if enough people experience this issue, we’ll definitely consider updating the snippet to work with newer versions of WC GF Product Add-ons. In the meantime, our plugin version of this snippet is the way to go. :)
Hi David,
I’ve purchased the Gravity Perks plugin but can’t see the GP Auto List Field add-on listed?
Thanks
Hi Simon, it is available by request. Drop us a line via the support form and we’ll get you squared away. :)
Thanks David,
I’ve put that support request in :)
Two questions. 1. Is it possible to make this work with the Drop-Down field type of the Quantity field? Seems to only work if I use the Number field type. 2. If I can only use the Number field type how do I get the up and down arrows to show up like in your example?
Hi Jonathan, are you setting numeric values in your Drop Down field? I’m not sure if it would work with this snippet but I can confirm that it works in the GP Auto List Field perk which is available by request to Gravity Perks license holders. If you’d like to take it for a spin, pick up a copy of Gravity Perks and drop us a line via support.
I currently have it set to just fill in a number: https://womenofrighteousness.com/register/. Trying to get the number field to show the arrows like your example…
I believe that is just a matter of enabling HTML5 output on the Gravity Forms settings page.
Hi,
I have trouble setting this snippet for my form: http://www.elidex.org/expositores-2017/
In my functions.php I have the following:
new GWAutoListFieldRows( array( ‘form_id’ => 3, ‘list_field_id’ => 7, ‘input_html_id’ => ‘#input_3_5’ ) );
Can you help me?
Thanks,
Hi Eduardo, this might help. If you’d prefer, we have just converted this functionality to a perk and it is available by request for Gravity Perks license holders.
Hi, thanks for this great script! I was just wondering if there is news about the updated script, regarding the jQuery error, Syrehn also mentioned in a previous comment? Thanks
Hi Vayu, we decided to convert this into a perk instead. It’s now available by request for Gravity Perks license holders. If you’d prefer to use the snippet, you can bypass this error by disabling AJAX.
This is a great option. Similarly though it would be useful to have a merge field option that would offer a count of the rows. This eliminates the need for a user qty field. Instead qty is calculated based on the number of rows.
To add more complexity and offer the solution I am trying to accomplish I would like to get counts based on the values entered into a column. As your example notes I am gathering information for an activity reservation. Part of the refined data I need is the total number of attendees and the number of attendees under 13 years old.
Thanks for the feedback, Joe. This has been a common request. We’re going to tackle it one of these days. :)
I am trying to limit form entries based on values entered into a number field in each form. For example, this form is used for event registrations and we need to limit entries based on the numbers attending (each school registration is one entry form). If school A is bringing 8 people and school B is bringing 2 people, we need the form to stop allowing entries once it gets to 300.
This code is not working correctly. The main/only different between the two forms is the entry field is a quantity and the one I would like to use is a number field.
Hi CJ, it sounds like you’re trying to track inventory. If so, this snippet is probably what you’re looking for: https://gravitywiz.com/better-inventory-with-gravity-forms/
Hello there,
I have used this snippet in the passed and it worked like a champ. I updated my Theme and forgot to make a backup of my code that I used. I have been trying for the past hour to figure this out but I dont seem to be coming right. Not sure what I am doing wrong.
Is it possible to help me out?
My Form:
http://ciistores.com/qurbani-2016-south-africa/
My Class:
// EXAMPLE #2: Single Product Field’s Quantity input as the “input_html_id” new GWAutoListFieldRows( array( ‘form_id’ => 4, ‘list_field_id’ => 13, ‘input_html_id’ => ‘#ginput_quantity_4_12’ ) );
When I save it, my whole site throws a “internal error message”.
Thanks in advance.
Hm, I don’t see any obvious issues. This is a good place to start if you’re getting an error on install. https://gravitywiz.com/documentation/snippet-troubleshooting/
Hi, thanks for the code. Is it possible to export this gravity form settings and post a link here to download? I can’t seems to get input_quantity value, thanks.
Sure thing. Here’s the zip: https://gravitywiz.com/app/uploads/2016/08/gravityforms-export-2016-08-08.json_.zip
Hi David,
Great bit of code here as always.
Is there a way to simply display a minimum number of rows on page load. e.g. 3 rows on page load. User can of course add additional rows if required.
Thanks for any help you can offer, Joe
Hi Joe, with the current snippet the only way to do this is to specify a hidden field as the “input_html_id” parameter and set the default value of this field to “3”.
The only issue is that this snippet automatically disables the add/remove buttons for each row. To disable this you can remove line 37.
Brilliant, thank you so much! :)
Hey David,
Thanks for posting this snippet. All I needed was the ability to set a minimum number of rows in the list field so I added a number field and hid it with CSS; works better than nothing. :)
One thing I did notice is that once activated the snippet is throwing the following error:
Uncaught ReferenceError: jQuery is not defined
Removing the snippet removes the error.
Any suggestions on getting that cleared up. Or maybe… just maybe… you’d post a snippet on how to set minimum rows without having to use a number field. Sort of like the option we have already for “Maximum Fields” (wishful thinking).
If you post a URL with the error intact, I’ll be happy to take a look.
Hi David,
Sure. Here is the URL where I’m testing: https://www.creativecollab.co/getting-started/project-application/
Cheers!
Hey David,
Sorry had another question. In theory shouldn’t we be able to comment out line 37 and use css for nth-child to selectively show/hide the + or – for certain rows? Something like :nth-child(-n+4) {display:none;} to hide the selectors for the first 4 rows (assuming we have 5 set rows)?
I tried testing this and it doesn’t actually work, it hides everything. Is this something to do with how the list field works or how the snippet makes rows load?
Just curious because it would be awesome to be able to disable the “remove this row” icon on all rows that we are using the snippet to generate (i.e. 5), as well as disable the “add another row” on all rows except the last row we use the snippet to add.
If we could get something like this to work it would mean that users could add more rows and remove rows those rose but never remove more than we initially set with the hidden field.
I see the issue with the jQuery is caused by the code not taking AJAX-enabled forms into consideration. This snippet is going to receive a rewrite at some point so I am going to hold off on addressing this until that time.
You should be able to hide specific rows with CSS. Here’s an example for hiding the 3rd row:
.gfield_list_group:nth-child(3) td.gfield_list_icons { display: none }Hi David,
Awesome to hear that the snippet will be getting an update at some point. It’s incredibly useful!
Thanks for posting your CSS, I went back and looked and discovered that I had written it wrong (put the :nth-child in the wrong spot, derp). Working like a charm now. Users can effectively add more rows and remove them but they can’t remove more than the 5 I pre-defined with the snippet. :)
Hey,
Thank you very much for the code, works great! I have one issue, I am trying to dynamically pull all product fields from the gravity form and list the fields inside a foreach loop. For the most part this works but it seems to instantiate the listfield ids depending on how many there are on the page. Im assuming this is because the class is being declared inside a foreach loop and it outputs the javascript each time? Below is the code I am using, any help would be great!
http://pastie.org/private/z6cgaiamfipnmfrw2epq
Damian
Where are these variables (highlighted) being defined? http://pastie.org/private/z6cgaiamfipnmfrw2epq#7-8,13
Thank you! This really helped me.
Thanks David for this outstandingly useful snippet of code. I’m coding a golf registration site for a local non-profit radio station and this was perfect for use in numerous areas. I had one form where the team leader could register their team and then choose to send an email out to the other team members telling them to register themselves with their team. Last year, I just used some logic to show up from one to three email fields and then used those to send a form email.
This year, the new radio station manager wanted to make those emails a little more personal, so I needed to gather the people’s names as well as their email address. So, I figured a list field. But, I needed to have one less than the number of people in their team – they can register a team with less than four and accept others from our registrants. So, if they had three people registering with their team, the leader needed to send out two emails.
That would have worked great with your previously mentioned modification, but that wouldn’t work here because I was also using the snippet in six or seven other list fields.
So what did I do? I created a hidden calculated field that took one away from the number in their team and used that field to feed the snippet rather than the actual dropdown. Worked like a charm.
BTW, thanks David for your help on this tournament last year. That code you wrote that allowed them to choose their team name from a dynamically populated dropdown is working great again this year.
Cheers mate.
James
Awesome, James! Glad I could help. The easiest way to do this is to create to “versions” of the class. You can give the class a different name for your modified version that will handle subtracting one from the count. And then keep the original version for other list fields.
Hey David,
Thank you for this snippet and the whole perks offering. I use them a lot. I had a question….Is there a (relatively) easy way to dynamically populate one column of a list field with some values from checkboxes earlier selected. For example, if I select 4 checkboxes, 4 rows in the list field are created and the checkbox values inserted into column 1?
Sounds like you want the inverse of this snippet: https://gravitywiz.com/use-list-field-choices-gravity-forms/ Unfortunately, I don’t have a solution for this but I could write a custom solution if you’re interested in hiring me. Get in touch.
Tom, take it from me – it’s worth EVERY penny you will pay David. I hired him last you to help me solve something specific that I needed. He already had a variant of the code that he was sharing, but I just couldn’t get it through my head how to make it work in my situation. I paid him gladly and in a matter of hours, he had it working for me, he had me a video explaining how I could modify it for future use, and I’ve now reused it on several other forms for the same client. Paying him to help was a super smart move that made me look good to my client. :)
Hi, is it possible to use two instances of the array on one form
new GWAutoListFieldRows( array( ‘form_id’ => 8, ‘list_field_id’ => 25, ‘input_html_id’ => ‘#input_8_22’ ) );
new GWAutoListFieldRows ( array( ‘form_id’ => 8, ‘list_field_id’ => 25, ‘input_html_id’ => ‘#input_8_24’ ) );
Tried doing this, but the second does not seem to work
URL in website link
Have tried so much; however, I believe I am doing it wrong – If you scroll down to the order options click one then try using the “number of pages field” the select is really buggy for me https://pivoture.com/uxiq
Current config options are:
new GWAutoListFieldRows( array( ‘form_id’ => 8, ‘list_field_id’ => 25, ‘input_html_id’ => ‘#input_8_22’ ) );
new GWAutoListFieldRows ( array( ‘form_id’ => 8, ‘list_field_id’ => 28, ‘input_html_id’ => ‘#input_8_27’ ) );
Need both to work on one form – no dice.
Btw, thank you for your work on this.
Hi Lawrence, you can use two stances but the list fields would need to be different. You can use GP Copy Cat to copy the quantity from both fields to a single field so that both fields can effectively update the same list field. Whichever field is modified last will take precedence.
Does this work with latest versions? I installed into child theme functions.php and when 2, 3, or 4 is entered into the Gforms qty box the additional list items do not drop down. Am I required to have an html input field? Please advise?
Hi Harry, the demo is running the latest version of Gravity Forms and appears to be working fine. Yes, you will need the “input_html_id” parameter. It will be the HTML id of whatever input should trigger the row count to change. In the example above it is the ID of the Quantity input.
[…] https://gravitywiz.com/set-number-of-list-field-rows-by-field-value/ […]
After numerous google searches and trawling the eventual results for a solution to my problem, this snippet seems to do pretty much exactly what i want, which is great!
What I’m trying to achieve is to have dynamic entry fields so users can personalise their desired product, as the idea is for them to be able to order any number of any given product and be able to personalise each of them with something different.
Therefore is there a way to make the list fields required and also to limit the number of characters a user can enter into these fields?
Thanks for the great snippet, and any help would greatly appreciated!
You can require all inputs in a List field with this snippet: https://gravitywiz.com/require-all-columns-of-list-field/ As for limiting the number of characters, it’s possible but would require some additional custom code. This snippet might help you get a start.
Hi David, me again!
So, the last time I posted I was having problems with a jQuery conflict. I fixed that and all was right with the world.
Recently my client decided they would rather the purchase order I’m using Gravity Forms for to be able to be added to a shopping cart, so I’ve got the Gravity Forms addon for WooCommerce. I read a comment here about this snippet not working with the WooCommerce quantity field – not sure if that was the only issue with this snippet. I’m not using the WooCommerce quantity field, I’m using the GF quantity field. I actually just installed the WooCommerce addon, and chose the previous form that was working properly as the WooCommerce product. Now, the form displays fine but the list rows do not auto-populate. Looks like the functions are not being called any longer. Do I need to place this script somewhere other than functions.php or modify it in some way?
Working without WooCommerce: http://andersonscustard.com/testing/
Not working as a WooCommerce product: http://andersonscustard.com/product/boxed-bagged-lunches/
Any tips are appreciated!
Thanks,
Ryan
I’m an idiot… nevermind. I duplicated the form for testing and forgot to add a new class!!! :) thanks for a great snippet
My pleasure, Ryan. Glad you got it working. :)
Is there anyway to just set a certain number. I need only 5 rows all the time.
Thanks
Nevermind. I used a hidden field set with a value of 5.
This worked great! Thank you so much
Perfect! Glad you were able to find a solution. :)
Danielle, Can you share how you accomplished this?
TIA Kevin
Hi David,
Thanks so much for this post! It’s exactly what I’ve been searching for as I am selling tickets/subscriptions that require usernames similar to your original test case.
However, in my case having an email entered in EACH list row is mandatory so I need each row to be required. You mentioned in your post that you might be able to come up with a way to do this… would you be willing to post that code to require each row?
Thanks so much!
Hi Jennifer, I have a separate snippet that will require all rows of a List field. Here it is: https://gravitywiz.com/require-all-columns-of-list-field/
Fantastic, thanks!
Doesn’t appear to be working for me, but I may have something wrong. I replaced the proper fields for the list ID, #ginput ID, and form ID. The option to add new rows for the user disappears as it should, but entering a value into the Single Product Name Quantity field does not auto-populate any rows.
The code was added from the downloaded code snippet, after watching the video on installation – all done correctly.
http://andersonscustard.com/824-2/
password: Coner52
any ideas? if this would work, it would be PERFECT for what I’m building! thanks!
Hi Ryan, you’ve got some JS errors on your page. I think if you resolve these (particularly the last one), this will work: http://grab.by/KyoY
Thank you David! I noticed that as well – I am inheriting this website from a developer that stopped work. Any hints as to what you think may be causing this conflict? I’ve deactivated all plugins installed and am not finding a solution.
I did notice that Gravity Forms is referencing a newer version of JQuery than my theme. Think an update to the theme JQuery may do it?
Cheers!
If you’ve already deactivated all other plugins it is most likely a theme issue. You can step through the files of the theme and try disabling them until the error goes away to help pinpoint which file is generating the error. As a first step though, I would just set the theme to a WP default theme to confirm the issue is originating in the current theme.
I found it! There was some sticky nav script being called in the functions.php file, yet the site doesn’t even use it. I just commented it out for now, but the site is exactly as it was before with the added bonus that my plan works now!
And it also fixed a problem where the Product Total was not calculating at all, it was always at $0. 2 birds, one stone! I appreciate the help.
Awesome! Glad to hear. :)
I have this snippet installed and I thought everything was working perfectly. You change the quantity of the product and it changes the list number. The issue that I’m having is that when I enter the address fields at the top it hides my list fields completely. Did I do something wrong installing the snippet or is this something I need to contact gravity forms about trouble shooting?
So sorry. Disregard all of this. I had conditional logic enabled for some reason.
Thanks for the awesome snippet.
My pleasure! Glad you got it sorted. :)
Hi David, I have two list fields, can this snippet be configured to update the number of rows for both fields? I currently have it setup for one field.
Ramy
Hey Ramy, yup! Here’s a tutorial: https://gravitywiz.com/documentation/apply-class-based-snippet-different-forms/
Thanks
I have a form on this site http://cmhigh.com/pullorder/ that automatically has 10 rows created from a hidden field. My problem is if a user forgets to enter one of the required fields when clicking submit, it will revert back to the first 10 rows, even if the user had manually added more rows.
By default, this snippet hides the plus/minus buttons so the use case you’ve described is not addressed. If you’d like to commission support for this, get in touch.
Hi David,
First, many thanks for this website, I had several forms to do and it has been really useful for me. This morning, I find this snippet and I succeeded to do what I want, I have associated with Gravity Forms – List Field Select Drop Down in my list field.
It seems to work well but when I receive the administrator notification, there is no data with the shortcode {all_fields}.
I’ve tried using the specific shortcode of my field but it’s the same.
Have you got an idea of what happens ?
I’m testing the form at this url : http://comitedesfetesdesmanoreys.fr/fete-du-pays/formulaire-dinscription-fete-du-pays/
Thanks for your help.
Valérie
Hi Valerie, I’m not able to recreate the issue. Here is the notification with the {all_fields} merge tag from the demo (screenshot). Try disabling all other plugins and see if there is something conflicting.
Hi David,
Thanks for your help. I’ve tried to disable all my plugins and it’s always the same.
So to try to understand what was happening, I’ve made a new installation of wordpress and I’ve tested just list field and it works normally. After, I’ve installed my snippets in functions.php and the problem appeared again, so I’ve reinstalled only what I need really and it works.
Valérie
I just want to get the list of all the email ids from the gravity form entries. hows that possible.
Hi Kapil, GFAPI::get_entries() is a good place to start. You can fetch the entries and loop through them to grab the email from each.
Thanks a million! Your code has been really useful!
Glad to hear it, Wong. :)
Hello, I was wondering if you could help me underatand PHP better from the code above. There is a call to output_script, which is done inside of the prerender function, and the prerender is attached to the add_filter for gform_pre_render.
The output_script function contains javascript code without being echoed or placed inside of a string.
I ran a test script to see what this would do:
Hello World
with and without the function call to HelloWorld(); The html is only output if HelloWorld is called.
Why is that not a PHP error? It looks like the html code is ignored, but when wrapped in a function is output only when the function is called. It looks like it is ignoring the text placed outside of the template tags.
So now that I know that it just outputs the javascript code inline whereever the function is called in the PHP code, it is not obvious to me why that would be executed within a gform_pre_render. How do you know that the gform_pre_render code (output_script javascript code) will output at all in the body of the html document without looking at the context, ie. the gravity forms source code. and what the source intends to do with the raw vanilla javascript. Couldn’t the script be output with the register_init_script hook as well?
In looking at the register_init_script hook, it seems that it uses the script placed inside of the string and passed off to the GFFormDisplay::add_init_script call.
Thanks for your help, Masoud
Hi Masoud,
Where the script is output is at least in some part personal preference. By using the gform_pre_render as the hook that then triggers the output_script() method, I know the script will always be output immediately before the form content.
The gform_pre_render filter will always be called before the form is output because Gravity Forms calls this filter before outputting any form.
The reason I am about to output the script directly to the page without echoing it or capturing it in a string is because in the function, I exit PHP with a closing PHP tag: ?>. Anything after this tag will be interpreted as raw output and be output to the page immediately.
At the end of the function, I re-enter PHP with an opening
<?phptag.Does this help? Happy to expound on any point. :)
Hello David,
Thank you for useful tutorial, Is it possible to use + and – buttons to add or remove rows?
I meant, in quantity is it possible to have + and – button
Our pleasure, Soso. :)
If you enable the “Ouput HTML5” option, Quantity-type inputs will automatically have the +/- buttons (example).
Thank you David for your time and support, it was really useful.
One more thing, do you know or can you provide any information about age calculation, is it possible to calculate age using data picker?
Thank you in advance
Hi Soso, I have a perk that handles this very well. It’s called GP Date Time Calculator. If you pick up a copy of Gravity Perks, just ping me on support for a copy.
Hi David,
Almost the snippet I’m looking for. I’d like to keep the field repeatable, but set it up so that it initially displays \maybe 10-12 rows. (That should be enough for most of my customers.) I see that I can use a hidden field to set the number of initial rows, but how do I modify so that the + and – buttons stay and the user can add more fields if necessary?
Hi Pete, you should be able to just delete the highlighted lines: http://pastie.org/private/cvij5waku81kcmjl9fq#28-32
Thanks, David. I managed to figure that out this morning when I got around to looking at page 2 of the comments!
Awesome! :)
Just found out about your site for Gravity Forms Support…you have exactly what I am looking for!! One thing I don’t know what to setup is the $input_html_id properly.
I understand everything else so far.
Ken
Okay, I used my brain a little more and was able to understand what you were referring to and got the code snippet working PERFECTLY!!!
Great Piece of code!!!
Awesome! Glad you got this working. :)
pls how can i loop numbers beside the the looping fields as the loop happens
You mean like this: https://gravitywiz.com/numbering-gravity-forms-list-field-rows/ ?
Thanks
Is it possible to modify this snippet or create a list field and have the default amount of list fields be like 3, without relying on another field?
Hi Tony, one thing that might work is to simply use a hidden field with a default value of 3 for ‘input_html_id’ property.
Hey this is awesome! One question: is there a way to do this without relying on another field for the input.
So I just want to set a minimum of 3 list fields without relying on someone selecting 3, or inputting 3 into another box I want the form to start with 3 list fields. I’ve looked around the web and this is the closest thing I can find to something similar. Unfortunately I’m not good enough with php to hack together what I need from your snippet!
Hi Tony, your comment got lost. Sorry about that. You can try adding a Hidden input to the form with the number of rows you want. It still relies on another field; however, this fact is obfuscated from the user.
Hi David,
Thanks for this great snippet. I would love to use it but my situation is slightly different from the examples and I’m not sure how to change it (or if I can).
On my website the “list row” only appears if there is a quantity set to at least 2 (explanation : if the quantity is set to 1, then it’s a simple contact form. when it’s set to 2 or more, an “additional guest(s) info” list row appears). I would like the number of rows to increase automatically, but it means that for a quantity set to 3, I would only need 2 rows, for 4 : 3 rows, and so on…
Can I do this with your snippet, and what exactly should I edit in it in order to achieve that ?
My second question : I would like to add this snippet on all my forms (about 20 of them). Is there a quick and easy way to do that (‘form_id’ => all ??) or do I have to add a snippet for each form with a different form_id each time?
Thanks in advance, Grace
Hi Grace, try updating this line:
count = parseInt( elem.val() );…to this:
count = parseInt( elem.val() ) - 1;Check out the “Many Forms, Identical Settings” section on this page for more details on configure this quickly for many forms.
https://gravitywiz.com/documentation/apply-class-based-snippet-different-forms/
I am a newby. Could you please explain where to add the bottom part (example part) of the snippet? I am having hard time to figure out the the $list_field_id, and the HTML id of your input as the $input_html_id property. Thanks.
Sure think, Kuldeep. You’ll see the “EXAMPLE #1” and “EXAMPLE #2” at the bottom. You only need one of these. Remove the other. On the remaining example, you will…
#input_{form_id}_{field_id}.Does this help?
Thank you very much for this! It worked perfectly and was exactly what I needed!
Happy to help!
Hi David, First, thanks for all the great info on this site. I’m wondering if you have an idea on how to fix my problem. I have an event form, very much like the one used in this demo, but instead of just name and email, I need to gather a lot of other data about the extra attendees too, like job title, phone, etc. The problem is that I can’t get GF to wrap this info onto the next line and all the fields are getting squished together in that one line. Any idea how I can get them to wrap, or a better way to handle these fields? Thanks so much for any advice you can give me!
Hi Laura, glad you’re finding Gravity Wiz to be a useful resource. It is possible to customize the output of the List field inputs; however, it isn’t super straightforward. There is the gform_column_input_content hook that will allow you to modify the markup of the individual inputs but they’d still be output in the table-based markup which makes styling the List field with CSS very difficult.
The more comprehensive (and more laborious) hook is the gform_field_content filter. This will allow you to basically rewrite ALL of the markup of the list field.
Unfortunately, this isn’t a simple solution and will require some trial and error to get right.
Thanks for the tips David. I will look into it.
Is it possible to see the which example was used for the demo? I’m not the best sleuth, but it seems like neither of the two included examples were used in constructing the demo.
If I could align the examples with the demo page, I could work backward and figure out where I’m going wrong. Thanks!
Hi Michael, sure thing: http://pastie.org/9770888
Makes perfect sense, thanks!
Hi,
Is there away to add logic for a list field column? Hope you can share ideas on how to do it.
PS. Great Work!
Is there any way of changing the format of one of the columns to a date field?
For example, if in example shown a date of birth were required, what would be best way of changing this?
Hi Simon, here is a solution by Richard (from GF): https://gist.github.com/richardW8k/8136177
Is there a way to make the new fields appear without having to click away from the Quantity field (live).
Try changing line 84 from
triggerInput.change(function(){to
triggerInput.keyup(function(){Thanks David.
Looking at the screencast again. Yeah it isn’t exactly embedding the child form’s fields directly to the parent form. Some queries: 1. Is it possible to tweak your nested forms plugin so that the inputs are directly embedded? Looks like it allows child form to be filled on pop up after clicking a button. Clearly, the entries are then shown in a table within the parent form.
Say one of the child forms had 30-40 quantity input fields then the parent form will show 30-40 columns based entries right?
Any possibility of rearranging the child form entries within the parent form in a grid format. Would like a grid format of child form entries before the parent form submission stage and after in the final parent form entry view.
Hi David,
Great thanks for this, fantastic feature. I was wondering how one can remove the default add and remove icon button from the list field? The field and column headings are not aligned as this does not need the icons.
The demo does not seem to have the icons and columns and input fields are aligned. How did you achieve this?
Thanks.
Hi John, this should be automatically handled by the snippet. Do you have a URL where I could view your implementation of this snippet? I can pinpoint why it isn’t working.
Hi David,
Ah yes sorry saw the CSS display: none line after posting my comment.
More specifically I wanted to get this solved with the Gravity Forms list field: http://stackoverflow.com/questions/25591645/duplicate-nested-form-or-fields-based-on-a-number-with-gravity-forms
Please let me know how that is possible. I do not have a published URL for the form yet. I believe the the nested form field/feature can do this better instead of the list field? But would need to replicate the nested form based on a number entered, like your demo here. Probably need some clever JS and your handy nested form feature. Please let me know if you still have this. I’m willing to purchase the feature and would greatly appreciate your support on implementing the above.
It sounds like what you’re wanting to do is “embed” the nested form into the “parent” form. This is not currently possible and presents a number of complications. Gravity Forms will eventually release a field group repeater but until then, the modal nested form approach is the only solution I have.
Hi David,
Yeah but your “GP Nested Form” plugin seems to do that right, that is if nesting = embedding? http://www.screencast.com/t/p7sAHutMVfG
If I replicate a nested form (in the parent form) for the times specified in a number field then I can achieve what I want right? Please let me know if you can provide this. Is the GP Nested Form ready for public now? I could try to use that. Appreciate your helpful responses.
Yes, the “modal nested forms approach” is the GP Nested Forms plugin. It is available by request for Gravity Perks license-holders. If you’d like to give it a shot, pick up a copy of Gravity Perks and use the support form to request a copy of the latest GP Nested Forms beta.
Sorry please delete my earlier comment. Thanks David.
Looking at the screencast again. Yeah it isn’t exactly embedding the child form’s fields directly to the parent form. Some queries:
Is it possible to tweak your nested forms plugin so that the inputs are directly embedded? Looks like it allows child form to be filled on pop up after clicking a button. Clearly, the entries are then shown in a table within the parent form.
Say one of the child forms had 30-40 quantity input fields then the parent form will show 30-40 columns based entries right?
Any possibility of rearranging the child form entries within the parent form in a grid format. Would like a grid format of child form entries before the parent form submission stage and after in the final parent form entry view.
Hi John,
In regards to embedding the form directly into the parent form, this is not currently possible and presents a number of complications. Gravity Forms will eventually release a field group repeater but until then, the modal nested form approach is the only solution I have.
The parent form will only show the field data that have been configured to display in the field settings for the Nested Form field. You can opt to show all the fields from the Nested Form; however, this will not look great. Also to be clear, the field input is not shown on the parent form, only the data submitted for that field from the child entry.
I do have plans to make the Nested Form field output templatable so you could configure how everything displays. For the time being, this is not possible.
The best way for you to get familiar with what this plugin can do for you is to give it a shot. I’m happy to offer you a 30 day refund so you can give it a try and see if it will work for you. :)
This is so perfect! Love it.
Glad to hear it!
Hey thanks a lot!!! you saved my life….
Glad you found this useful!
Suddenly there are some weird things happening to my form and I think it has something to do with this snippet. All the output of the fields before the field using this snippet do not appear in the confirmation e-mail.
I’m also using this plugin (http://wordpress.org/support/topic/not-all-fields-show-up-in-conformation-mail?replies=1#post-5756259) to add placeholders to my fields. It think that a combination of this snippet and the plugin is causing problems, but I’m not sure.
The form is located here: http://www.klassenverhaal.nl/bestellen/
Any suggestions?
Hallo, thanks a lot for this code!
this great function my works on wordpress network?
Yep, this will work for both a single WP install and a network install.
Hello,
I followed the instructions for everything, like removing the extra <?php and changing the form_id along with the list_field_id, yet nothing new seems to have appeared. Or no new feature anyways.
Am I forgetting something?
Hi,
I don’t quite understand what the html_id is. I got the other 2 but I’m clueless on the html_id. Is that the id of the field that is providing amount of rows we want?
Thanks!
Hi Jay, if you use Firebug or Chrome’s developer tools, you can actually target the quantity/number input and view the “id” attribute. You can then copy and paste that attribute as the value for the “html_id” parameter for this snippet.
Is there a way to have those two instances share a max limit then?
Hi Steven, if the max limit were 10 would both list fields be able to have 10 each or do you mean that between the two list fields there could only be a total of 10 rows, so if one list field had four rows the other list field could only have six?
Is there a way to set a row limit without using the backend of the form? I want to set the row limit dynamically.
So I have two List fields that I want to display to share a max row limit. I got the first one to do it dynamically. The second one (named a different class) is not being registered and both list fields are running from the same class even though I named them two separate classes. Do I also need to change the name of the function?
Hi Stephen, what do you mean you named them two separate classes? You should just be able to create two instances of the same class. If you look at the bottom of the snippet code, you will see how I’ve created two instances of the class and just pass different parameters for each instance.
I’m just playing around with this solution a bit more, and noticed that if the Quantity field is left empty or set to 0, the List field still shows up. In a scenario where you’re selling different ticket types, I think it would make sense to hide those fields until the user inputs 1 or more inside the Quantity field.
Any ideas on where to start with that? Unfortunately the default conditional logic doesn’t appear to work with Single Products set to Quantity.
Thanks again!
Looks like I solved the issue. I spoke to Gravity Forms helpdesk and they said that conditional logic is available for separate quantity fields.
So if you require the List fields to be hidden until something is input, just setup your product field and inside that product field settings set the quantity field to hidden, then add a separate Quantity field (in Pricing Fields), then set the List field to conditional show if Quantity is not null (ie leave value empty). Then just a matter of changing the ‘input_html_id’ in GWAutoListFieldRows().
Thanks again for this, combined with https://demos.gravitywiz.com/better-pre-submission-confirmation/ this thing purrs like a kitten. Such a great alternative to having to setup a clunky ecommerce plugin.
Looks like the demo link isn’t updated to the new subdomain – for anyone else looking I found the demo at: https://demos.gravitywiz.com/set-number-of-list-field-rows-by-field-value/
Thanks for the snippet! Great solution!
Thanks for kind words and pointing out the issue with demo URL. I’ve fixed it to point to the new address.
Can anyone suggest a way to set a maximum number of rows to display? I’ve twiddled with the code but can’t quite get the desired functionality. If someone enters 100 in my list count field, I would like it to just limit the number of actual rows to be 20.
Hi David, I couldn’t install the code. Do you have a plugin version of this so that I can install easily. Thanks.
Hi Naquibullah, most of these snippets would only require that you add a plugin header and add them to your plugins folder to be run as plugins. You can find an example of a plugin header here: http://codex.wordpress.org/Writing_a_Plugin
I do have plans to make snippets auto-packable as plugins in the future.
I have the same question as https://gravitywiz.com/set-number-of-list-field-rows-by-field-value/comment-page-1/#comment-251 Can this function be done MULTIPLE times for the same form? or MULTIPLE times for the same site but for different forms with different variables?
as the links in the comments are old and broken – I can’t figure out what the solution is
Hi Tanya, try duplicating the code, changing the function name and reference to that function in the filter for the duplicated code, and let me know if/how it breaks. A URL would be awesome. :)
Having read the comments above, I can’t figure out how to get this working for multiple list fields in one form. I have two different list fields in the same form and they are effected by different quantity fields.
Ok… just slowpoking)) http://dbv.travel/event/mostar-5/2013-10-23/ all works fine. I duplicated the code and gave the function a different name. Thank you
Now i ended up with two number fields updating one same list field http://dbv.travel/event/mostar-5/2013-10-23/ instead of two different
Hi Tanya, I’ve completely revamped the snippet to better support applying to multiple forms and multiple fields on multiple forms. Just create a new instance of the class new GWAutoListFieldRows() for each input/list field combo.
This is really awesome, thank you so much for the hard work.
I’m wondering if it’s possible to adjust this so that I could keep the +/- buttons visible and increase/decrease the quantity field if those are clicked as well?
Basically so that with the +/- visible the number of list fields still matches the quantity field value at all times.
Hi Sarah, just comment out this line: http://grab.by/qTiC
Sweet script. Can you think of any reason why the formatting of the email notification for the list field would be inconsistent….seemingly random font and font size changes and different indents in the cells?
Hi Dave,
I have follow the step but the field didn’t appear in the form. I s there something I should add in the form editor?
Hi Dave,
Great script. I’m really wondering if you could use this to globally run the update function to any list field in a form? I have a client who wants to ditch Survey Monkey and I figured it’d be no sweat to make their standard survey in GF. However they LOVE having multiple inputs for a question. What I need to do is default the list field to 6 rows.
Actually as a follow up, because I need this form to be able to be duplicated I’d run the pre_render hook to all forms and look for any list field with a specific class. I think that bit of logic would help distinguish which fields I want to be 6 deep. I just can’t seem to get right ID’s or something…
I got it! using this little bit of code to find all the list fields, grab the parent li id and fire the function.
** $add_num is the number of rows I want
Hey.. i installed this snippet so that it 9ouwld duplicate the LI for an image upload instead of the table row tr you had … but its not working .. does this only work with “quantity” fields? can you take a look and see if there is something i did wrong here? http://dev.goldlinegraphics.com/test-dup/
Hi Marc, this snippet only works for List fields. List fields are the only Gravity Form field that are setup to handle multiple “rows” of data from a single field. This means implementing this snippet for other field types will not work.
Great snippet. Thanks.
I have a strange thing. I give 4 it adds 3, I give 6 it adds 5, always one missing. I’m sure it’s because of my settings because I have something similar with directory addon. It doesn’t list my last entry, so again always one missing. Do you have an idea about that case?
Hi Cihat, this snippet has been updated to resolve this issue.
Not sure if this is a snippet bug or my bug. Everything works great for me until I submit the form and there are validation errors. If that occurs, the dynamic list field seems to default to 1, no matter what I then change the quantity to.
http://hearts.creativelogic.biz/tickets/
Note: “Gala Tickets – Individual” is the field that changes the list field.
Hi Trevor, it doesn’t look like this script is ajax-proof. I will add this to the queue based on how often it is requested.
If you’d like to see ajax support implemented immediately, get in touch: david@gravitywiz.com
I tried this out using a combo box to make the number of fields dynamic and it worked a treat.
Added the require-all-columns as well =D now is perfect.
only trouble I ran into was putting the # in e.g.
#input_30_1Just wanted to say thanks for an awesome post!
Hi Skye, thanks! Glad you found this post useful
Could I tie this functionality into Mailchimp so each extra e-mail would be send to a list?
Hi Allan, I don’t believe the list field integrates with the Mail Chimp add-on in such a way. If you give it a shot, let me know.
This is awesome, and is getting pretty close to something I need badly, which is to allow a user to create an undetermined number of posts from a front end form. I often use custom post types to customize client sites, and basically I want a way to make each row of of the list field into a custom post type, and potentially make each column cell within the row into a post meta field.
So as an example, if a user came to a form that let them enter things they had that they wanted to sell, and there were a list field for “phones” that they had to sell, then they could 1) enter the number 3 for how many phones they had to sell, and using this code they would get 3 list field rows, 2) then they enter all the required info in the list field columns (model number, manufacturer, condition, color, etc) and 3) upon submitting the form 3 new posts of the the custom post type “Phones for Sale” would be created (using the custom post type add-on). I have never quite figured out a good way to do this yet, but I have wanted to do so on at least 4 different projects. Please let me know if you move in the direction of connecting the list field to post fields or else hacking together repeating groups of post fields.
Great Code Snippet David, This was very useful.
Let me know when you modify the code to make list items required.
Thanks.
Hi Mark,
I actually ended up writing this as a separate snippet. Let me know how it goes. :)
https://gravitywiz.com/2012/07/23/require-all-columns-of-list-field/
I’m trying to use this with WooCommerce (I have the Gravity Forms extension for it). However the Quantity field doesn’t appear to have an id, just a name attribute.
Hi Kristin, unfortunately, the WooCommerce quantity field is part of WooCommerce and not part of Gravity Forms. This snippet will not work for that purpose.
Can this function be done MULTIPLE times for the same form? or MULTIPLE times for the same site but for different forms with different variables?
ie. There are two different list fields in the same form and they are effected by different conditional logic fields?
OR
There are two different forms on the site and each has it’s own list fields with variables.
Thanks. Hope this makes sense. (And for some reason I’m not getting notifications when the post is replied to even though I have subscribed…)
Got this to work. Thanks!
Awesome! Glad to hear it. :)
I’ve added the code and adjusted the numbers accordingly (I think) but it doesn’t seem to be working:
http://www.growdance.com/team-registration-demo/
Here’s the portion of the code I changed:
http://farm8.staticflickr.com/7240/7160762587_48d5100380_b.jpg
Thanks for the help.
Hi Nate, you’ll want to update
$input_html_idto this:$input_html_id = '#input_6_10';Question, I’m trying to apply this function to this form:
http://www.growdance.com/team-registration-demo/
I want the Routine Information field to automatically adjust based on how many routines they select in this field: How many team routines would you like to register for today?*
Is this the code I need to change for the value of the
$input_html_idvariable? <label class=”gfield_label” for=”input_6_20“>Routine InformationThanks.
Hi Nate, it would be this bit here on the select element: http://grab.by/e1cc
This is very useful. Ideally I’d like to make each input field required. Let me know when that’s possible.
Thanks David!
Yeah, I figured that would be the next logical direction for this snippet. I will work on a solution and update the snippet. :)