NetSuite, I have bones to pick with you! Why would you just put Name field on e-commerce registration form? WHY???!?!?!?!
Well, until they put in a fix for it, I do have a work around for those who wish to use it.
If you have already customized your webstore, most likely you have script files you are placing on the header of your web site theme.
For this purpose, create a new JavaScript file. For now create a function called checkPage().
Save and load it to your live hosting folder and place a reference to it at the header of your website theme.function checkPage() {}
Append functions to body tag:
Open your theme by going to Setup > Website > Theme > [Your Theme]
Under General tab, please reference to your new javascript file on "Addition to <head>".
Also under general tab, append your new function call next to "page_init()".
Your body tags' onload call should look like this: onload="page_init(); checkPage();"
Doing this will call your checkPage() every time different sections of your webstore is loaded.
Finding field info:
The name text box should have id and name of "name".
Sudo Coding:
What we wanna do is this:
1. Find name text box and do the following:
- Change type from text to hidden
- Clear onfocus and onchange. This may not be necessary
2. Create first name text box element
- Add id of fname (your choice)
3. Create last name text box element
- Add id of lname(your choice)
4. Place the two elements where original name text box was
5. Write validation script to check for missing values for the two.
6. IF validation passes, set the value of now HIDDEN name field with first and last name provided. (VERY IMPORTANT STEP)
Lets add the meat to our script:
I found that registration page has specific form called "newcust". Checking for existence of this form will be our queue to begin our modification process.
Oh BTW, if you know jQuery, more power to ya. It'll be much easier
Here is the code:
function checkPage() {
//find out if registration form exists
var regform = document.forms['newcust'];
if (regform !=null) {
var ntx = regform.name;
ntx.setAttribute('type','hidden');
ntx.onfocus='';
ntx.onchange='';
//get span node that wraps name text box
var cellspan = ntx.parentNode;
var fnamebox = document.createElement('input');
var txtNode = document.createTextNode(' ');
var lnamebox = document.createElement('input');
fnamebox.setAttribute('type','text');
fnamebox.setAttribute('id','fname');
fnamebox.setAttribute('onfocus',"txtChange('fname','First Name');");
fnamebox.setAttribute('onblur',"txtChange('fname','First Name');");
fnamebox.value='First Name';
lnamebox.setAttribute('type','text');
lnamebox.setAttribute('id','lname');
lnamebox.value='Last Name';
lnamebox.setAttribute('onfocus',"txtChange('lname','Last Name');");
lnamebox.setAttribute('onblur',"txtChange('lname','Last Name');");
cellspan.appendChild(fnamebox);
cellspan.appendChild(txtNode);
cellspan.appendChild(lnamebox);
}
}
//just helper function to switch between default values.
function txtChange(_id, _text) {
var el = document.getElementById(_id);
if (el && el.value == _text) {
el.value='';
}else if(el && el.value=='') {
el.value=_text;
}
}
This should do it. You just need to now add validation script (Sudo code step 5 & 6) for onsubmit.
If validtion passes, you can do something like this.
var fname=document.getElementById('fname').value;
var lname=document.getElementById('lname').value;
document.getElementById('name').value = fname+' '+lname;
This isn't the only way you can do this. I just wanted to show you guys that it IS possible to do this.
No comments:
Post a Comment