Skip to content

Instantly share code, notes, and snippets.

@vfontjr

vfontjr/address.html

Last active Apr 24, 2020
Embed
What would you like to do?
[subtabs title="Additional Info"]
[subtab title="Permanent Address"]
<h2>Permanent Address</h2>
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
<label for="field_[key]" class="frm_primary_label">[field_name]
<span class="frm_required">[required_label]</span>
</label>
[input]
[if description]<div class="frm_description">[description]</div>[/if description]
[if error]<div class="frm_error">[error]</div>[/if error]
</div>
<script>
jQuery(document).ready(function($){
// activate the tooltip function
$( document ).tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
// add title attributes to ethnicity and race fields so tootips display
$('#field_2f4fn7-0').attr('title', 'A person of Cuban, Mexican, Puerto Rican, South or Central American, or other Spanish Culture or origin regardless of race.');
$('#field_tp1j02-0').attr('title', 'A person having origins in any of the original peoples of North and South America (including Central America) and who maintains tribal affiliation or community attachment.');
$('#field_tp1j02-1').attr('title', 'A person having origins in any of the original peoples of the Far East, Southeast Asia, or the Indian subcontinent, including, for example, Cambodia, China, India, Japan, Korea, Malaysia, Pakistan, the Philippine Islands, Thailand, and Vietnam.');
$('#field_tp1j02-2').attr('title', 'A person having origins in any of the black racial groups of Africa.');
$('#field_tp1j02-3').attr('title', 'A person having origins in any of the original peoples of Europe, the Middle East, or North Africa.');
$('#field_tp1j02-4').attr('title', 'A person having origins in any of the original peoples of Hawaii, Guam, Samoa, or other Pacific Islands.');
// populate current address
$(function(){
$("#field_224zki-0").change(function() {
if ($("#field_224zki-0:checked").length > 0) {
bindCurrent();
} else {
unbindCurrent();
}
});
});
var bindCurrent = function() {
// First copy values
$("input[id='field_ehojnh']").val($("input[id='field_3l3cwp2']").val()).attr("readonly",true); //address
$("input[id='field_pfyu8e']").val($("input[id='field_puitbx2']").val()).attr("readonly",true); // address2
$("input[id='field_f3259j']").val($("input[id='field_w8z3lb2']").val()).attr("readonly",true); // city
$("select[id='field_urw4bt']").val($("select[id='field_9c57wk2'] option:selected").val()).attr("disabled",true); // state
$("input[id='field_ele4cr']").val($("input[id='field_xk12lc2']").val()).attr("readonly",true); // zip
$("select[id='field_8w230h']").val($("select[id='field_j9nrol2'] option:selected").val()).attr("disabled",true); // country
// Then bind fields
// address
$("input[id='field_3l3cwp2']").keyup(function() {
$("input[id='field_ehojnh']").val($(this).val());
});
// address2
$("input[id='field_puitbx2']").keyup(function() {
$("input[id='field_pfyu8e']").val($(this).val());
});
// city
$("input[id='field_w8z3lb2']").keyup(function() {
$("input[id='field_f3259j']").val($(this).val());
});
// state
$("select[id='field_9c57wk2']").change(function() {
$("select[id='field_urw4bt']").val($(this).val());
});
// zip
$("input[id='field_xk12lc2']").keyup(function() {
$("input[id='field_ele4cr']").val($(this).val());
});
// country
$("select[id='field_j9nrol2']").change(function() {
$("select[id='field_8w230h']").val($(this).val());
});
};
var unbindCurrent = function() {
/* unbind fields */
$("input[id='field_3l3cwp2']").unbind("keyup");
$("input[id='field_puitbx2']").unbind("keyup");
$("input[id='field_w8z3lb2']").unbind("keyup");
$("select[id='field_9c57wk2']").unbind("change");
$("input[id='field_xk12lc2']").unbind("keyup");
$("select[id='field_j9nrol2']").unbind("change");
/* clear readonly and disabled attributes */
$("input[id='field_ehojnh']").removeAttr("readonly");
$("input[id='field_pfyu8e']").removeAttr("readonly");
$("input[id='field_f3259j']").removeAttr("readonly");
$("select[id='field_urw4bt']").removeAttr("disabled");
$("input[id='field_ele4cr']").removeAttr("readonly");
$("select[id='field_8w230h']").removeAttr("disabled");
/* clear fields */
$("input[id='field_ehojnh']").val("");
$("input[id='field_pfyu8e']").val("");
$("input[id='field_f3259j']").val("");
$("select[id='field_urw4bt']").val("");
$("input[id='field_ele4cr']").val("");
$("select[id='field_8w230h']").val("");
/* set focus to address */
$("input[id='field_ehojnh']").focus();
};
});
</script>
[/subtab]
[subtab title="Demographics"]
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
<label for="field_[key]" class="frm_primary_label">[field_name]
<span class="frm_required">[required_label]</span>
</label>
[input]
[if description]<div class="frm_description">[description]</div>[/if description]
[if error]<div class="frm_error">[error]</div>[/if error]
</div>
[tabs title="" disabled="false" active="0" event="click"]
[tab title="Personal Details"]
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
<label for="field_[key]" class="frm_primary_label">[field_name]
<span class="frm_required">[required_label]</span>
</label>
[input]
[if description]<div class="frm_description">[description]</div>[/if description]
[if error]<div class="frm_error">[error]</div>[/if error]
</div>
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
<label for="field_[key]" class="frm_primary_label">[field_name]
<span class="frm_required">[required_label]</span>
</label>
[input]
[if description]<div class="frm_description">[description]</div>[/if description]
[if error]<div class="frm_error">[error]</div>[/if error]
</div>
[/subtab]
[/subtabs]
[/tab]
[/tabs]
<?php
/* this is custom code required for Formidable Pro 2.0.9 and higher */
/* if you use the Squelch Tabs and Accordions plugin */
/* to create a tabbed interface for your forms */
/* add this to the bottom of your theme's functions.php file. */
add_filter( 'frm_filter_final_form', 'filter_squelch_tabs' );
function filter_squelch_tabs( $form ) {
global $shortcode_tags;
$original_shortcodes = $shortcode_tags;
$limited_shortcodes = array(
'tabs' = ( $shortcode_tags['tabs'],
'subtabs' = ( $shortcode_tags['subtabs'],
'subsubtabs' = ( $shortcode_tags['subsubtabs'],
'tab' = ( $shortcode_tags['tab'],
'subtab' = ( $shortcode_tags['subtab'],
'subsubtab' = ( $shortcode_tags['subsubtab'],
'toggles' = ( $shortcode_tags['toggles'],
'subtoggles' = ( $shortcode_tags['subtoggles'],
'subsubtoggles' = ( $shortcode_tags['subsubtoggles'],
'toggle' = ( $shortcode_tags['toggle'],
'subtoggle' = ( $shortcode_tags['subtoggle'],
'subsubtoggle' = ( $shortcode_tags['subsubtoggle'],
'accordions' = ( $shortcode_tags['accordions'],
'subaccordions' = ( $shortcode_tags['subaccordions'],
'subsubaccordions' = ( $shortcode_tags['subsubaccordions'],
'accordion' = ( $shortcode_tags['accordion'],
'subaccordion' = ( $shortcode_tags['subaccordion'],
'subsubaccordion' = ( $shortcode_tags['subsubaccordion'],
'haccordions' = ( $shortcode_tags['haccordions'],
'subhaccordions' = ( $shortcode_tags['subhaccordions'],
'subsubhaccordions' = ( $shortcode_tags['subsubhaccordions'],
'haccordion' = ( $shortcode_tags['haccordion'],
'subhaccordion' = ( $shortcode_tags['subhaccordion'],
'subsubhaccordion' = ( $shortcode_tags['subsubhaccordion'] );
$shortcode_tags = $limited_shortcodes;
$form = do_shortcode( $form );
$shortcode_tags = $original_shortcodes;
return $form;
}
add_filter( 'frm_do_html_shortcodes', '__return_false' );
[/subtab]
[subtab title="Temporary Address"]
<h2>Temporary Address</h2>
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
<label class="frm_primary_label">[field_name]
<span class="frm_required">[required_label]</span>
</label>
<div class="frm_opt_container">[input]</div>
[if description]<div class="frm_description">[description]</div>[/if description]
[if error]<div class="frm_error">[error]</div>[/if error]
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.