[RESOLVED] Creating a form to streamline work

@JesseGJan 27.2010

I have no idea how to do this as it is something I’ve never done before. It doesn’t seem terribly hard, I just would like to know where to start, so any help would be appreciated.

I’m not sure if anyone here is familiar with Xbox 360 here, but they have ‘achievements’. I am helping a friend create an ‘achievement guide’ website. There are around 50 achievements per game, and the way we list them is in a particular format. It’s all done on the forums it’s just a bit tedious to put every achievement in the formatting we’re using.

The format is this:

[CODE][noparse][b]Achievement name[/b] – # of points Description of achievement

[INDENT]strategy for achievement[/INDENT][/noparse][/CODE]

Of course this is done in BBCode on the forums. I want to create a simple page, online or offline, that would simple have a form where you type in the name, number of points, description, and strategy and it will output it in that format with the BBCode so we can just copy and paste it into the forums.

Would this be hard to do? Where do I start?

Thanks, Jesse

to post a comment

JavaScript

6 Comments(s) _↴

@JesseGauthorJan 28.2010 — #Anyone?

@FangJan 28.2010 — #

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;achievement guide&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 
 &lt;script type="text/javascript"&gt;
 function generate() {
 var f = document.achievement;
 f.coded.value = '[b]'+ f.name.value +'[/b] - '+ f.points.value +  'r' + f.description.value +'r[indent]'+ f.strategy.value +'[/indent]'; 
 if(document.createTextRange) {
 var copy = f.coded.value.createTextRange();
 copy.execCommand("Copy");
 }
 else {
 f.coded.focus();
 f.coded.select();
 }
 }
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 * {margin:0;padding:0;}
 body {font-family:Verdana,sans-serif; font-size:0.8em; color:#000;}
 form {margin:1em auto; width:55em;}
 fieldset {float:left; margin:0 1em; padding:1em;}
 legend {font-weight:bolder;}
 p {margin-top:1em;}
 button {margin:1em auto; display:block;}
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form action="#" name="achievement"&gt;
 &lt;fieldset&gt;&lt;legend&gt;Achievement&lt;/legend&gt;
 &lt;p&gt;
 &lt;label&gt;Name &lt;input type="text" name="name"&gt;&lt;/label&gt;
 &lt;label&gt;Points &lt;input type="text" name="points" size="5"&gt;&lt;/label&gt;
 &lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Description&lt;br&gt;&lt;textarea rows="5" cols="30" name="description"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Strategy&lt;br&gt;&lt;textarea rows="5" cols="30" name="strategy"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;button type="button" onclick="generate()"&gt;generate code&lt;/button&gt;
 &lt;/fieldset&gt;
 
 &lt;fieldset&gt;&lt;legend&gt;BBcode&lt;/legend&gt;
 &lt;p&gt;&lt;label&gt;Coded&lt;br&gt;&lt;textarea rows="10" cols="30" name="coded"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;button type="reset"&gt;clear form&lt;/button&gt;
 &lt;/fieldset&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@JesseGauthorJan 28.2010 — #Wow! Thank you so much that is amazing. Two quick questions, how would I go about adding a line break between the description value and the strategy (the indented text).

Second, say I wanted to create a whole page that had multiples of these forms and outputted one big code, how would I do that? Could I copy the coding and change the variable names for new forms so it could be like points1, points2, points 3 etc.?

EDIT: Okay I figured out the first part. Got the break in there easily. Now just adapting this to output for multiple achievements.

EDIT2: Okay I having it set up for multiple achievements like so:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
 <head>
 <title>achievement guide</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
 <script type="text/javascript">
 function generate() {
 var f = document.achievement;
 f.coded.value = '[b]'+ f.name.value +'[/b] - '+ f.points.value + ' points' +  'r' + f.description.value + 'r' +'r[indent]'+ f.strategy.value +'[/indent]' + 'r' + 'r[b]'+ f.name2.value +'[/b] - '+ f.points2.value + ' points' +  'r' + f.description2.value + 'r' +'r[indent]'+ f.strategy2.value +'[/indent]'; 
 if(document.createTextRange) {
 var copy = f.coded.value.createTextRange();
 copy.execCommand("Copy");
 }
 else {
 f.coded.focus();
 f.coded.select();
 }
 }
 </script>
 
 <style type="text/css">
 * {margin:0;padding:0;}
 body {font-family:Verdana,sans-serif; font-size:0.8em; color:#000;}
 form {margin:1em auto; width:55em;}
 fieldset {float:left; margin:0 1em; padding:1em;}
 legend {font-weight:bolder;}
 p {margin-top:1em;}
 button {margin:1em auto; display:block;}
 </style>
 
 </head>
 <body>
 <form action="#" name="achievement">
 <fieldset><legend>Achievement 1</legend>
 <p>
 <label>Name <input type="text" name="name"></label>
 <label>Points <input type="text" name="points" size="5"></label>
 </p>
 <p><label>Description<br><textarea rows="2" cols="60" name="description"></textarea></label></p>
 <p><label>Strategy<br><textarea rows="5" cols="60" name="strategy"></textarea></label></p><br />
 <legend>Achievement 2</legend>
 <p>
 <label>Name <input type="text" name="name2"></label>
 <label>Points <input type="text" name="points2" size="5"></label>
 </p>
 <p><label>Description<br><textarea rows="2" cols="60" name="description2"></textarea></label></p>
 <p><label>Strategy<br><textarea rows="5" cols="60" name="strategy2"></textarea></label></p>
 <button type="button" onclick="generate()">Generate BBCode</button>
 </fieldset>
 
 <fieldset><legend>BBcode</legend>
 <p><label>Coded<br><textarea rows="10" cols="60" name="coded"></textarea></label></p>
 <button type="reset">clear form</button>
 </fieldset>
 </form>
 </body>
 </html>[/CODE]

Which is just the same thing just repeated. However, if I kept adding to that line of Javascript code it would become a huge mess and I encountered a problem. If I have this set up to say input 50 achievements at a time, all of the forms I don't fill out still leave the code there. Would it be a lot of extra work to not include the achievement if it's not filled in?

@JesseGauthorJan 29.2010 — #Anyone able to help with this part?

@FangJan 29.2010 — #

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;achievement guide&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 
 &lt;script type="text/javascript"&gt;
 function generate() {
 var f = document.achievement;
 var coded = f.coded;
 coded.value += '[b]'+ f.name.value +'[/b] - '+ f.points.value +  'r' + f.description.value +'r[indent]'+ f.strategy.value +'[/indent]rr'; 
 f.name.value = f.points.value = f.description.value = f.strategy.value = '';
 f.count.value++;
 } 
 
 function selectAll() {
 var f = document.achievement;
 if(document.createTextRange) {
 var copy = f.coded.value.createTextRange();
 copy.execCommand("Copy");
 }
 else {
 f.coded.focus();
 f.coded.select();
 }
 }
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 * {margin:0;padding:0;}
 body {font-family:Verdana,sans-serif; font-size:0.8em; color:#000;}
 form {margin:1em auto; width:55em;}
 fieldset {float:left; margin:0 1em; padding:1em;}
 legend {font-weight:bolder;}
 p {margin-top:1em;}
 button {margin:1em auto; display:block;}
 div {clear:both; padding-top:1em;}
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form action="#" name="achievement"&gt;
 &lt;fieldset&gt;&lt;legend&gt;Achievement&lt;/legend&gt;
 &lt;p&gt;
 &lt;label&gt;Name &lt;input type="text" name="name"&gt;&lt;/label&gt;
 &lt;label&gt;Points &lt;input type="text" name="points" size="5"&gt;&lt;/label&gt;
 &lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Description&lt;br&gt;&lt;textarea rows="5" cols="30" name="description"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Strategy&lt;br&gt;&lt;textarea rows="5" cols="30" name="strategy"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;button type="button" onclick="generate()"&gt;next&lt;/button&gt;
 &lt;/fieldset&gt;
 
 &lt;fieldset&gt;&lt;legend&gt;BBcode&lt;/legend&gt;
 &lt;label&gt;Count &lt;input type="text" name="count" value="0" size="2"&gt;&lt;/label&gt;
 &lt;p&gt;&lt;label&gt;Coded&lt;br&gt;&lt;textarea rows="14" cols="30" name="coded"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;button type="button" onclick="selectAll();"&gt;select all&lt;/button&gt;
 &lt;/fieldset&gt;
 &lt;div&gt;&lt;button type="reset"&gt;clear form&lt;/button&gt;&lt;/div&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@JesseGauthorJan 29.2010 — #Wow, oh man that is amazing! I love the use of only one form. Thank you so much Fang that is great. I really appreciate it.

Also in #JavaScript _↴

[RESOLVED] Back Button with two function Script Conflict create table in html

Success!

Help @JesseG spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Creating a form to streamline work

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Creating a form to streamline work

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴