We help IT Professionals succeed at work.

jQuery error help

Jon Imms
Jon Imms asked
on
Having a problem with one of the functions in my form.js file.  For some reason it breaks alot of js functionality on the site, such as menus, columns etc.

forms.js
jQuery(document).ready(setupForms);

function setupForms(){
	
	if(jQuery(".wp-block-forms").size() === 0) return false;
	
	jQuery('#user-category').on('change', function(){
		
		var current = jQuery(this);
		var value = current.val();
		var category = jQuery('option[value="'+value+'"]', current).attr('data-cat');
		var primaryProject = jQuery('#primary-project');
		
		primaryProject.val(jQuery("option:first", primaryProject).val());

		jQuery('option.active', primaryProject).removeClass('active');
		jQuery('option[data-cat="'+category+'"]', primaryProject).addClass('active');
		
	});
	
	if(jQuery("#combine-name").size() === 0) return false;
	
	var nameFields = jQuery('#first-name, #last-name');
	
	nameFields.on('keyup', function(){
		jQuery('#combine-name').val(jQuery('#first-name').val() + ' ' + jQuery('#last-name').val());
	});
	
	jQuery('#full_name').on('blur', function() {
		var result = jQuery('#full_name').val().split(/(?<=^\S+)\s/);
	  jQuery('#first-name').val(result[0]);
	  jQuery('#last-name').val(result[1]);
	});

	//Function for passing State value through hidden field, based on phone number area code.
	jQuery('#phone').on('blur', function () {
        var pe = jQuery(this);
        var pNumber = pe.val();
        if (pNumber.length < 3) {
            return;
        }

        var areaCode = pNumber.substr(0, 3);
        jQuery('#areacode').val(getState(areaCode));
	});
	
	//Function for passing State value through hidden field, based on phone number area code.
	jQuery('#phone').on('blur', function () {
        var peCountry = jQuery(this);
        var pNumberCountry = peCountry.val();
        if (pNumberCountry.length < 3) {
            return;
        }

        var areaCodeCountry = pNumberCountry.substr(0, 3);
        jQuery('#areacodeCountry').val(getCountry(areaCodeCountry));
    });

 }

Open in new window


Now if i take out the split names functionality, and my file looks like this,  everything works again (except for the split the full name into first/last name which i took out. )

jQuery(document).ready(setupForms);

function setupForms(){
	
	if(jQuery(".wp-block-forms").size() === 0) return false;
	
	jQuery('#user-category').on('change', function(){
		
		var current = jQuery(this);
		var value = current.val();
		var category = jQuery('option[value="'+value+'"]', current).attr('data-cat');
		var primaryProject = jQuery('#primary-project');
		
		primaryProject.val(jQuery("option:first", primaryProject).val());

		jQuery('option.active', primaryProject).removeClass('active');
		jQuery('option[data-cat="'+category+'"]', primaryProject).addClass('active');
		
	});
	
	if(jQuery("#combine-name").size() === 0) return false;
	
	var nameFields = jQuery('#first-name, #last-name');
	
	nameFields.on('keyup', function(){
		jQuery('#combine-name').val(jQuery('#first-name').val() + ' ' + jQuery('#last-name').val());
	});

	//Function for passing State value through hidden field, based on phone number area code.
	jQuery('#phone').on('blur', function () {
        var pe = jQuery(this);
        var pNumber = pe.val();
        if (pNumber.length < 3) {
            return;
        }

        var areaCode = pNumber.substr(0, 3);
        jQuery('#areacode').val(getState(areaCode));
	});
	
	//Function for passing State value through hidden field, based on phone number area code.
	jQuery('#phone').on('blur', function () {
        var peCountry = jQuery(this);
        var pNumberCountry = peCountry.val();
        if (pNumberCountry.length < 3) {
            return;
        }

        var areaCodeCountry = pNumberCountry.substr(0, 3);
        jQuery('#areacodeCountry').val(getCountry(areaCodeCountry));
    });

 }

Open in new window


Can anybody see why this would be killing functionality on the site?
jQuery('#full_name').on('blur', function() {
            var result = jQuery('#full_name').val().split(/(?<=^\S+)\s/);
        jQuery('#first-name').val(result[0]);
        jQuery('#last-name').val(result[1]);
      });
Comment
Watch Question

View Solution Only

Jeffrey Dake Senior Director of Technologyy

Commented:

What does your html look like.  I am trying to figure out the 4 fields of first name, last name, full name and combine name. 

Senior Director of Technologyy
Commented:

Also maybe add some console.log statements to your key up function on first and last name and your full name blur. it might be calling more than you think depending on what your html looks like.