Skip to content

Instantly share code, notes, and snippets.

@vfontjr

vfontjr/example-multidimensional-input-field-name.html

Last active May 5, 2020 10:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vfontjr/820c3faf4bdd84b494aa0951098679a7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vfontjr/820c3faf4bdd84b494aa0951098679a7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
example-multidimensional-input-field-name.html
<input type="text" id="field_97w00-0" name="item_meta[87][0][89]" value="" data-invmsg="Text is invalid" data-sectionid="87">
Raw
hidden-field-form-id.html
<div id="frm_field_137_container" class="frm_form_field frm_section_heading form-field ">
<h3 class="frm_pos_top frm_section_spacing"><span id="Repeater_Section_id137">Repeater Section: id=137</span></h3>
<input type="hidden" name="item_meta[137][form]" value="11" class="frm_dnc">
Raw
jquery-shell-function-formidable-repeaters.js
jQuery(document).ready(function ($) {
"use strict";
/* This is our init function
* There's nothing here yet */
function repeater_row_init() {
}
/* initialize the repeater for the initial load */
repeater_row_init();
/* initialize the repeater for every added row */
$( document ).ajaxComplete(function() {
repeater_row_init();
});
});
Raw
refactored-jennings-code.js
<script>
jQuery(document).ready(function($){
$('select[name="item_meta[211]"]').on("change", function() {
var val1 = $(this).val();
if (val1 == 'MI - 0.00943') {
/* hide the values we don't want */
$("select[name='item_meta[210]']").children('option[value="SWBC - 0.0"]').css('display','none');
$("select[name='item_meta[210]']").children('option[value="FIC - 0.0"]').css('display','none');
$("select[name='item_meta[210]']").children('option[value="Seattle - 0.002"]').css('display','none');
/* display the ones we do */
$("select[name='item_meta[210]']").children('option[value="Seattle - 0.0"]').css('display','');
$("select[name='item_meta[210]']").children('option[value="FIC - .003"]').css('display','');
} else if (val1 !== 'MI - 0.00943') {
/* display the values we want to see */
$("select[name='item_meta[210]']").children('option[value="SWBC - 0.0"]').css('display','');
$("select[name='item_meta[210]']").children('option[value="FIC - 0.0"]').css('display','');
$("select[name='item_meta[210]']").children('option[value="Seattle - 0.002"]').css('display','');
/* hide the values we don't want */
$("select[name='item_meta[210]']").children('option[value="Seattle - 0.0"]').css('display','none');
$("select[name='item_meta[210]']").children('option[value="FIC - .003"]').css('display','none');
}
});
});
</script>
Raw
repeater-source-row-deleted.html
<div id="frm_field_87_container" class="frm_form_field frm_section_heading form-field ">
<h3 class="frm_pos_top frm_section_spacing">test field</h3>
<input type="hidden" name="item_meta[87][form]" value="6" class="frm_dnc">
<div id="frm_section_87-0" class="frm_repeat_sec frm_repeat_87 frm_first_repeat frm_grid_container">
<input type="hidden" name="item_meta[87][row_ids][]" value="0">
<input type="hidden" name="item_meta[87][0][0]" value="">
<div id="frm_field_89-87-0_container" class="frm_form_field form-field frm_top_container frm_field_89_container">
<label for="field_97w00-0" class="frm_primary_label">Text
<span class="frm_required"></span>
</label>
<input type="text" id="field_97w00-0" name="item_meta[87][0][89]" value="" data-invmsg="Text is invalid" data-sectionid="87">
</div>
<div class="frm_form_field frm_hidden_container frm_repeat_buttons frm ">
<a href="#" class="frm_add_form_row frm_button" data-parent="87" aria-label="Add"><i class="frm_icon_font frm_plus_icon"> </i> Add</a>
<a href="#" class="frm_remove_form_row frm_button frm_hidden" data-key="0" data-parent="87" aria-label="Remove"><i class="frm_icon_font frm_minus_icon"> </i> Remove</a>
</div>
</div>
<div id="frm_section_87-2" class="frm_repeat_sec frm_repeat_87 frm_grid_container frm-fade-in">
<input type="hidden" name="item_meta[87][row_ids][]" value="2">
<input type="hidden" name="item_meta[87][2][0]" value="">
<div id="frm_field_89-87-2_container" class="frm_form_field form-field frm_top_container frm_field_89_container">
<label for="field_97w00-2" class="frm_primary_label">Text
<span class="frm_required"></span>
</label>
<input type="text" id="field_97w00-2" name="item_meta[87][2][89]" value="" data-invmsg="Text is invalid" data-sectionid="87">
</div>
<div class="frm_form_field frm_hidden_container frm_repeat_buttons frm ">
<a href="#" class="frm_add_form_row frm_button" data-parent="87" aria-label="Add"><i class="frm_icon_font frm_plus_icon"> </i> Add</a>
<a href="#" class="frm_remove_form_row frm_button" data-key="2" data-parent="87" aria-label="Remove"><i class="frm_icon_font frm_minus_icon"> </i> Remove</a>
</div>
</div>
</div>
Raw
repeater_row_init.js
/* This is our init function */
/* the repeater_section parameter is an array of repeater section ids */
function repeater_row_init( repeater_section ) {
/* loop through the repeater_section array and initialize each repeater row */
$.each(repeater_section, function(index, val) {
/* construct the callback function name */
var fnName = "repeater_section_" + val + "_init";
/* invoke the appropriate callback function, don't use eval here */
callbacks[fnName]();
});
}
Raw
tutorial-code-complete.js
<script>
jQuery(document).ready(function ($) {
"use strict";
/* setup our array of repeater section ids to pass to the repeater_row_init function */
var repeater_sections = ["137"];
/* setup an array of repeater callback functions */
/* you'll want a different callback for each repeater section */
var callbacks = {
repeater_section_137_init : function() {
var rowids = get_row_ids( '137' ), // get all of the row ids
new_row_id = rowids[rowids.length-1]; // get the new row id, it will always be the last array index
/* now that we have the row ids for this section, we can loop through the array and apply the code to each of the correct elements */
$.each(rowids, function( index, row_id ) {
/* the first time through, we have to make sure the CSS is set for newly added row */
/* nothing will have been selected yet and the drop down for field 135 will have no value */
if( row_id == new_row_id ) {
init_new_137_repeater_row( row_id );
}
$('select[name="item_meta[137][' + row_id + '][135]"]').on("change", function() {
var val1 = $(this).val();
/* clear the current val if another state had been selected previously */
$('select[name="item_meta[137][' + row_id + '][136]"]').val("");
if (val1 == 'Michigan') {
/* hide the values we don't want */
$('select[name="item_meta[137][' + row_id + '][136]"]').children('option[value="SWBC - 0.0"]').css('display','none');
$('select[name="item_meta[137][' + row_id + '][136]"]').children('option[value="FIC - 0.0"]').css('display','none');
$('select[name="item_meta[137][' + row_id + '][136]"]').children('option[value="Seattle - 0.002"]').css('display','none');
/* display the ones we do */
$('select[name="item_meta[137][' + row_id + '][136]"]').children('option[value="Seattle - 0.0"]').css('display','');
$('select[name="item_meta[137][' + row_id + '][136]"]').children('option[value="FIC - .003"]').css('display','');
} else {
/* display the values we want to see */
$('select[name="item_meta[137][' + row_id + '][136]"]').children('option[value="SWBC - 0.0"]').css('display','');
$('select[name="item_meta[137][' + row_id + '][136]"]').children('option[value="FIC - 0.0"]').css('display','');
$('select[name="item_meta[137][' + row_id + '][136]"]').children('option[value="Seattle - 0.002"]').css('display','');
/* hide the values we don't want */
$('select[name="item_meta[137][' + row_id + '][136]"]').children('option[value="Seattle - 0.0"]').css('display','none');
$('select[name="item_meta[137][' + row_id + '][136]"]').children('option[value="FIC - .003"]').css('display','none');
}
});
});
}
};
function init_new_137_repeater_row( row_id ) {
/* display the values we want to see */
$('select[name="item_meta[137][' + row_id + '][136]"]').children('option[value="SWBC - 0.0"]').css('display','');
$('select[name="item_meta[137][' + row_id + '][136]"]').children('option[value="FIC - 0.0"]').css('display','');
$('select[name="item_meta[137][' + row_id + '][136]"]').children('option[value="Seattle - 0.002"]').css('display','');
/* hide the values we don't want */
$('select[name="item_meta[137][' + row_id + '][136]"]').children('option[value="Seattle - 0.0"]').css('display','none');
$('select[name="item_meta[137][' + row_id + '][136]"]').children('option[value="FIC - .003"]').css('display','none');
}
function get_row_ids( section_id ) {
/* loop through the hidden fields that have the row_ids and push them into an array */
var row_ids = [];
$('input[name^="item_meta[' + section_id + '][row_ids]"]').each(function(index, el) {
row_ids.push(el.value);
});
/* return the rowi_ids array to the calling init function */
return row_ids;
}
/* This is our init function */
/* the repeater_section parameter is an array of repeater section ids */
function repeater_row_init( repeater_section ) {
/* loop through the repeater_section array and initialize each repeater row */
$.each(repeater_section, function( index, val ) {
/* construct the callback function name */
var fnName = "repeater_section_" + val + "_init";
/* invoke the appropriate callback function, don't use eval here */
callbacks[fnName]();
});
}
/* initialize the repeater for the initial load */
repeater_row_init( repeater_sections );
/* initialize the repeater for every added row */
$( document ).ajaxComplete( function( event, xhr, settings ) {
var complete_event = jQuery.makeArray(event);
var active_elem = complete_event[0]['target']['activeElement']['dataset']['parent'],
repeater_section = [active_elem];
if (active_elem == '137') {
repeater_row_init( repeater_section );
}
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment