The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

HTML Form that Posts Topics SOLVED

View previous topic View next topic Go down

Solved HTML Form that Posts Topics SOLVED

Post by ShadesOfJay on February 13th 2015, 8:24 pm

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...


Last edited by ShadesOfJay on February 20th 2015, 2:06 am; edited 1 time in total (Reason for editing : solved)

ShadesOfJay
Forumember

Female Posts : 35
Reputation : 1
Language : English

http://www.virtuousrealms.board-directory.net

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by _Twisted_Mods_ on February 14th 2015, 12:00 am

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_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by ShadesOfJay on February 14th 2015, 5:29 am

@_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!

ShadesOfJay
Forumember

Female Posts : 35
Reputation : 1
Language : English

http://www.virtuousrealms.board-directory.net

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by _Twisted_Mods_ on February 14th 2015, 6:01 am

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

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by ShadesOfJay on February 14th 2015, 7:11 am

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?

ShadesOfJay
Forumember

Female Posts : 35
Reputation : 1
Language : English

http://www.virtuousrealms.board-directory.net

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by _Twisted_Mods_ on February 14th 2015, 7:22 am

looks good ill try get to this sunday

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by ShadesOfJay on February 14th 2015, 7:24 am

@_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!

ShadesOfJay
Forumember

Female Posts : 35
Reputation : 1
Language : English

http://www.virtuousrealms.board-directory.net

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by _Twisted_Mods_ on February 15th 2015, 5:29 am

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_

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by ShadesOfJay on February 16th 2015, 1:50 am

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>

ShadesOfJay
Forumember

Female Posts : 35
Reputation : 1
Language : English

http://www.virtuousrealms.board-directory.net

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by _Twisted_Mods_ on February 16th 2015, 3:33 am

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?

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by ShadesOfJay on February 16th 2015, 3:37 am

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>

ShadesOfJay
Forumember

Female Posts : 35
Reputation : 1
Language : English

http://www.virtuousrealms.board-directory.net

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by _Twisted_Mods_ on February 16th 2015, 3:40 am

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?

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by ShadesOfJay on February 16th 2015, 3:41 am

Whatever is easier for you. It is not necessary.

ShadesOfJay
Forumember

Female Posts : 35
Reputation : 1
Language : English

http://www.virtuousrealms.board-directory.net

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by _Twisted_Mods_ on February 18th 2015, 7:48 pm

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_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by ShadesOfJay on February 19th 2015, 3:47 am

@_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

ShadesOfJay
Forumember

Female Posts : 35
Reputation : 1
Language : English

http://www.virtuousrealms.board-directory.net

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by _Twisted_Mods_ on February 19th 2015, 7:06 am

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>
 

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by ShadesOfJay on February 20th 2015, 2:05 am

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

ShadesOfJay
Forumember

Female Posts : 35
Reputation : 1
Language : English

http://www.virtuousrealms.board-directory.net

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by _Twisted_Mods_ on February 20th 2015, 2:33 am

your welcome ... enjoy

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: HTML Form that Posts Topics SOLVED

Post by _Twisted_Mods_ on February 20th 2015, 2:34 am

Topic solved and archived

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum