HTML Form that Posts Topics SOLVED Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
2 posters

    HTML Form that Posts Topics SOLVED

    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Solved HTML Form that Posts Topics SOLVED

    Post by ShadesOfJay 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)
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: HTML Form that Posts Topics SOLVED

    Post by _Twisted_Mods_ 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
    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Solved Re: HTML Form that Posts Topics SOLVED

    Post by ShadesOfJay 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!
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: HTML Form that Posts Topics SOLVED

    Post by _Twisted_Mods_ 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
    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Solved Re: HTML Form that Posts Topics SOLVED

    Post by ShadesOfJay 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?
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: HTML Form that Posts Topics SOLVED

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

    looks good ill try get to this sunday
    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Solved Re: HTML Form that Posts Topics SOLVED

    Post by ShadesOfJay 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!
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: HTML Form that Posts Topics SOLVED

    Post by _Twisted_Mods_ 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_
    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Solved Re: HTML Form that Posts Topics SOLVED

    Post by ShadesOfJay 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>
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: HTML Form that Posts Topics SOLVED

    Post by _Twisted_Mods_ 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?
    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Solved Re: HTML Form that Posts Topics SOLVED

    Post by ShadesOfJay 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>
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: HTML Form that Posts Topics SOLVED

    Post by _Twisted_Mods_ 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?
    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Solved Re: HTML Form that Posts Topics SOLVED

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

    Whatever is easier for you. It is not necessary.
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: HTML Form that Posts Topics SOLVED

    Post by _Twisted_Mods_ 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?
    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Solved Re: HTML Form that Posts Topics SOLVED

    Post by ShadesOfJay 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
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: HTML Form that Posts Topics SOLVED

    Post by _Twisted_Mods_ 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>
     
    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Solved Re: HTML Form that Posts Topics SOLVED

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

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


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: HTML Form that Posts Topics SOLVED

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

    your welcome ... enjoy
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: HTML Form that Posts Topics SOLVED

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

    Topic solved and archived