Generate Userid from 3 Custom Fields

At registration time, I want to generate the userid from three fields: custom field Unit Number, first name, and last name.

I’ve been looking at Jason Caldwell’s solution for creating a userid from an email address (http://www.primothemes.com/forums/viewtopic.php?f=36&t=14806&p=33812#p33812), and a modification that is more helpful for me, Raam Dev’s solution to create a userid from the first part of the email address, plus a randomly generated number (http://www.primothemes.com/forums/viewtopic.php?f=4&t=15672&p=49082#p49082). In Raam’s solution, he also hides the userid field, so that the user can not edit it.

BTW, thank you so much Jason and Raam for sharing your code.

My challenge is that I want to hide the userid field, then create a userid from three separate fields. Jason and Raam’s solutions use the keykup event on the email field. But I have three separate fields which must each be entered to create the login value. I tried using the keyup event on the Registration button, but then I have a problem because the userid is still blank, so fails validation.

My jQuery and RegEx skills are weak. I’m trying to .trim, and eventually I need to remove any blanks from within the userid. I would appreciate any coding help you can offer.

Here is as far as I have gotten with my code:

<?php
add_action ("login_head", "s2_customize_login", 1000);
function s2_customize_login ()
	{
?>
            <script type = "text/javascript">
            function getParameterByName(name)
            {
              name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
              var regexS = "[\\?&]" + name + "=([^&#]*)";
              var regex = new RegExp(regexS);
              var results = regex.exec(window.location.href);
              if(results == null)
                return "";
              else
                return decodeURIComponent(results[1].replace(/\+/g, " "));
            }
                (function ($) /* Wraps this `$ = jQuery` routine. */
                    {
                        $.fn.swapWith = function (to) /* Utility extension for jQuery. */
                            {
                                return this.each (function ()
                                    {
                                        var $to = $ (to).clone (true), $from = $ (this).clone (true);
                                        $(to).replaceWith ($from), $ (this).replaceWith ($to);
                                    });
                            };
                        /**/
                        $(document).ready (function () /* Handles email-to-username on keyup. */
                            {    
                             /* If this is the register page, customize it */
                             if(getParameterByName('action') == 'register')
					{
					var login 			= 'input#user_login';
                                    	var firstname 		= 'input#ws-plugin--s2member-custom-reg-field-first-name';
                                    	var lastname 		= 'input#ws-plugin--s2member-custom-reg-field-last-name';
					var unitnumber 		= 'input#ws-plugin--s2member-custom-reg-field-unit-number';
					$(login).closest ('p').hide();  // This hides the closest P above the login field,
									         //    which is the p containing the login field.
							 	
				$ (firstname).keyup (function ()
                                        { $(login).val (	($.trim ($ (unitnumber).val )) + "_" +  
                                        			($.trim ($ (firstname).val )) +  "_" +    								($.trim ($ (lastname).val ))  )   ;
                                        });                           
                    		}
                            });
                }) (jQuery);
           </script>
<?php
     }
?>

The code is only using the keyup event of firstname, and as soon as I enter anything in firstname, I get the following, which I don’t know how to interpret:

function (e){var n,r,i,s=this[0];if(!arguments.length){if(s)return n=v.valHooks[s.type]||v.valHooks[s.nodeName.toLowerCase()],n&&"get"in n&&(r=n.get(s,"value"))!==t?r:(r=s.value,typeof r=="string"?r.replace(R,""):r==null?"":r);return}return i=v.isFunction(e),this.each(function(r){var s,o=v(this);if(this.nodeType!==1)return;i?s=e.call(this,r,o.val()):s=e,s==null?s="":typeof s=="number"?s+="":v.isArray(s)&&(s=v.map(s,function(e){return e==null?"":e+""})),n=v.valHooks[this.type]||v.valHooks[this.nodeName.toLowerCase()];if(!n||!("set"in n)||n.set(this,s,"value")===t)this.value=s})}_function (e){var n,r,i,s=this[0];if(!arguments.length){if(s)return n=v.valHooks[s.type]||v.valHooks[s.nodeName.toLowerCase()],n&&"get"in n&&(r=n.get(s,"value"))!==t?r:(r=s.value,typeof r=="string"?r.replace(R,""):r==null?"":r);return}return i=v.isFunction(e),this.each(function(r){var s,o=v(this);if(this.nodeType!==1)return;i?s=e.call(this,r,o.val()):s=e,s==null?s="":typeof s=="number"?s+="":v.isArray(s)&&(s=v.map(s,function(e){return e==null?"":e+""})),n=v.valHooks[this.type]||v.valHooks[this.nodeName.toLowerCase()];if(!n||!("set"in n)||n.set(this,s,"value")===t)this.value=s})}_function (e){var n,r,i,s=this[0];if(!arguments.length){if(s)return n=v.valHooks[s.type]||v.valHooks[s.nodeName.toLowerCase()],n&&"get"in n&&(r=n.get(s,"value"))!==t?r:(r=s.value,typeof r=="string"?r.replace(R,""):r==null?"":r);return}return i=v.isFunction(e),this.each(function(r){var s,o=v(this);if(this.nodeType!==1)return;i?s=e.call(this,r,o.val()):s=e,s==null?s="":typeof s=="number"?s+="":v.isArray(s)&&(s=v.map(s,function(e){return e==null?"":e+""})),n=v.valHooks[this.type]||v.valHooks[this.nodeName.toLowerCase()];if(!n||!("set"in n)||n.set(this,s,"value")===t)this.value=s})}

I humbly ask for help.

Can someone tell me if what I want to do is even possible?

Thanks.

Hi Devra,

My JavaScript / jQuery skills are very rusty (I put the code above together largely through trial-and-error and copy/pasting Jason’s code). However, the most simple way that I can think of generating the username from three fields would be to use the keyup event on the last field. The user will fill out the first two fields and then on the last field the keyup event will run the code that grabs the value from the other two fields and combines them to create your user id.

To improve this, you’ll also want to add some error handling to check if the first two fields are empty when the keyup event is run on the last field, just in case someone skips the first two fields and goes straight to the last field. If either of the first two fields are empty, you can show a JavaScript alert instead of running the code that creates the generated user id.

I hope this helps!

Do you know if there is a hook that would be triggered by the registration submit, but takes place before the page validation, so that I don’t get caught by the validation for a blank userid?

Giving the user a javascript error message because they didn’t fill in their name before they filled in their unit number seems rather unprofessional. Or, if the user fills in the unit, but then goes back to correct a typo in the name, that correction would never be captured.

Thanks.

Devra, you may want to get freelancer to work on this for you to your specifications. You could try posting the job in sites like jobs.wordpress.net, odesk.com or elance.com.

I was able to cobble together code that does what I need. Hope this will help someone else. It’s brute force, but it works. Perhaps Jason will want to smooth out the loose ends?

I am concatenating 2 checkbox values and 3 text box values to create the userid I want. Then I am using the Email Login plugin by Beau Lebens to allow the user to login with their email address, so they don’t have to remember this long userid. The userids are ugly but quite useful to my client.

<?php
add_action ("login_head", "s2_customize_login", 1000);
function s2_customize_login ()
	{
		/* 12/18/12 - DFG Strip all blanks out of first and last name. Concatenate
		        N/S + unitnum  + first + last + Status. */
?>
	<script type = "text/javascript">
        function getParameterByName(name)
        {
        	name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regexS = "[\\?&]" + name + "=([^&#]*)";
            var regex = new RegExp(regexS);
            var results = regex.exec(window.location.href);
            if(results == null)
               return "";
            else
               return decodeURIComponent(results[1].replace(/\+/g, " "));
         }
		 
        (function ($) /* Wraps this `$ = jQuery` routine. */
        {
              $.fn.swapWith = function (to) /* Utility extension for jQuery. */
              {
                    return this.each (function ()
                    {
                          var $to = $ (to).clone (true), $from = $ (this).clone (true);
                          $(to).replaceWith ($from), $ (this).replaceWith ($to);
                     });
               };
                        /**/
               $(document).ready (function () /* Handles email-to-username on keyup. */
                {    
                    /* If this is the register page, customize it */
                    if(getParameterByName('action') == 'register')
			{
			    	var login 		= 'input#user_login';
                           	var firstname 	= 'input#ws-plugin--s2member-custom-reg-field-first-name';
                            	var lastname 	= 'input#ws-plugin--s2member-custom-reg-field-last-name';
			    	var unitnumber 	= 'input#ws-plugin--s2member-custom-reg-field-unit-number';
				var valNS ;	
				var valRES ;	
				var newfirst ;
				var newlast ;
				var newunit ;
 				$(login).closest ('p').hide();  // This hides the closest P above the login field,
								//    which is the p containing the login field.
								
									 $('input:radio[name=ws_plugin__s2member_custom_reg_field_north_south]').click(function() {
   	valNS = $('input:radio[name=ws_plugin__s2member_custom_reg_field_north_south]:checked').val();
  	$(login).val( valNS + newunit + "_" + newfirst + "_" + newlast + "_" + valRES  );
 }); 
						
						$('input:radio[name=ws_plugin__s2member_custom_reg_field_resident_status]').click(function() {
   	valRES = $('input:radio[name=ws_plugin__s2member_custom_reg_field_resident_status]:checked').val();
  	$(login).val( valNS + newunit + "_" + newfirst + "_" + newlast + "_" + valRES  );
}); 	
 
	$ (firstname).blur (function () 
	{
		newfirst = $.trim( $(firstname).val() );
		newfirst = newfirst.split(' ').join('');
		$(login).val( valNS + newunit + "_" + newfirst + "_" + newlast + "_" + valRES  );
 	}); 
 	
	$ (lastname).blur (function () 
	{
		newlast  = $.trim( $(lastname).val() );
		newlast = newlast.split(' ').join('');
		$(login).val( valNS + newunit + "_" + newfirst + "_" + newlast + "_" + valRES  );
	}); 
	
	$ (unitnumber).blur (function () 
	{
		newunit  = $.trim( $(unitnumber).val() );
		$(login).val( valNS + newunit + "_" + newfirst + "_" + newlast + "_" + valRES  );
	});                           
}
 });
        }) (jQuery);
           </script>
<?php
     }
?>

Thanks again to Jason and Raam for the code model.