HTML Form that Posts Topics SOLVED

Technical Details

Forum version : phpBB2
Position : Founder
Concerned browser(s) : Other
Who the problem concerns : Yourself
Forum link : http://virtuous-realms.board-directory.net/h12-joining-application

Description of problem

Code:


            
      

<!-- Start Formoid form-->
<link rel="stylesheet" href="https://formoid.net/forms/b6/43660/formoid-biz-red.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://formoid.net/lib/iframe.js"></script>
<link rel="stylesheet" href="https://formoid.net/lib/form.css" type="text/css" />
<form action="/post?f=5&mode=newtopic" enctype="multipart/form-data"  name="post" method="post" action="/post?f=5&mode=newtopic" target="form" class="formoid-biz-red" style="background-color:#1A2223;font-size:14px;font-family:'Open Sans','Helvetica Neue', 'Helvetica', Arial, Verdana, sans-serif;color:#ECECEC;max-width:480px;min-width:150px" method="post"> <div class="title"><h2>Joining Application</h2></div>
   Subject :
   <input class="inputbox medium"  size="60" type="text" value="" name="subject" id="subject" /> <div id="textarea_content"><textarea class="inputbox" name="message" ></textarea>
     </div><br /><br />
    
  <div class="element-separator"><hr><h3 class="section-break-title">The Roleplayer</h3></div>
   <div class="element-input"><label class="title"></label><input class="large" type="text" name="input" placeholder="How did you find us?"/></div>
   <div class="element-number"><label class="title"></label><input class="medium" type="text" min="1" max="10" name="number" placeholder="Activity Level" value=""/></div>
   <div class="element-separator"><hr><h3 class="section-break-title">The Wolf</h3></div>
   <div class="element-input"><label class="title"></label><input class="large" type="text" name="input3" placeholder="Name"/></div>
   <div class="element-input"><label class="title"></label><input class="medium" type="text" name="input2" placeholder="Nicknames (if any)"/></div>
   <div class="element-input"><label class="title"></label><input class="medium" type="text" name="input4" placeholder="Age"/></div>
   <div class="element-checkbox"><label class="title">Gender</label>      <div class="column column2"><label><input type="checkbox" name="checkbox[]" value="Female"/ ><span>Female</span></label></div><span class="clearfix"></span>
      <div class="column column2"><label><input type="checkbox" name="checkbox[]" value="Male"/ ><span>Male</span></label></div><span class="clearfix"></span>
</div>
   <div class="element-input"><label class="title"></label><input class="large" type="text" name="input5" placeholder="Rank Desired"/></div>
   <div class="element-separator"><hr><h3 class="section-break-title">Appearance</h3></div>
   <div class="element-textarea"><label class="title"></label><textarea class="medium" name="textarea" cols="20" rows="5" placeholder="Describe your character's appearance."></textarea></div>
   <div class="element-input"><label class="title"></label><input class="large" type="text" name="input6" placeholder="Input Text"/></div>
   <div class="element-file"><label class="title"></label><label class="large" ><div class="button">Choose File</div><input type="file" class="file_input" name="file" /><div class="file_text">No file selected</div></label></div>
   <div class="element-separator"><hr><h3 class="section-break-title">Personality</h3></div>
   <div class="element-textarea"><label class="title"></label><textarea class="medium" name="textarea1" cols="20" rows="5" placeholder="Describe your character's personality."></textarea></div>
   <div class="element-textarea"><label class="title"></label><textarea class="medium" name="textarea2" cols="20" rows="5" placeholder="Describe your character's strengths & weaknesses."></textarea></div>
   <div class="element-separator"><hr><h3 class="section-break-title">History</h3></div>
   <div class="element-input"><label class="title"></label><input class="large" type="text" name="input7" placeholder="Birthplace"/></div>
   <div class="element-textarea"><label class="title"></label><textarea class="large" name="textarea3" cols="20" rows="5" placeholder="Describe your character's past here."></textarea></div>
   <div class="element-separator"><hr><h3 class="section-break-title">Relationships</h3></div>
   <div class="element-textarea"><label class="title"></label><textarea class="medium" name="textarea4" cols="20" rows="5" placeholder="Family"></textarea></div>
   <div class="element-input"><label class="title"></label><input class="medium" type="text" name="input8" placeholder="Crush"/></div>
   <div class="element-input"><label class="title"></label><input class="medium" type="text" name="input9" placeholder="Mate"/></div>
   <div class="element-input"><label class="title"></label><input class="large" type="text" name="input10" placeholder="Pups"/></div>
   <div class="element-textarea"><label class="title"></label><textarea class="medium" name="textarea6" cols="20" rows="5" placeholder="Friends"></textarea></div>
   <div class="element-textarea"><label class="title"></label><textarea class="medium" name="textarea5" cols="20" rows="5" placeholder="Enemies"></textarea></div>
   <div class="element-separator"><hr><h3 class="section-break-title">Final Notes</h3></div>
   <div class="element-checkbox"><label class="title">Do you agree with our rules?<span class="required">*</span></label>      <div class="column column2"><label><input type="checkbox" name="checkbox2[]" value="Yes"/ required="required"><span>Yes</span></label></div><span class="clearfix"></span>
      <div class="column column2"><label><input type="checkbox" name="checkbox2[]" value="No"/ required="required"><span>No</span></label></div><span class="clearfix"></span>
</div>
<!- stop here -->
          
      <input class="button1" type="submit" accesskey="s" tabindex="5" value="Submit Application" name="post" id="subButton" />
</form>

So, I created this form with a program, and used a few of the topics lying around here to help me figure out how to make this post a topic and I am really stuck. I know I need some java script or something...

ok i can write a script to post a new topic with all the info but i need the layout of how you want it to look when its posted ..also your file upload it doesn't upload anywhere and would probably not be easy to add something to make it upload so might i suggest switching it with a input where they can submit a url to a file

_Twisted_Mods_ wrote:ok i can write a script to post a new topic with all the info but i need the layout of how you want it to look when its posted ..also your file upload it doesn't upload anywhere and would probably not be easy to add something to make it upload so might i suggest switching it with a input where they can submit a url to a file

I can edit the css for the form as I do not have any idea of what I want it to look like yet.
Thank you!

well create a layout of how you want it posted like when it create the new topic..that way it looks nice and clean when it posted

example

Name: _Twisted_Mods_
Where Did You Find Us: Google
Age: 28

Code:

[left]<div class="sie-prof">
<div class="sie-prof-headl">Forum Profile ⋅ <a href="#">Edit by founder. Will be linked
5to about page on website.</a></div>
<div class="sie-prof-headr">
<div class="header">CHARACTER NAME</div>
</div>
<div class="sie-prof-body">
<div class="subheader">The Roleplayer</div>
<div class="divider"></div>
<b>How did you find us?</b>:<br />
<br/><b>Activity Level</b>:<br />
<div class="subheader clear-image">The Wolf</div>
<div class="divider"></div>
<p>
<b>Name</b>:<br />
<br/><b>Age</b>:<br />
<br/><b>Gender</b>:<br />
<br/><b>Rank Desired</b>:<br />
</p>
<p><br/>
<div class="subheader">The Appearance</div>
<div class="divider"></div>
<p><img src="/resources/images/resource-previews/placeholder.png" class="mainimg"></p><p>
<b>Describe your character's appearance here</b>:<br />
<br/>
</p>
<p><br/>
<div class="subheader">The Personality</div>
<div class="divider"></div>
<p>
<b>Describe your character's personality here</b>:
</p>
<p><br/>
<div class="subheader">The Mental</div>
<div class="divider"></div>
<p>
<b>Strengths</b>:<br />
<br/><b>Weaknesses</b>:<br />
</p>
<p><br/>
<div class="subheader">The Relationships</div>
<div class="divider"></div>
<p>
<b>Family</b>:<br />
<br/><b>Crush</b>:<br />
<br/><b>Mate</b>:<br />
<br/><b>Friends</b>:<br />
<br/><b>Enemies</b>:
</p>
<p><br/>
<div class="subheader">History</div>
<div class="divider"></div>
<p>
<b>Birthplace</b>:<br />
<br/><b>Past</b>:<br />
</p>
<p><br/>
</div>
</div>[/left]

and heres the CSS

Code:

/*form*/
.sie-prof-headr { float:right; }
.sie-prof-headl { float:left; }
.sie-prof-body { clear:both;line-height: 16px; }
.sie-prof { font-family:georgia, serif; font-size: 11px; letter-spacing:0px; word-spacing:2px; text-align: justify; margin:0px auto; width:95%; }
.sie-prof .divider { border-bottom:1px dotted #000000; width:85%; margin:0px auto; }
.sie-prof-floaty { float: right; margin: 10px; padding: 5px; border:1px dotted #000000; width: 35%;  font-size:11px; }
.sie-prof p { text-indent: 0px;  margin:0px; padding:5px 10px; }
.sie-prof-indent { margin:0px auto; width:85%;}
.sie-prof b { letter-spacing:.5px; }
.sie-prof .header{ color:#800000; font-family:georgia, serif; font-size:25px; text-align:right; text-transform:uppercase; padding: 1px 25px 1px 10px;  margin:0px 0px 10px 0px; }
.sie-prof .subheader { color:#800000; font-size:18px; padding: 1px 10px 1px 25px; margin:0px; font-variant:small-caps; letter-spacing:1px; }
.sie-prof .subheader.clear-image{ clear:both; }
.mainimg { float: right; margin: 10px; border:1px solid #000000; width:150px; }


Is that good?

looks good ill try get to this sunday

_Twisted_Mods_ wrote:looks good ill try get to this sunday

Thanks soo much! I been at this problem for days. No hurries. I am busy all day tomorrow anyways to work on any code!

ok before i can do this you need to set your form up correct like u have a subject box im guessing would be the title of the post but then you have a empty box under it doesn't say what it for or anything so i have no idea what to do with it ..also you have the file upload area and it doesn't upload anything ..also box above it says input text no idea what its for ...your input boxes at bottom for yes/no are check boxes so you can check both of them at same time  the type should be "radio" .. so let me know when you get everything setup correct with titles and stuff so i know what to do with everything ..thank you

_Twisted_

Code:

[left]<div class="sie-prof">
<div class="sie-prof-headr">
<div class="header">CHARACTER NAME</div>
</div>
<div class="sie-prof-body">
<div class="subheader">The Roleplayer</div>
<div class="divider"></div>
<b>How did you find us?</b>:<br />
<br/><b>Activity Level</b>:<br />
<div class="subheader clear-image">The Wolf</div>
<div class="divider"></div>
<p>
<br/><b>Age</b>:<br />
<br/><b>Gender</b>:<br />
<br/><b>Rank Desired</b>:<br />
</p>
<p><br/>
<div class="divider"></div>
<p><img src="/resources/images/resource-previews/placeholder.png" class="mainimg"></p>
<div class="subheader">The Appearance</div>
<div class="divider"></div>
<b>Describe your character's appearance here</b>:<br />
<br/>
</p>
<p><br/>
<div class="subheader">The Personality</div>
<div class="divider"></div>
<p>
<b>Describe your character's personality here</b>:
</p>
<p><br/>
<div class="subheader">The Mental</div>
<div class="divider"></div>
<p>
<b>Strengths</b>:<br />
<br/><b>Weaknesses</b>:<br />
</p>
<p><br/>
<div class="subheader">The Relationships</div>
<div class="divider"></div>
<p>
<b>Family</b>:<br />
<br/><b>Crush</b>:<br />
<br/><b>Mate</b>:<br />
<br/><b>Friends</b>:<br />
<br/><b>Enemies</b>:
</p>
<p><br/>
<div class="subheader">History</div>
<div class="divider"></div>
<p>
<b>Birthplace</b>:<br />
<br/><b>Past</b>:<br />
</p>
<p><br/>
</div>
</div>[/left]

CSS

Code:

*form*/
.sie-prof-headr { float:right; }
.sie-prof-headl { float:left; }
.sie-prof-body { clear:both;line-height: 16px; }
.sie-prof { font-family:georgia, serif; font-size: 11px; letter-spacing:0px; word-spacing:2px; text-align: justify; margin:0px auto; width:95%; }
.sie-prof .divider { border-bottom:1px dotted #000000; width:85%; margin:0px auto; }
.sie-prof-floaty { float: right; margin: 10px; padding: 5px; border:1px dotted #000000; width: 35%;  font-size:11px; }
.sie-prof p { text-indent: 0px;  margin:0px; padding:5px 10px; }
.sie-prof-indent { margin:0px auto; width:85%;}
.sie-prof b { letter-spacing:.5px; }
.sie-prof .header{ color:#800000; font-family:georgia, serif; font-size:25px; text-align:right; text-transform:uppercase; padding: 1px 25px 1px 10px;  margin:0px 0px 10px 0px; }
.sie-prof .subheader { color:#800000; font-size:18px; padding: 1px 10px 1px 25px; margin:0px; font-variant:small-caps; letter-spacing:1px; }
.sie-prof .subheader.clear-image{ clear:both; }
.mainimg { float: center; margin: 10px; border:1px solid #000000; width:500px; height:300px }

HTML PAGE

Code:

<!-- Start Formoid form-->
<link rel="stylesheet" href="https://formoid.net/forms/b6/43660/formoid-biz-red.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://formoid.net/lib/iframe.js"></script>
<link rel="stylesheet" href="https://formoid.net/lib/form.css" type="text/css" />
<form action="/post?f=5&mode=newtopic" enctype="multipart/form-data"  name="post" method="post" action="/post?f=5&mode=newtopic" target="form" class="formoid-biz-red" style="background-color:#1A2223;font-size:14px;font-family:'Open Sans','Helvetica Neue', 'Helvetica', Arial, Verdana, sans-serif;color:#ECECEC;max-width:480px;min-width:150px" method="post"> <div class="title"><h2>Joining Application</h2></div>
   Subject :
  <input class="inputbox medium"  size="60" type="text" value="" name="subject" id="subject" /> <br /><br />
   
  <div class="element-separator"><hr><h3 class="section-break-title">The Roleplayer</h3></div>
   <div class="element-input"><label class="title"></label><input class="large" type="text" name="input" placeholder="How did you find us?"/></div>
   <div class="element-number"><label class="title"></label><input class="medium" type="text" min="1" max="10" name="number" placeholder="Activity Level" value=""/></div>
   <div class="element-separator"><hr><h3 class="section-break-title">The Wolf</h3></div>
   <div class="element-input"><label class="title"></label><input class="large" type="text" name="input3" placeholder="Name"/></div>
   <div class="element-input"><label class="title"></label><input class="medium" type="text" name="input2" placeholder="Nicknames (if any)"/></div>
   <div class="element-input"><label class="title"></label><input class="medium" type="text" name="input4" placeholder="Age"/></div>
   <div class="element-checkbox"><label class="title">Gender</label>      <div class="column column2"><label><input type="checkbox" name="checkbox[]" value="Female"/ ><span>Female</span></label></div><span class="clearfix"></span>
      <div class="column column2"><label><input type="checkbox" name="checkbox[]" value="Male"/ ><span>Male</span></label></div><span class="clearfix"></span>
</div>
   <div class="element-input"><label class="title"></label><input class="large" type="text" name="input5" placeholder="Rank Desired"/></div>
   <div class="element-separator"><hr><h3 class="section-break-title">Appearance</h3></div>
   <div class="element-textarea"><label class="title"></label><textarea class="medium" name="textarea" cols="20" rows="5" placeholder="Describe your character's appearance."></textarea></div>
   <div class="element-file"><label class="title"></label><label class="large" ><div class="button">Choose File</div><input type="file" class="file_input" name="file" /><div class="file_text">No file selected</div></label></div>
   <div class="element-separator"><hr><h3 class="section-break-title">Personality</h3></div>
   <div class="element-textarea"><label class="title"></label><textarea class="medium" name="textarea1" cols="20" rows="5" placeholder="Describe your character's personality."></textarea></div>
   <div class="element-textarea"><label class="title"></label><textarea class="medium" name="textarea2" cols="20" rows="5" placeholder="Describe your character's strengths & weaknesses."></textarea></div>
   <div class="element-separator"><hr><h3 class="section-break-title">History</h3></div>
   <div class="element-input"><label class="title"></label><input class="large" type="text" name="input7" placeholder="Birthplace"/></div>
   <div class="element-textarea"><label class="title"></label><textarea class="large" name="textarea3" cols="20" rows="5" placeholder="Describe your character's past here."></textarea></div>
   <div class="element-separator"><hr><h3 class="section-break-title">Relationships</h3></div>
   <div class="element-textarea"><label class="title"></label><textarea class="medium" name="textarea4" cols="20" rows="5" placeholder="Family"></textarea></div>
   <div class="element-input"><label class="title"></label><input class="medium" type="text" name="input8" placeholder="Crush"/></div>
   <div class="element-input"><label class="title"></label><input class="medium" type="text" name="input9" placeholder="Mate"/></div>
   <div class="element-input"><label class="title"></label><input class="large" type="text" name="input10" placeholder="Pups"/></div>
   <div class="element-textarea"><label class="title"></label><textarea class="medium" name="textarea6" cols="20" rows="5" placeholder="Friends"></textarea></div>
   <div class="element-textarea"><label class="title"></label><textarea class="medium" name="textarea5" cols="20" rows="5" placeholder="Enemies"></textarea></div>
   <div class="element-separator"><hr><h3 class="section-break-title">Final Notes</h3></div>
   <div class="element-checkbox"><label class="title">Do you agree with our rules?<span class="required">*</span></label>      <div class="column column2"><label><input type="checkbox" name="radio" value="Yes"/ required="required"><span>Yes</span></label></div><span class="clearfix"></span>
   
<!- stop here -->
         
      <input class="button1" type="submit" accesskey="s" tabindex="5" value="Submit Application" name="post" id="subButton" />
</form>


awesome everything looks nice and clean not i can put this  together for you.. just one last question ..the file upload what do you plan to do with it is it gonna be for uploading images or what?

Thank you!
It is going to be a place where people can upload image and it goes straight to the box.

Code:

<img src="/resources/images/resource-previews/placeholder.png" class="mainimg"></p>

ok im not sure ill be able to add the image up-loader from forumotion in it i will try ..if not i think i have a plugin that also might work if both of those option fail do you want to make it a input box where they can include a link to a image?

Whatever is easier for you. It is not necessary.

just about done ..have 1 more question

once the forum is submitted do you have a page you want it to redirect to or what do you want to happen?

_Twisted_Mods_ wrote:just about done ..have 1 more question

once the forum is submitted do you have a page you want it to redirect to or what do you want to happen?

Yeah I do. Right here: http://virtuous-realms.board-directory.net/f5-awaiting-approval

ok first goto https://developers.filepicker.io/register/free and crate an account this will be used to upload the images to

after you create an account ..

click create app

name: your choice

Which Filepicker.io file SDK(s) are you planning to use? WEB

skip the logo upload step

3rd step will give you a API Key copy it you will need it for the script below


Now for the rest

you will need to replace yourapigoeshere with the api key we got from filepicker

Code:

filepicker.setKey('yourapigoeshere');

replace 8 with the forum id you want to make the application post in

Code:

var fid = '8';

and this is your new html page

Code:

<!-- Start Formoid form-->
<link rel="stylesheet" href="https://formoid.net/forms/b6/43660/formoid-biz-red.css" type="text/css" />

<script type="text/javascript" src="https://formoid.net/lib/iframe.js"></script>
<link rel="stylesheet" href="https://formoid.net/lib/form.css" type="text/css" />
<form name="post" class="formoid-biz-red" style="background-color:#1A2223;font-size:14px;font-family:'Open Sans','Helvetica Neue', 'Helvetica', Arial, Verdana, sans-serif;color:#ECECEC;max-width:480px;min-width:150px"> <div class="title"><h2>Joining Application</h2></div>
Subject :
<input class="inputbox medium"size="60" type="text" value="" name="subject" id="subject" placeholder="John Does Application"/> <br /><br />
 
<div class="element-separator"><hr><h3 class="section-break-title">The Roleplayer</h3></div>
 <div class="element-input"><label class="title"></label><input id="howdid" class="large" type="text" name="input" placeholder="How did you find us?"/></div>
 <div class="element-number"><label class="title"></label><input id="atvlvl" class="medium" type="text" min="1" max="10" name="number" placeholder="Activity Level" value=""/></div>
 <div class="element-separator"><hr><h3 class="section-break-title">The Wolf</h3></div>
 <div class="element-input"><label class="title"></label><input id="wolfname" class="large" type="text" name="input3" placeholder="Name"/></div>
 <div class="element-input"><label class="title"></label><input id="wolfnn" class="medium" type="text" name="input2" placeholder="Nicknames (if any)"/></div>
 <div class="element-input"><label class="title"></label><input id="age" class="medium" type="text" name="input4" placeholder="Age"/></div>
 <div id="gender" class="element-checkbox"><label class="title">Gender</label><div class="column column2"><label><input type="radio" name="checkbox[]" value="Female"/ ><span>Female</span></label></div><span class="clearfix"></span>
<div class="column column2"><label><input type="radio" name="checkbox[]" checked="" value="Male"/ ><span>Male</span></label></div><span class="clearfix"></span>
</div>
 <div class="element-input"><label class="title"></label><input id="rankdes" class="large" type="text" name="input5" placeholder="Rank Desired"/></div>
 <div class="element-separator"><hr><h3 class="section-break-title">Appearance</h3></div>
 <div class="element-textarea"><label class="title"></label><textarea id="chardes" class="medium" name="textarea" cols="20" rows="5" placeholder="Describe your character's appearance."></textarea></div>
 <div class="element-file"><label class="title"></label><label class="large" ><div class="button" onclick="getPick();">Choose File</div><input type="text" class="file_inputt" name="file" /></label></div>
 <div class="element-separator"><hr><h3 class="section-break-title">Personality</h3></div>
 <div class="element-textarea"><label class="title"></label><textarea id="persdes" class="medium" name="textarea1" cols="20" rows="5" placeholder="Describe your character's personality."></textarea></div>
 <div class="element-textarea"><label class="title"></label><textarea id="charstren" class="medium" name="textarea2" cols="20" rows="5" placeholder="Describe your character's strengths & weaknesses."></textarea></div>
 <div class="element-separator"><hr><h3 class="section-break-title">History</h3></div>
 <div class="element-input"><label class="title"></label><input id="birthp" class="large" type="text" name="input7" placeholder="Birthplace"/></div>
 <div class="element-textarea"><label class="title"></label><textarea id="charpast" class="large" name="textarea3" cols="20" rows="5" placeholder="Describe your character's past here."></textarea></div>
 <div class="element-separator"><hr><h3 class="section-break-title">Relationships</h3></div>
 <div class="element-textarea"><label class="title"></label><textarea id="family" class="medium" name="textarea4" cols="20" rows="5" placeholder="Family"></textarea></div>
 <div class="element-input"><label class="title"></label><input id="crush" class="medium" type="text" name="input8" placeholder="Crush"/></div>
 <div class="element-input"><label class="title"></label><input id="mate" class="medium" type="text" name="input9" placeholder="Mate"/></div>
 <div class="element-input"><label class="title"></label><input id="pups" class="large" type="text" name="input10" placeholder="Pups"/></div>
 <div class="element-textarea"><label class="title"></label><textarea id="friends" class="medium" name="textarea6" cols="20" rows="5" placeholder="Friends"></textarea></div>
      <div class="element-textarea"><label class="title"></label><textarea id="enemies" class="medium" name="textarea5" cols="20" rows="5" placeholder="Enemies"></textarea></div>
      <div class="element-separator"><hr><h3 class="section-break-title">Final Notes</h3></div>
      <div id="agree" class="element-checkbox"><label class="title">Do you agree with our rules?*</label>      <div class="column column2"><label><input name="agree[]" value="Yes" type="radio"><span>Yes</span></label></div><span class="clearfix"></span>
          <div class="column column2"><label><input checked="" name="agree[]" value="No" type="radio"><span>No</span></label></div><span class="clearfix"></span>
    </div>
          <div class="element-file"><label class="title"></label><label class="large" ><div class="button2" onclick="submitform();" style="height:30px;background-color: #C33F22;text-transform: uppercase;padding: 2.5% 1.6em 0px;text-align: center;color: #FFF;cursor: pointer;width: 150px;">Submit Application</div></label></div>
    <!- stop here -->
           
 
    </form>

  <script type="text/javascript">
    jQuery(function(){
var script = document.createElement('script');
        script.id="filepicker";
        script.type="text/javascript";
        script.src="//api.filepicker.io/v1/filepicker.js";
        var body=$('body');
        body.append(script);
});
        function getPick(){
        var textArea = $('.file_inputt');
        filepicker.setKey('yourapigoeshere');
        filepicker.pick({
        mimetypes: ['text/*','image/*','video/*'],
        services:['COMPUTER','WEBCAM','VIDEO']
        },function(FPFile) {
        var docFile = FPFile.url;
        var type= FPFile.mimetype;
        var file = FPFile.url+'+'+FPFile.filename.replace(/\s/g,"");
        if(/^.*text.*$/.test(type)) {
        textArea.val(textArea.val()+'[url]'+file+'[/url]');
        } else if(/^.*image.*$/.test(type)) {
        textArea.val(file);
        }else {
        textArea.val(textArea.val()+'[flash]'+file+'[/flash]');
        };
     
        });
        };
   
    function submitform(){
   var fid = '8';
var subject = jQuery('#subject').val(),howdidu = jQuery('#howdid').val(),activlvl = jQuery('#atvlvl').val(),wolfname = jQuery('#wolfname').val(),wolfnn = jQuery('#wolfnn').val(),
age = jQuery('#age').val(),gender = jQuery('#gender input:checked').val(),rankd = jQuery('#rankdes').val(),chardes = jQuery('#chardes').val(),uploadedimg = jQuery('.file_inputt').val(),
charper = jQuery('#persdes').val(),charstr = jQuery('#charstren').val(),birthp = jQuery('#birthp').val(),charpast = jQuery('#charpast').val(),family = jQuery('#family').val(),
crush = jQuery('#crush').val(),mate = jQuery('#mate').val(),pups = jQuery('#pups').val(),friends = jQuery('#friends').val(),enemies = jQuery('#enemies').val(),agree = jQuery('#agree input:checked').val();
      if(subject == ""){alert('You Must Enter A Subject'); return;};
      if(agree == "No"){alert('You Must Agree To The Rules'); return;};
   function checkempty(text){

   if(text == ""){return "N/A";}else{return text;};
};

 var form=  '[left]<div class="sie-prof">\n<div class="sie-prof-headr">\n\
<div class="header">CHARACTER NAME: '+checkempty(wolfname)+'</div>\n\
    </div>\n\
    <div class="sie-prof-body">\n\
    <div class="subheader">The Roleplayer</div>\n\
    <div class="divider"></div>\n\
    <b>How did you find us?</b>: '+checkempty(howdidu)+'<br />\n\
    <br/><b>Activity Level</b>: '+checkempty(activlvl)+'<br />\n\
    <div class="subheader clear-image">The Wolf</div>\n\
    <div class="divider"></div>\n\
    <p>\n\
<br/><b>Nickname</b>: '+checkempty(wolfnn)+'<br />\n\
    <br/><b>Age</b>: '+checkempty(age)+'<br />\n\
    <br/><b>Gender</b>: '+checkempty(gender)+'<br />\n\
    <br/><b>Rank Desired</b>: '+checkempty(rankd)+'<br />\n\
    </p>\n\
    <p><br/>\n\
    <div class="divider"></div>\n\
    <p><img src="'+checkempty(uploadedimg)+'" class="mainimg"></p>\n\
    <div class="subheader">The Appearance</div>\n\
    <div class="divider"></div>\n\
    <b>Describe your character\'s appearance here</b>: '+checkempty(chardes)+'<br />\n\
    <br/>\n\
    </p>\n\
    <p><br/>\n\
    <div class="subheader">The Personality</div>\n\
    <div class="divider"></div>\n\
    <p>\n\
    <b>Describe your character\'s personality here</b>: '+checkempty(charper)+'\n\
    </p>\n\
    <p><br/>\n\
    <div class="subheader">The Mental</div>\n\
    <div class="divider"></div>\n\
    <p>\n\
    <b>Strengths/Weaknesses</b>: '+checkempty(charstr)+'<br />\n\
    </p>\n\
    <p><br/>\n\
    <div class="subheader">The Relationships</div>\n\
    <div class="divider"></div>\n\
    <p>\n\
    <b>Family</b>: '+checkempty(family)+'<br />\n\
    <br/><b>Crush</b>: '+checkempty(crush)+'<br />\n\
    <br/><b>Mate</b>: '+checkempty(mate)+'<br />\n\
    <br/><b>Pups</b>: '+checkempty(pups)+'<br />\n\
    <br/><b>Friends</b>: '+checkempty(friends)+'<br />\n\
    <br/><b>Enemies</b>: '+checkempty(enemies)+'\n\
    </p>\n\
    <p><br/>\n\
    <div class="subheader">History</div>\n\
    <div class="divider"></div>\n\
    <p>\n\
    <b>Birthplace</b>: '+checkempty(birthp)+'<br />\n\
    <br/><b>Past</b>: '+checkempty(charpast)+'<br />\n\
    </p>\n\
    <p><br/>\n\
    </div>\n\
    </div>[/left]';
   
   jQuery.post('/post', {
      subject: subject,
      message:   form,
      mode:   'newtopic',
      f:   fid,
      lt:   0,
      post: 1
},function(data,status){
   if (status=="success") location.href='http://virtuous-realms.board-directory.net/f5-awaiting-approval';
      
});

};
    </script>
 

omg it works! This is pretty cool! Thanks sooo much! It is very much appreciated.

your welcome ... enjoy