vForums Support > Programming & Coding :: Code Requests & Support :: > Character Bio Form (please?)
Character Bio Form (please?) - Posted By Nick (nickb) on 27th Nov 09 at 6:45am
Code:
Select All
 
  1. <script type="text/javascript">
  2. <!--
  3. /* Predefined Posting Template/Form
  4.     Created by Ross of vForums 
  5.     http://virtualforums.co.uk
  6.     Please do not repost outside of
  7.     vForums support without permission */
  8. var _title = 'New Code Request';
  9. var _description = 'Please ensure you have a read of the <a href="URL">Rules</a> before posting';
  10. var _fields = new Array(); var _f = 0;
  11.     _fields[_f++] = new Array('input', 'Description', ['size', 40, 'maxLength', 50], '', 'Please give a short description of what it is you\'re after. Include any relevant keywords.', false);
  12.     _fields[_f++] = new Array('select', 'Type', false, ['All Pages', 'Main Page', 'Mini-Profile', 'Info Center', 'Private Messaging', 'Profile', 'Posting', 'Thread Listing', 'Welcome Table', 'Other'], 'Select the category/area that best fits the type of code you\'re after.', true);
  13.     _fields[_f++] = new Array('input', 'Example', ['size', 40, 'maxLength', 200], false, 'If you have an example of what you want to achieve, please link to it here. This can be anything from an image of what you need to a link to a forum using the code you want.', false);
  14.     _fields[_f++] = new Array('textarea', 'Request Details', ['cols', 40, 'rows', 10], false, 'Please give as much information as possible about your request. The more information you give now, the easier it will be for someone to fill your request.', true);
  15. var _widths = ['100%', '20%', '40%', '40%'];
  16. var _posting_form = {
  17.     errors: new Array(),
  18.     init: function() {
  19.         this.create_form();
  20.     },
  21.     
  22.     create_form: function() {
  23.         // Create new post layout
  24.         var _holder = document.createElement('table');
  25.         _holder.setAttribute('className', 'border');
  26.         _holder.setAttribute('class', 'border');
  27.         _holder.setAttribute('cellSpacing','1');
  28.         _holder.setAttribute('cellPadding', '4');
  29.         _holder.setAttribute('align', 'center');
  30.         _holder.setAttribute('width', _widths[0]);
  31.         _holder.setAttribute('id', 'post_form_holder');
  32.         _holder.appendChild(document.createElement('tbody'));
  33.         _holder.firstChild.appendChild( document.createElement('tr') ).appendChild( document.createElement('td') ).appendChild( document.createElement('font') );
  34.         _holder.firstChild.lastChild.lastChild.className = 'title1';
  35.         _holder.firstChild.lastChild.lastChild.colSpan = '3';
  36.         _holder.firstChild.lastChild.lastChild.lastChild.size = '2';
  37.         _holder.firstChild.lastChild.lastChild.lastChild.appendChild(document.createTextNode(_title));
  38.         if(_description) {
  39.             _holder.firstChild.appendChild( document.createElement('tr') ).appendChild( document.createElement('td') ).appendChild( document.createElement('font') );
  40.             _holder.firstChild.lastChild.lastChild.setAttribute('className', 'window1');
  41.             _holder.firstChild.lastChild.lastChild.setAttribute('class', 'window1');
  42.             _holder.firstChild.lastChild.lastChild.setAttribute('colSpan', '3');
  43.             _holder.firstChild.lastChild.lastChild.lastChild.setAttribute('size', '2');
  44.             _holder.firstChild.lastChild.lastChild.lastChild.innerHTML = _description;
  45.         }
  46.         
  47.         for(_f=0; _f<_fields.length; _f++) {
  48.             switch(_fields[_f][0]) {
  49.                 case 'textarea' :
  50.                     var _tmp = document.createElement('textarea');
  51.                 break;
  52.                 
  53.                 case 'select' :
  54.                     var _tmp = document.createElement('select');
  55.                     for(_o=0; _o<_fields[_f][3].length; _o++) {
  56.                         _tmp.options[_o] = new Option(_fields[_f][3][_o], _fields[_f][3][_o]);
  57.                     }
  58.                 break;
  59.                 
  60.                 default :
  61.                     var _tmp = document.createElement('input');
  62.                     _tmp.type = 'text';
  63.                     if("undefined" != typeof _fields[_f][3] && _fields[_f][3] != "")
  64.                         _tmp.setAttribute('value', _fields[_f][3]); 
  65.                 break;
  66.             }
  67.             _tmp.setAttribute('id', _f);
  68.             if("undefined" != typeof _fields[_f][2] && _fields[_f][2].length > 0) {
  69.                 for(_a=0; _a<_fields[_f][2].length; _a++) {
  70.                     _tmp.setAttribute(_fields[_f][2][_a++], _fields[_f][2][_a]);
  71.                 }
  72.             }
  73.             var _class = 'window' + ((_f % 2 == 0)? '2' : '1');
  74.             var _row = document.createElement('tr');
  75.             _row.appendChild(document.createElement('td'));
  76.             _row.lastChild.setAttribute('class', _class);
  77.             _row.lastChild.setAttribute('className', _class);
  78.             _row.lastChild.setAttribute('vAlign', 'top');
  79.             _row.lastChild.setAttribute('width', _widths[1]);
  80.             _row.lastChild.appendChild(document.createElement('font'));
  81.             _row.lastChild.lastChild.setAttribute('size', '2');
  82.             _row.lastChild.lastChild.style.fontWeight = 'bold';
  83.             _row.lastChild.lastChild.appendChild(document.createTextNode(_fields[_f][1] + ':'));
  84.             _row.appendChild(document.createElement('td'));
  85.             _row.lastChild.setAttribute('class', _class);
  86.             _row.lastChild.setAttribute('className', _class);
  87.             _row.lastChild.setAttribute('width', _widths[2]);
  88.             _row.lastChild.appendChild(document.createElement('font'));
  89.             _row.lastChild.lastChild.setAttribute('size', '2');
  90.             _row.lastChild.lastChild.appendChild(_tmp);
  91.             _row.appendChild(document.createElement('td'));
  92.             _row.lastChild.setAttribute('class', _class);
  93.             _row.lastChild.setAttribute('className', _class);
  94.             _row.lastChild.setAttribute('vAlign', 'top');
  95.             _row.lastChild.setAttribute('width', _widths[3]);
  96.             _row.lastChild.appendChild(document.createElement('font'));
  97.             _row.lastChild.lastChild.size = '1';
  98.             _row.lastChild.lastChild.appendChild(document.createTextNode(_fields[_f][4]));
  99.             _holder.firstChild.appendChild(_row);
  100.         }
  101.         var _submit = document.createElement('tr');
  102.         _submit.appendChild(document.createElement('td'));
  103.         _submit.lastChild.setAttribute('class', 'window' + (((_f+1) % 2 == 0)? '1' : '2'));
  104.         _submit.lastChild.setAttribute('className', 'window' + (((_f+1) % 2 == 0)? '1' : '2'));
  105.         _submit.lastChild.setAttribute('align', 'center');
  106.         _submit.lastChild.setAttribute('colSpan', 3);
  107.         var _button = document.createElement('input');
  108.         _button.setAttribute('type', 'button');
  109.         _button.setAttribute('value', 'Post Message');
  110.         _button.onclick = function() { _posting_form.post_it(); };
  111.         _submit.lastChild.appendChild(_button);
  112.         _holder.firstChild.appendChild(_submit);
  113.         document.post_form.style.display = 'none';
  114.         document.post_form.parentNode.insertBefore(_holder,  document.post_form);
  115.     },
  116.     
  117.     post_it: function() {
  118.         // create message and attempt to post it
  119.         this.errors = new Array();
  120.         document.post_form.message.value = document.post_form.subject.value = '';
  121.         var _sub = document.getElementById('0').value;
  122.         _fields[0][5] = true;
  123.         document.post_form.subject.value    = _sub;
  124.         for(_f=0; _f<_fields.length; _f++) {
  125.             if(document.getElementById(_f)) {
  126.                 _value = document.getElementById(_f).value;
  127.                 if(!_value || _value.match(/^s*$/)) {
  128.                     if(_f > 0 && _fields[_f][5])
  129.                         this.show_error('You have left the ' + _fields[_f][1] + ' option empty. This is a required field and as such must contain a value.');
  130.                     else
  131.                         _value = 'None';
  132.                 }
  133.                 document.post_form.message.value += '' + _fields[_f][1] + ': ' + _value + 'nn';
  134.             }
  135.         }
  136.         if(this.errors.length == 0)
  137.             document.post_form.post.click();
  138.         else
  139.             this.show_error();
  140.     },
  141.     
  142.     show_error: function() {
  143.         if("undefined" != typeof arguments[0] && arguments[0]) {
  144.             this.errors.push(arguments[0]);
  145.         } else {
  146.             // Show Errors
  147.             if(document.getElementById('status_holder')) {
  148.                 document.getElementById('status_holder_title').innerHTML = "An Error Has Occured";
  149.                 document.getElementById('status_holder_message').innerHTML = this.errors.join("<br />");
  150.                 document.getElementById('status_holder').style.display = 'block';
  151.             }
  152.         }
  153.     }
  154. }
  155. if(document.post_form && location.href.match(/action\/post\/?$/) && vf_username != 'Guest') {
  156.     _posting_form.init();
  157. }
  158. //-->
  159. </script>
 


[NOTE: * indicates category e.g. Appearance*, but the * symbol must be left out when in the code. There should be NO text fields in Category. Thanks.]

Character Bio:

Name:
Age:
Gender:
Race: (Human, Cetra, Other)
Alignment: (Good/Neutral/Evil)
Occupation:
Appearance*:
Eyes:
Hair:
Build:
Height:
Abilities/Skills:
Weapon/s: (Number of Slots)
Armour/Clothes: (Number of Slots)
Strengths:
Weaknesses: (1 for every 2 strengths)
Current Materia*:
Level:
Summons:
Magics:
Commands:
Support:
Independent:
Reaction:
History:
Character Goals:
Important Notes:
Starting Location:
Re: Character Bio Form (please?) - Posted By Nick (nickb) on 16th Dec 09 at 9:04pm
Bump?
Re: Character Bio Form (please?) - Posted By Michael (wrighty) on 17th Dec 09 at 1:47am
I don't get why you can't do this ... {Unsure}
Re: Character Bio Form (please?) - Posted By Nick (nickb) on 17th Dec 09 at 2:51am
Don't know how to make the categories blank with no fields. {Tongue Out} Last time I tried it broke the code.
Re: Character Bio Form (please?) - Posted By Michael (wrighty) on 17th Dec 09 at 3:08am
Ah, I see what you mean, you want it like a 'title' {Smile}

I'll take a look soon! {Smile}
Re: Character Bio Form (please?) - Posted By Michael (wrighty) on 17th Dec 09 at 3:27am
Code:
Select All
 
  1. <script type="text/javascript">
  2. <!--
  3. /* Predefined Posting Template/Form
  4.     Created by Ross of vForums 
  5.     http://virtualforums.co.uk
  6.     Please do not repost outside of
  7.     vForums support without permission */
  8. var _title = 'New Code Request';
  9. var _description = 'Please ensure you have a read of the <a href="URL">Rules</a> before posting';
  10. var _fields = new Array(); var _f = 0;
  11.     _fields[_f++] = new Array('input', 'Description', ['size', 40, 'maxLength', 50], '', 'Please give a short description of what it is you\'re after. Include any relevant keywords.', false);
  12.     _fields[_f++] = new Array('select', 'Type', false, ['All Pages', 'Main Page', 'Mini-Profile', 'Info Center', 'Private Messaging', 'Profile', 'Posting', 'Thread Listing', 'Welcome Table', 'Other'], 'Select the category/area that best fits the type of code you\'re after.', true);
  13.     _fields[_f++] = new Array('title', 'This is a title');
  14.     _fields[_f++] = new Array('input', 'Example', ['size', 40, 'maxLength', 200], false, 'If you have an example of what you want to achieve, please link to it here. This can be anything from an image of what you need to a link to a forum using the code you want.', false);
  15.     _fields[_f++] = new Array('textarea', 'Request Details', ['cols', 40, 'rows', 10], false, 'Please give as much information as possible about your request. The more information you give now, the easier it will be for someone to fill your request.', true);
  16. var _widths = ['100%', '20%', '40%', '40%'];
  17. var _posting_form = {
  18.     errors: new Array(),
  19.     init: function() {
  20.         this.create_form();
  21.     },
  22.     
  23.     create_form: function() {
  24.         // Create new post layout
  25.         var _holder = document.createElement('table');
  26.         _holder.setAttribute('className', 'border');
  27.         _holder.setAttribute('class', 'border');
  28.         _holder.setAttribute('cellSpacing','1');
  29.         _holder.setAttribute('cellPadding', '4');
  30.         _holder.setAttribute('align', 'center');
  31.         _holder.setAttribute('width', _widths[0]);
  32.         _holder.setAttribute('id', 'post_form_holder');
  33.         _holder.appendChild(document.createElement('tbody'));
  34.         _holder.firstChild.appendChild( document.createElement('tr') ).appendChild( document.createElement('td') ).appendChild( document.createElement('font') );
  35.         _holder.firstChild.lastChild.lastChild.className = 'title1';
  36.         _holder.firstChild.lastChild.lastChild.colSpan = '3';
  37.         _holder.firstChild.lastChild.lastChild.lastChild.size = '2';
  38.         _holder.firstChild.lastChild.lastChild.lastChild.appendChild(document.createTextNode(_title));
  39.         if(_description) {
  40.             _holder.firstChild.appendChild( document.createElement('tr') ).appendChild( document.createElement('td') ).appendChild( document.createElement('font') );
  41.             _holder.firstChild.lastChild.lastChild.setAttribute('className', 'window1');
  42.             _holder.firstChild.lastChild.lastChild.setAttribute('class', 'window1');
  43.             _holder.firstChild.lastChild.lastChild.setAttribute('colSpan', '3');
  44.             _holder.firstChild.lastChild.lastChild.lastChild.setAttribute('size', '2');
  45.             _holder.firstChild.lastChild.lastChild.lastChild.innerHTML = _description;
  46.         }
  47.         
  48.         for(_f=0; _f<_fields.length; _f++) {
  49.             switch(_fields[_f][0]) {
  50.                 case 'textarea' :
  51.                     var _tmp = document.createElement('textarea');
  52.                 break;
  53.                 case 'select' :
  54.                     var _tmp = document.createElement('select');
  55.                     for(_o=0; _o<_fields[_f][3].length; _o++) {
  56.                         _tmp.options[_o] = new Option(_fields[_f][3][_o], _fields[_f][3][_o]);
  57.                     }
  58.                 break;
  59.                 default :
  60.                     var _tmp = document.createElement('input');
  61.                     _tmp.type = 'text';
  62.                     if("undefined" != typeof _fields[_f][3] && _fields[_f][3] != "")
  63.                         _tmp.setAttribute('value', _fields[_f][3]); 
  64.                 break;
  65.             }
  66.             _tmp.setAttribute('id', _f);
  67.             if("undefined" != typeof _fields[_f][2] && _fields[_f][2].length > 0) {
  68.                 for(_a=0; _a<_fields[_f][2].length; _a++) {
  69.                     _tmp.setAttribute(_fields[_f][2][_a++], _fields[_f][2][_a]);
  70.                 }
  71.             }
  72.             var _class = (_fields[_f][0] == 'title'? 'title1' : 'window' + ((_f % 2 == 0)? '2' : '1'));
  73.             var _row = document.createElement('tr');
  74.             _row.appendChild(document.createElement('td'));
  75.             _row.lastChild.setAttribute('class', _class);
  76.             _row.lastChild.setAttribute('className', _class);
  77.             _row.lastChild.setAttribute('width', _widths[1]);
  78.             _row.lastChild.appendChild(document.createElement('font'));
  79.             _row.lastChild.lastChild.setAttribute('size', '2');
  80.             _row.lastChild.lastChild.style.fontWeight = 'bold';
  81.             _row.lastChild.lastChild.appendChild(document.createTextNode(_fields[_f][1] + ':'));
  82.             if(_fields[_f][0] == 'title'){
  83.                 _row.lastChild.lastChild.setAttribute('colSpan', 3);
  84.             }else{
  85.                 _row.lastChild.setAttribute('vAlign', 'top');
  86.                 _row.appendChild(document.createElement('td'));
  87.                 _row.lastChild.setAttribute('class', _class);
  88.                 _row.lastChild.setAttribute('className', _class);
  89.                 _row.lastChild.setAttribute('width', _widths[2]);
  90.                 _row.lastChild.appendChild(document.createElement('font'));
  91.                 _row.lastChild.lastChild.setAttribute('size', '2');
  92.                 _row.lastChild.lastChild.appendChild(_tmp);
  93.                 _row.appendChild(document.createElement('td'));
  94.                 _row.lastChild.setAttribute('class', _class);
  95.                 _row.lastChild.setAttribute('className', _class);
  96.                 _row.lastChild.setAttribute('vAlign', 'top');
  97.                 _row.lastChild.setAttribute('width', _widths[3]);
  98.                 _row.lastChild.appendChild(document.createElement('font'));
  99.                 _row.lastChild.lastChild.size = '1';
  100.                 _row.lastChild.lastChild.appendChild(document.createTextNode(_fields[_f][4]));
  101.             }
  102.             _holder.firstChild.appendChild(_row);
  103.         }
  104.         var _submit = document.createElement('tr');
  105.         _submit.appendChild(document.createElement('td'));
  106.         _submit.lastChild.setAttribute('class', 'window' + (((_f+1) % 2 == 0)? '1' : '2'));
  107.         _submit.lastChild.setAttribute('className', 'window' + (((_f+1) % 2 == 0)? '1' : '2'));
  108.         _submit.lastChild.setAttribute('align', 'center');
  109.         _submit.lastChild.setAttribute('colSpan', 3);
  110.         var _button = document.createElement('input');
  111.         _button.setAttribute('type', 'button');
  112.         _button.setAttribute('value', 'Post Message');
  113.         _button.onclick = function() { _posting_form.post_it(); };
  114.         _submit.lastChild.appendChild(_button);
  115.         _holder.firstChild.appendChild(_submit);
  116.         document.post_form.style.display = 'none';
  117.         document.post_form.parentNode.insertBefore(_holder,  document.post_form);
  118.     },
  119.     
  120.     post_it: function() {
  121.         // create message and attempt to post it
  122.         this.errors = new Array();
  123.         document.post_form.message.value = document.post_form.subject.value = '';
  124.         var _sub = document.getElementById('0').value;
  125.         _fields[0][5] = true;
  126.         document.post_form.subject.value    = _sub;
  127.         for(_f=0; _f<_fields.length; _f++) {
  128.             if(document.getElementById(_f)) {
  129.                 _value = document.getElementById(_f).value;
  130.                 if(!_value || _value.match(/^s*$/)) {
  131.                     if(_f > 0 && _fields[_f][5])
  132.                         this.show_error('You have left the ' + _fields[_f][1] + ' option empty. This is a required field and as such must contain a value.');
  133.                     else
  134.                         _value = 'None';
  135.                 }
  136.                 document.post_form.message.value += '' + _fields[_f][1] + ': ' + _value + 'nn';
  137.             }
  138.         }
  139.         if(this.errors.length == 0)
  140.             document.post_form.post.click();
  141.         else
  142.             this.show_error();
  143.     },
  144.     
  145.     show_error: function() {
  146.         if("undefined" != typeof arguments[0] && arguments[0]) {
  147.             this.errors.push(arguments[0]);
  148.         } else {
  149.             // Show Errors
  150.             if(document.getElementById('status_holder')) {
  151.                 document.getElementById('status_holder_title').innerHTML = "An Error Has Occured";
  152.                 document.getElementById('status_holder_message').innerHTML = this.errors.join("<br />");
  153.                 document.getElementById('status_holder').style.display = 'block';
  154.             }
  155.         }
  156.     }
  157. }
  158. if(document.post_form && location.href.match(/action\/post\/?/) && vf_username != 'Guest') {
  159.     _posting_form.init();
  160. }
  161. //-->
  162. </script>
 

Use that.

I've added in an option for you to be able to use:
_fields[_f++] = new Array('title', 'This is a title');

Should work {Smile}
Re: Character Bio Form (please?) - Posted By Nick (nickb) on 17th Dec 09 at 3:33am
Ok it worked, but this shows: http://i185.photobucket.com/albums/x20/magedesigns/misc/posting.jpg But I don't think it would actually matter as it's going on a black skin anyways, but just in case if there was a lighter skin, what could fix it?
Re: Character Bio Form (please?) - Posted By Michael (wrighty) on 17th Dec 09 at 3:37am
Woops.

Change:
if(_fields[_f][0] == 'title'){
_row.lastChild.lastChild.setAttribute('colSpan', 3);

To:

if(_fields[_f][0] == 'title'){
_row.lastChild.setAttribute('colSpan', 3);
Re: Character Bio Form (please?) - Posted By Nick (nickb) on 17th Dec 09 at 3:55am
Fixed! Thanks. {Smile}
Re: Character Bio Form (please?) - Posted By Michael (wrighty) on 17th Dec 09 at 3:57am
=D

Glad it's sorted.
Re: Character Bio Form (please?) - Posted By Nick (nickb) on 17th Dec 09 at 4:35am
Yep! and it's nice looking too! {Grin} The Bio form, looks really good on the site! {Smile}
Re: Character Bio Form (please?) - Posted By Michael (wrighty) on 17th Dec 09 at 5:10am
Glad it works and looks good! {Smile}