Douglas on Web Applications

Hide & Show Fileds and Labels in EXTJS 3.01

Code to hide and show both a field and label whenever a checkbox is select. Note as of 3.01 just hidden a field will cause its label to be hidden as well.

Before form rendering code add:

Ext.layout.FormLayout.prototype.trackLabels = true;

Checkbox that invokes the action:

xtype:'checkbox',
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Use an existing GCC as a template',
name: 'use-existing-gcc',
id: 'use-existing-gcc',
  onClick:function(el) {
	  if(this.getValue()==true) Ext.getCmp('field-to-toggle').show();
	  else Ext.getCmp('field-to-toggle').hide();
}

Forms - Radio Groups with jQuery

An easy way to select a radio button using jQuery:

 
$('input[name=packages]:radio')[0].checked = true; //first
 

Getting the value of the selected radio button in a group:

 
var checkedValue = $('input[name=packages]:radio:checked').val();
 

Limit Textarea with Countdown Using jQuery

//src Brian Reindel
var countdown = {
  init: function() {
    countdown.remaining = countdown.max - $(countdown.obj).val().length;
    if (countdown.remaining > countdown.max) {
      $(countdown.obj).val($(countdown.obj).val().substring(0,countdown.max));
    }
    $(countdown.obj).siblings(".remaining").html(countdown.remaining + " characters remaining.");
  },
    max: null,
    remaining: null,
    obj: null
};
$(".countdown").each(function() {
    $(this).focus(function() {
        var c = $(this).attr("class");
        countdown.max = parseInt(c.match(/limit_[0-9]{1,}_/)[0].match(/[0-9]{1,}/)[0]);
        countdown.obj = this;
        iCount = setInterval(countdown.init,1000);
    }).blur(function() {
        countdown.init();
        clearInterval(iCount);
    });
});

Usage:

<form action="" name="">
    <p>
    <textarea rows="3" class="countdown limit_100_"></textarea>
    <br />
    <span class="remaining"><!-- --></span>
    </p>
    <p>
    <textarea rows="3" class="countdown limit_75_"></textarea>
    <br />
    <span class="remaining"><!-- --></span>
    </p>
</form>

Pre-Populate Form Fields with jQuery

defaultValues = [];
$(".elements_by_class").each(function(i){ //act on array
    defaultValues[i] = $(this).val();
    $(this).focus(function(){
        if ($(this).val() == defaultValues[i]) {
            $(this).val("");
        }
    }).blur(function(){
        if ($.trim($(this).val()) == "") {
            $(this).val(defaultValues[i]);
        }
    });
});

Form Functions Check If Radio Selected

 
function isRadioChecked(el) {
    for ( var x=0; x < el.length; x++) {
        if (el[x].checked) {return true;}
    }
    return false;
}
 

Form Functions Check If Field Filled In

 
function isFilled(el) {
	if (el.value == "" || el.value == null) {
		return false;
	} else {
		return true;
	}
}
 

Form Functions Check If Field Numeric

 
function isNumeric(el) {
    var regexp = /^[0-9]+$/;
    return regexp.test(el.value);
}
 

Form Functions Check If Email Is Valid

 
function isValidEmail(el) {
    var valid   = true;
    var elem   = el;
    var atsign = elem.value.indexOf('@');
    var period = elem.value.lastIndexOf('.');
    var space    = elem.value.indexOf(' ');
    var len     = elem.value.length - 1;  // array from 0 to length-1
 
    if ((atsign < 1) ||   // '@' cannot be first character
		(period <= atsign+1) ||    // at least one valid char between '@' and '.'
		(period == len) ||      // at least one valid char after '.'
		(space  != -1)) {   // no empty spaces permitted
		valid = false;
    }
    return valid;
}
 

Form Functions Check If Zipcode Is Valid

 
function isValidUSZipcode(el) {
    var regexp = /^(\d{5}|\d{9}|\d{5}-\d{4})$/;
    return regexp.test(el.value);
}
 

Limit to just 5 characters...

 
function isValidUSZipcode5(el) {
    var regexp = /^(\d{5})$/;
    return regexp.test(el.value);
}
 

Any postal code...

 
function isValidPostalCode(el) {
    var regexp = /^[0-9a-zA-Z\.\-]+$/;
    return regexp.test(el.value);
}
 

Form Functions Check Textarea Length

 
function checkTextAreaLength(el,len){
    if (el.value.length > len) {
        alert ('Please limit message to no more than ' + len + ' characters');
        el.value = el.value.substr(0,len);
    }
}