Gravity Wiz

Magically enhanced tutorials, snippets and plugins for Gravity Forms!

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.

Last updated | Written by 219 Comments

  • 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.

View DemoShow CodeDownload Code
<?php
/**
* Gravity Wiz // Gravity Forms // Set Number of List Field Rows by Field Value
*
* Add/remove list field rows automatically based on the value entered in the specified field. Removes the add/remove
* that normally buttons next to List field rows.
*
* @version 1.0
* @author David Smith <david@gravitywiz.com>
* @license GPL-2.0+
* @link https://gravitywiz.com/2012/06/03/set-number-of-list-field-rows-by-field-value/
*/
class GWAutoListFieldRows {
private static $_is_script_output;
function __construct( $args ) {
$this->_args = wp_parse_args( $args, array(
'form_id' => false,
'input_html_id' => false,
'list_field_id' => false
) );
extract( $this->_args ); // gives us $form_id, $input_html_id, and $list_field_id
if( ! $form_id || ! $input_html_id || ! $list_field_id )
return;
add_filter( 'gform_pre_render_' . $form_id, array( $this, 'pre_render' ) );
}
function pre_render( $form ) {
?>
<style type="text/css"> #field_<?php echo $form['id']; ?>_<?php echo $this->_args['list_field_id']; ?> .gfield_list_icons { display: none; } </style>
<?php
add_filter( 'gform_register_init_scripts', array( $this, 'register_init_script' ) );
if( ! self::$_is_script_output )
$this->output_script();
return $form;
}
function register_init_script( $form ) {
// remove this function from the filter otherwise it will be called for every other form on the page
remove_filter( 'gform_register_init_scripts', array( $this, 'register_init_script' ) );
$args = array(
'formId' => $this->_args['form_id'],
'listFieldId' => $this->_args['list_field_id'],
'inputHtmlId' => $this->_args['input_html_id']
);
$script = "new gwalfr(" . json_encode( $args ) . ");";
$key = implode( '_', $args );
GFFormDisplay::add_init_script( $form['id'], 'gwalfr_' . $key , GFFormDisplay::ON_PAGE_RENDER, $script );
}
function output_script() {
?>
<script type="text/javascript">
window.gwalfr;
(function($){
gwalfr = function( args ) {
this.formId = args.formId,
this.listFieldId = args.listFieldId,
this.inputHtmlId = args.inputHtmlId;
this.init = function() {
var gwalfr = this,
triggerInput = $( this.inputHtmlId );
// update rows on page load
this.updateListItems( triggerInput, this.listFieldId, this.formId );
// update rows when field value changes
triggerInput.change(function(){
gwalfr.updateListItems( $(this), gwalfr.listFieldId, gwalfr.formId );
});
}
this.updateListItems = function( elem, listFieldId, formId ) {
var listField = $( '#field_' + formId + '_' + listFieldId ),
count = parseInt( elem.val() );
rowCount = listField.find( 'table.gfield_list tbody tr' ).length,
diff = count - rowCount;
if( diff > 0 ) {
for( var i = 0; i < diff; i++ ) {
listField.find( '.add_list_item:last' ).click();
}
} else {
// make sure we never delete all rows
if( rowCount + diff == 0 )
diff++;
for( var i = diff; i < 0; i++ ) {
listField.find( '.delete_list_item:last' ).click();
}
}
}
this.init();
}
})(jQuery);
</script>
<?php
}
}
// 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'
) );
view raw gistfile1.php hosted with ❤ by GitHub

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.

Summary

The one piece missing from this snippet is that regardless of how many rows are displayed, none of these rows are actually required. If this functionality is useful, I will dig into this shortcoming and provide a more robust solution.

Did this resource help you do something awesome with Gravity Forms? Then you'll absolutely love Gravity Perks; a suite of 29+ essential add-ons for Gravity Forms with support you can count on.

Comments

  1. 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!

    Reply

    • 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.

  2. 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

    Reply

    • 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.

      :)

  3. 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’ ) );

    Reply

    • 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.

  4. 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.

    Reply

  5. 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);

    Reply

  6. 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?

    Reply

  7. 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.

    Reply

    • I’d like to know about this as well. But in my case they would be required fields.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.