asked on

Adding a 0 to a string in javascript/jquery

Greetings,

Using a plugin, I'm getting data from social networking websites such as username, gender, birthdate and then inserting them using jquery/javascript into a webform on my website.

I need the birthmonth and birthday to be formatted with two digits thus, I should never see 5/3/1973 but rather 05/03/1973. Unfortunately, the month and day are returning with only one digit so for all dates (month & day) <10, I need add a leading zero.

So my question is: using jquery, what is the best way to add this leading zero to the returned data? I'm not sure the best way to do this or the best place in my code to do it:

First, I create new objects from the data obtained from the plugin:

onLoginHandler:function(eventObj) {
 logingygia.email=eventObj.user.email;
 logingygia.firstname=eventObj.user.firstName;
 logingygia.lastname=eventObj.user.lastName;
 logingygia.gender=eventObj.user.gender;
 logingygia.birthmonth=eventObj.user.birthMonth;
 logingygia.birthday=eventObj.user.birthDay;
 logingygia.birthyear=eventObj.user.birthYear;
 logingygia.city=eventObj.user.city;
 logingygia.state=eventObj.user.state;
 logingygia._fillFields();
},

Open in new window

The _fillFields() at the bottom of this function automatically inputs the data collected into my webform signup; the function looks like this:

_fillFields: function(){
 logingygia.fields.firstname.val(logingygia.firstname);
 logingygia.fields.lastname.val(logingygia.lastname);
 logingygia.fields.email.val(logingygia.email);
  if (logingygia.gender == 'm') {
  	$('input[value="m"]').attr('checked',true);
  		}
  		else {
  			$('input[value="f"]').attr('checked',true);
  		};
 logingygia.fields.birthmonth.val(logingygia.birthmonth);
 logingygia.fields.birthday.val(logingygia.birthday);
 logingygia.fields.birthyear.val(logingygia.birthyear);
 }
};

Open in new window

Also, the input for the month and day is a text field with a maxlength of 2 and looks like this:

<tr>
          <td id="field-birthday" class="tags-form"></td>
                  <td>                                        
                                           
               <input class="campos-tabla" type="hidden" name="start" id="txtDate" value="" />
                                           
            <input class="campos-tabla" maxlength="2" type="text" name="start" id="datemonth" value="" style="width: 20px; height: 12px;" />
       <input class="campos-tabla" maxlength="2" type="text" name="start" id="dateday" value="" style="width: 20px; height: 12px;"/>
      <input class="campos-tabla" maxlength="4" type="text" name="start" id="dateyear" value="" style="width: 38px; height: 12px;"/>
<br/><span id="formattext">* Format: mm/dd/yy </span> 
             </td>
        </tr>

Open in new window

Incidentally, I had tried to make the following function work to format the month and day but I was unsuccessful:

_formatDate:function(){
 if (logingygia.birthyear > 0){
 var formatedmonth= (logingygia.birthmonth < 10 ? '0' : '') + logingygia.birthmonth;
 var formatedday= (logingygia.birthday < 10 ? '0' : '') + logingygia.birthmonth;
 return formatedmonth, formatedday;
 	}
 	else{return '';}
 },

Open in new window

So I'm open to any ideas of the best way to do this; let me know if any more info is needed.

SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

don't forget month start from 0 with january and end with 11 for december : http://www.w3schools.com/jsref/jsref_getmonth.asp

max7

ASKER

Thanks for the reply, leakim971.

>>>with :
function d2(n) {
return (n<10)?"0"+n:n;

So I tried what I *think* you were suggesting but it did not work. Here's what I did:

function d2(n){
 var formatedmonth= d2(logingygia.birthmonth);
 var formatedday= d2(logingygia.birthday);
 return (n<10)? "0"+n:n;
 },

Open in new window

If that isn't what you intended, please show me what I did wrong.

leakim971

put the d2 function without any modification somewhere outside any function, so you can use it to format (two digits) numbers when needed :

_formatDate:function(){
		if(logingygia.birthyear > 0){
			return d2(logingygia.birthmonth) + d2(logingygia.birthday);
		}
		else {
			return '';
		}
	}

Open in new window

max7

ASKER

>>>put the d2 function without any modification somewhere outside any function

At the risk of seeming completely foolish, I'm missing something because it's still not working.

I rewrote _formatDate: function() as you have done in the last post, so I'm good
there.

But no matter where I place the function d2(n), it doesn't work.

For example, following your instruction to put it "somewhere outside any
function", I placed at the end here:

_fillFields: function(){
 logingygia.fields.firstname.val(logingygia.firstname);
 logingygia.fields.lastname.val(logingygia.lastname);
 logingygia.fields.email.val(logingygia.email);
  if (logingygia.gender == 'm') {
  	$('input[value="m"]').attr('checked',true);
  		}
  		else {
  			$('input[value="f"]').attr('checked',true);
  		};
 logingygia.fields.birthmonth.val(logingygia.birthmonth);
 logingygia.fields.birthday.val(logingygia.birthday);
 logingygia.fields.birthyear.val(logingygia.birthyear);
 }
};
function d2(n) {
  return (n<10)?"0"+n:n;
}

Open in new window

Again, that's just one way I've tried to place it "outside" a function but nothing seems to work.

Michel Plungjan

It helps if you execute the function
...val(d2(...))

max7

ASKER

>>>It helps if you execute the function
...val(d2(...))

Do you mean:

if (logingygia.birthyear > 0){
return .val(d2(logingyg.birthmonth)) + .val(d2(logingygia.birthday));
}

Michel Plungjan

Nope sorry

Michel Plungjan

logingygia.fields.birthmonth.val(d2(logingygia.birthmonth))

max7

ASKER

Unfortunately, that didn't work either

Here's how it looks now:

_formatDate: function () {
	 if (logingygia.birthyear > 0){
		 return logingygia.fields.birthmonth.val(d2(logingygia.birthmonth)) + logingygia.fields.birthday.val(d2(logingygia.birthday));
 		}
 else {
	 	return '';}
 },

Open in new window

and here's the placement of the accompanying function:

_fillFields: function(){
 logingygia.fields.firstname.val(logingygia.firstname);
 logingygia.fields.lastname.val(logingygia.lastname);
 logingygia.fields.email.val(logingygia.email);
  if (logingygia.gender == 'm') {
  	$('input[value="m"]').attr('checked',true);
  		}
  		else {
  			$('input[value="f"]').attr('checked',true);
  		};
 logingygia.fields.birthmonth.val(logingygia.birthmonth);
 logingygia.fields.birthday.val(logingygia.birthday);
 logingygia.fields.birthyear.val(logingygia.birthyear);
 }
};
function d2(n) {
	  return (n<10)?"0"+n:n;
	}

Open in new window

So ... where did I go wrong?

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

max7

ASKER

Step back taken ... and it worked! Phew!

I can't thank you enough for your patience :)

max7

ASKER

If it isn't too much trouble, could someone give me a brief explanation of how this d2 function works to add the extra zero?

I believe it goes like this:

function d2 (n) { = 'n' represents whatever my variables happen to be so where I place the d2 is what will be modified by the following return statement.

return (n<10)?"0"+n:n; = this says: wherever d2 is, if 'n' is less than 10, add a 0 to it, otherwise leave it alone.

Did I get that right?

leakim971

>add a 0 to it

prefix it with the string "0"

>Did I get that right?
yes

max7

ASKER

Thanks again, I learned a lot :)

leakim971

You're welcome! Thanks for the points!