[CB] Predefined Posting Template/Form

[Ross]

I know this one is requested a lot because we've never had a version of it in the database here. Well now we have. Hopefully there won't be too many bugs with it.
Anyway, Board Footer. Editting instructions can be found at the bottom of the post. Any problems, use the Code Support Board.

<script type="text/javascript">
<!--

/* Predefined Posting Template/Form
    Created by Ross of PBS
    Please do not repost outside of PBS without permission */

var _title = 'New Code Request';

var _description = 'Please ensure you have a read of the <a href="URL">Rules</a> before posting';

var _fields = new Array(); var _f = 0;
    _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);
    _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);
    _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);
    _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);

var _widths = ['100%', '20%', '40%', '40%'];

var _posting_form = {

   errors: new Array(),

   init: function() {
       this.create_form();
   },
   
   create_form: function() {
       // Create new post layout
       var _holder = document.createElement('table');
       _holder.setAttribute('className', 'bordercolor');
       _holder.setAttribute('class', 'bordercolor');
       _holder.setAttribute('cellSpacing','1');
       _holder.setAttribute('cellPadding', '4');
       _holder.setAttribute('align', 'center');
       _holder.setAttribute('width', _widths[0]);
       _holder.setAttribute('id', 'post_form_holder');
       _holder.appendChild(document.createElement('tbody'));
       _holder.firstChild.appendChild( document.createElement('tr') ).appendChild( document.createElement('td') ).appendChild( document.createElement('font') );
       _holder.firstChild.lastChild.lastChild.className = 'titlebg';
       _holder.firstChild.lastChild.lastChild.colSpan = '3';
       _holder.firstChild.lastChild.lastChild.lastChild.size = '2';
       _holder.firstChild.lastChild.lastChild.lastChild.appendChild(document.createTextNode(_title));
       if(_description) {
           _holder.firstChild.appendChild( document.createElement('tr') ).appendChild( document.createElement('td') ).appendChild( document.createElement('font') );
           _holder.firstChild.lastChild.lastChild.setAttribute('className', 'windowbg');
           _holder.firstChild.lastChild.lastChild.setAttribute('class', 'windowbg');
           _holder.firstChild.lastChild.lastChild.setAttribute('colSpan', '3');
           _holder.firstChild.lastChild.lastChild.lastChild.setAttribute('size', '2');
           _holder.firstChild.lastChild.lastChild.lastChild.innerHTML = _description;
       }
       
       for(_f=0; _f<_fields.length; _f++) {
           switch(_fields[_f][0]) {
               case 'textarea' :
                   var _tmp = document.createElement('textarea');
               break;
               
               case 'select' :
                   var _tmp = document.createElement('select');
                   for(_o=0; _o<_fields[_f][3].length; _o++) {
                       _tmp.options[_o] = new Option(_fields[_f][3][_o], _fields[_f][3][_o]);
                   }
               break;
               
               default :
                   var _tmp = document.createElement('input');
                   _tmp.type = 'text';
                   if("undefined" != typeof _fields[_f][3] && _fields[_f][3] != "")
                       _tmp.setAttribute('value', _fields[_f][3]);
               break;
           }
           _tmp.setAttribute('id', _f);
           if("undefined" != typeof _fields[_f][2] && _fields[_f][2].length > 0) {
               for(_a=0; _a<_fields[_f][2].length; _a++) {
                   _tmp.setAttribute(_fields[_f][2][_a++], _fields[_f][2][_a]);
               }
           }
           var _class = 'windowbg' + ((_f % 2 == 0)? '2' : '');
           var _row = document.createElement('tr');
           _row.appendChild(document.createElement('td'));
           _row.lastChild.setAttribute('class', _class);
           _row.lastChild.setAttribute('className', _class);
           _row.lastChild.setAttribute('vAlign', 'top');
           _row.lastChild.setAttribute('width', _widths[1]);
           _row.lastChild.appendChild(document.createElement('font'));
           _row.lastChild.lastChild.setAttribute('size', '2');
           _row.lastChild.lastChild.style.fontWeight = 'bold';
           _row.lastChild.lastChild.appendChild(document.createTextNode(_fields[_f][1] + ':'));
           _row.appendChild(document.createElement('td'));
           _row.lastChild.setAttribute('class', _class);
           _row.lastChild.setAttribute('className', _class);
           _row.lastChild.setAttribute('width', _widths[2]);
           _row.lastChild.appendChild(document.createElement('font'));
           _row.lastChild.lastChild.setAttribute('size', '2');
           _row.lastChild.lastChild.appendChild(_tmp);
           _row.appendChild(document.createElement('td'));
           _row.lastChild.setAttribute('class', _class);
           _row.lastChild.setAttribute('className', _class);
           _row.lastChild.setAttribute('vAlign', 'top');
           _row.lastChild.setAttribute('width', _widths[3]);
           _row.lastChild.appendChild(document.createElement('font'));
           _row.lastChild.lastChild.size = '1';
           _row.lastChild.lastChild.appendChild(document.createTextNode(_fields[_f][4]));
           _holder.firstChild.appendChild(_row);
       }
       var _submit = document.createElement('tr');
       _submit.appendChild(document.createElement('td'));
       _submit.lastChild.setAttribute('class', 'windowbg' + (((_f+1) % 2 == 0)? '' : '2'));
       _submit.lastChild.setAttribute('className', 'windowbg' + (((_f+1) % 2 == 0)? '' : '2'));
       _submit.lastChild.setAttribute('align', 'center');
       _submit.lastChild.setAttribute('colSpan', 3);
       var _button = document.createElement('input');
       _button.setAttribute('type', 'button');
       _button.setAttribute('value', 'Post Message');
       _button.onclick = function() { _posting_form.post_it(); };
       _submit.lastChild.appendChild(_button);
       _holder.firstChild.appendChild(_submit);
       
       var _tables = document.getElementsByTagName('table');
       for(_t=0; _t<_tables.length; _t++) {
           if(_tables.item(_t).cellPadding == '0' && _tables.item(_t).className == 'bordercolor' && _tables.item(_t).parentNode.nodeName.toLowerCase() == 'form') {
               _tables.item(_t).style.display = 'none';
               _tables.item(_t).parentNode.appendChild(_holder);
               break;
           }
       }
   },
   
   post_it: function() {
       // create message and attempt to post it
       this.errors = new Array();
       document.postForm.message.value = document.postForm.subject.value = '';
       var _sub = document.getElementById('0').value;
       _fields[0][5] = true;
       document.postForm.subject.value    = _sub;
       for(_f=0; _f<_fields.length; _f++) {
           if(document.getElementById(_f)) {
               _value = document.getElementById(_f).value;
               if(!_value || _value.match(/^\s*$/)) {
                   if(_f > 0 && _fields[_f][5])
                       this.show_error('You have left the <b>' + _fields[_f][1] + '</b> option empty. This is a required field and as such must contain a value.');
                   else
                       _value = '[i]None[/i]';
               }
               document.postForm.message.value += '[b]' + _fields[_f][1] + ':[/b] ' + _value + '\n\n';
           }
       }
       if(this.errors.length == 0)
           document.postForm.submit(true);
       else
           this.show_error();
   },
   
   show_error: function() {
       if("undefined" != typeof arguments[0] && arguments[0]) {
           this.errors.push(arguments[0]);
       } else {
           // Show Errors
           if(document.getElementById('error_holder')) {
               document.getElementById('error_holder').innerHTML = this.errors.join("<br />");
           } else {
               var _error_holder = document.createElement('table');
               _error_holder.className = 'bordercolor';
               _error_holder.cellSpacing= '1';
               _error_holder.cellPadding = '4';
               _error_holder.align = 'center';
               _error_holder.width = _widths[0];
               _error_holder.appendChild (document.createElement('tbody'));
               _error_holder.firstChild.appendChild (document.createElement('tr')).appendChild (document.createElement('td')).appendChild (document.createElement('font'));
               _error_holder.firstChild.lastChild.lastChild.className='titlebg';
               _error_holder.firstChild.lastChild.lastChild.lastChild.setAttribute('size', '2');
               _error_holder.firstChild.lastChild.lastChild.lastChild.innerHTML='An Error Has Occured';
               _error_holder.firstChild.appendChild (document.createElement('tr')).appendChild(document.createElement('td')).appendChild (document.createElement('font'));
               _error_holder.firstChild.lastChild.lastChild.className='windowbg';
               _error_holder.firstChild.lastChild.lastChild.lastChild.setAttribute('size', '2');
               _error_holder.firstChild.lastChild.lastChild.lastChild.setAttribute('id', 'error_holder');
               _error_holder.firstChild.lastChild.lastChild.lastChild.innerHTML=this.errors.join("<br />");
               var _holder = document.getElementById('post_form_holder');
               _holder.parentNode.insertBefore(_error_holder, _holder);
               _holder.parentNode.insertBefore(document.createElement('br'), _holder);
           }
       }
   }
}


if(document.postForm && location.href.match(/action=post(#\w+)?$/) && pb_username != 'Guest') {
   _posting_form.init();
}

//-->
</script>



The part highlighted in blue is used as the title of the form. ie, "New Code Request" or "Create Character"

The part highlighted in purple is the short description shown at the top of the form. Here you can give users some details about what to do first or how to use the form. If you want, you can leave this option empty and it won't show.

The widths in green are just used for the width of the request form and then each of the columns. There should be no need to change any of them.

The parts highlighted in red are the actual posting fields. There are 3 types of field you can use, an example of each is given below where:

The blue parts are the attributes for this field, unless you know HTML it's probably best to leave them as they are.
The purple true/flase sets if the field is a required field or not (false means it can be left blank).

You can list as many different fields as necessary where shown above. The first field will always be the subject of the posted message. Some general rules to remember when editing these fields are that you cannot place an apostrophe in any of the fields without first escaping it with a backslash \'. Also, you cannot put in any line breaks/returns by pressing the enter key, to insert a new line into a description use <br />

Single Line Input:

_fields[_f++] = new Array('input', 'Field Name, ie. "Character Name" or "Description"', ['size', 40, 'maxLength', 50], 'Default Value filled in when the form loads. Can be left blank', 'A short description of what the field is for', false);


Drop down menu:

_fields[_f++] = new Array('select', 'Field Name, ie. "Gender" or "Type"', [], ['All Pages', 'Main Page', 'Mini-Profile', 'Info Center', 'Private Messaging', 'Profile', 'Posting', 'Thread Listing', 'Welcome Table', 'Other'], 'A short description of what the field is for.', true);

Here, the red represents the different options. Each option should be wrapped in single quotation marks (') and seperated by a comma (,)


Multiple-Line Text Area:

_fields[_f++] = new Array('textarea', 'Field Name, ie. "History" or "Further Details"', ['cols', 40, 'rows', 10], 'Default Value', 'A short description of what the field is for.', false);

Here, the red is the number of rows the textarea has.


05.24.10 - Edit for pre v5 changes; coding by SubDevo