Candle Huff Posted October 4, 2007 Share Posted October 4, 2007 I am new to forms, so I may end up sounding like an idiot here. Let's say that I and my group are attempting to create a form that functions like so...1) form asks questions, has text-area boxes for input/answers----- EXAMPLE QUERIES:What is the name of the character?This is my answer to the above question, which I would type in the text-area box. It goes blah blah blah blah. Rutebega Daniels.Age of character?Look, another pretend-text-area box in which I typed an answer. Gazillion years old.2) user types input/answers into text-area boxes (Rutebega, gazillion)3) user clicks SUBMIT4) output is generated either to page or mailto to look like so: <html><body bgcolor="white" text="black"><p><b>What is the name of the character?</b><br>This is my answer to the above question. It goes blah blah blah blah. Rutebega Daniels.</p><p><b>Age of character?</b><br>Look, another pretend-text-area box in which I typed an answer. Gazillion years old.</p></body></html> NOTE: the html is not invisible code here. It is visible because the user wants to be able to copy the html.5) user copies provided html-wrapped questions and answers, saves to personal .html file and proceeds to use as web pageThe question for you to answer: Basically, I want to know if it is possible to generate output in such a fashion, wherein the user does not know html and is simply typing, but the output provides the html to "spiff it up" for use. If so, HOW?Why?: I am doing this for a group of artists who create characters and need to write information about them that is quickly available on the internet at their individual websites. The information is often multi-query and lengthy, and so it can be a pain to have to "html-ize" it every single time they create characters.So. Is it possible? Yes, no? If yes, how? If no, what ARE the limits of form output? Is there an alternative way of approaching this necessity? I am not extremely code-savvy, I just know enough to get by if I poke around long enough.Thanks in advance! Link to comment Share on other sites More sharing options...
justsomeguy Posted October 4, 2007 Share Posted October 4, 2007 The limits of programming are what you know how to do. You can have it output the answers however you want to. If you want them to just hit a button and get the code then you can use Javascript to update the page with the new HTML code. If you want it to be sent via email, you will need to use a server-side language that is capable of sending mail, like PHP or ASP. Link to comment Share on other sites More sharing options...
Candle Huff Posted October 4, 2007 Author Share Posted October 4, 2007 The limits of programming are what you know how to do. You can have it output the answers however you want to. If you want them to just hit a button and get the code then you can use Javascript to update the page with the new HTML code. If you want it to be sent via email, you will need to use a server-side language that is capable of sending mail, like PHP or ASP.In that case, what sort of javascript would be suitable for this purpose? How would I set parameters to generate the html, body, paragraph, line break, and other tags? Any suggestions? Link to comment Share on other sites More sharing options...
justsomeguy Posted October 4, 2007 Share Posted October 4, 2007 You don't need to set any parameters, you just write it. str = "<html>";str += "<head>";str += "<title>page title</title>";str += "</head><body>";str += "Welcome " + document.getElementById("username").value; You can use document.getElementById to access whatever they entered in the form. An element like this would match the code above:<input type="text" id="username"> Link to comment Share on other sites More sharing options...
Candle Huff Posted October 4, 2007 Author Share Posted October 4, 2007 I think I may have understated just how very new to this I am. I'll rephrase: I know NOTHING. I have read the w3schools tutorial on forms. That's pretty much the extent of my education on the idea. Scripts are something I have not used. I am not a professional web designer or developer, I am what may often be termed a hobbyist-by-necessity. I taught myself basic html from a book when I was 13 some...eight or so years ago, and since then have only picked things up from fooling around in Notepad and reading the source codes of other fairly basic pages.What I'm getting at is that I need this broken down to idiot terms for me. Please feel free to assume I know nothing, tell me the things someone more educated with html, css, javascript, etc, would know, and I will vastly appreciate it! If possible, please tell me what I would need to do from the start to set up this form successfully, so that I understand how the code you just showed me will work into the overall scheme of it. Do I need to provide visual examples of what I am trying to say as well (I ask in case anything I said sounded murky)? Thanks for all the help so far! Link to comment Share on other sites More sharing options...
justsomeguy Posted October 4, 2007 Share Posted October 4, 2007 You need 3 parts. You need the form itself, an area to display the code, and the Javascript to move the info from one place to the other. So start with a basic form, you can modify it later to suit your needs. This is a barebones form: <html> <head> <title>Javascript Form Test</title> </head> <body> <form onsubmit="return false;"> Text 1: <input type="text" id="textfield1"><br> Text 2: <input type="text" id="textfield2"><br> <input type="submit" value="Submit" onclick="make_code();"> </form> <textarea id="results" rows="10" cols="80"></textarea> </body></html> The onsubmit action on the form that returns false means that clicking the submit button won't actually submit the form. The onclick event on the submit button tells it to run some Javascript when you click the button. In this case we want Javascript to be run instead of the form to get submitted. So that gives you a form with 2 text boxes, and a large textarea underneath that where the Javascript will eventually write the results to. So now you need the function that will get executed when the submit button gets pressed. This is the Javascript function that you can modify to add what you need: function make_code(){ // get form values text1 = document.getElementById("textfield1").value; text2 = document.getElementById("textfield2").value; // build the code, \n is for a line break str = "<html>\n"; str += "<head><title>page title</title></head>\n"; str += "<body>\n"; str += "text1: " + text1 + "\n"; str += "text2: " + text2 + "\n"; str += "</body></html>"; // write the code into the textarea document.getElementById("results").value = str;} So, to add that function to the page so that it gets executed when you hit the button, the Javascript needs to go in the page head: <html> <head> <title>Javascript Form Test</title> <script type="text/javascript"> function make_code() { // get form values text1 = document.getElementById("textfield1").value; text2 = document.getElementById("textfield2").value; // build the code, \n is for a line break str = "<html>\n"; str += "<head><title>page title</title></head>\n"; str += "<body>\n"; str += "text1: " + text1 + "\n"; str += "text2: " + text2 + "\n"; str += "</body></html>"; // write the code into the textarea document.getElementById("results").value = str; } </script> </head> <body> <form onsubmit="return false;"> Text 1: <input type="text" id="textfield1"><br> Text 2: <input type="text" id="textfield2"><br> <input type="submit" value="Submit" onclick="make_code();"> </form> <textarea id="results" rows="10" cols="80"></textarea> </body></html> Load that into a browser and see what it does. You can modify the form to add more fields or checkboxes or whatever (or make it look pretty), and you can modify the Javascript function to read whatever new values you add and change how the HTML code that you generate looks. Link to comment Share on other sites More sharing options...
Candle Huff Posted October 4, 2007 Author Share Posted October 4, 2007 Thanks! That makes a lot of sense to me. I'll mess around with that for a bit and then be back. Link to comment Share on other sites More sharing options...
jlhaslip Posted October 6, 2007 Share Posted October 6, 2007 In order to layout the output a little, insert an html "newline" in there, too, as follows: function make_code() { // get form values text1 = document.getElementById("textfield1").value; text2 = document.getElementById("textfield2").value; // build the code, \n is for a line break str = "<html>\n"; str += "<head>\n\t<title>page title</title>\n\t</head>\n"; str += "<body>\n"; str += "\ttext1: " + text1 + "\n<br/>\n"; str += "\ttext2: " + text2 + "\n"; str += "</body>\n</html>"; // write the code into the textarea document.getElementById("results").value = str; } Link to comment Share on other sites More sharing options...
Candle Huff Posted October 8, 2007 Author Share Posted October 8, 2007 Alright, I've messed with it somewhat and it definitely works for what I want to do, thank you both very much.I've got a couple new questions though.1) Is there a way to get quotation marks to appear in the returned code? For a crappy example, if I want to use the code str += "<body bgcolor="white" text="black">\n"; ...it obviously will not work because the "white" and "black" uses excess quotations that the script does not understand. It will not even process that. So is there an alternative that will make the quotation marks appear in the generated code in the final textarea box?2) Is there a way to set some queries to not appear in the returned code if the user does not supply answers to them? For example, if I ask...Name:Age:Gender:...and the user answers...Name: WhamAge:Gender: Male...and clicks submit without entering an answer to the "age" query, the text/code returned in the final box which the user would copy would read...Name: WhamGender: Male...without listing the age query at all. Is that possible? If so, how?Thanks again, y'all, you've been remarkably fast and helpful so far! Link to comment Share on other sites More sharing options...
Synook Posted October 9, 2007 Share Posted October 9, 2007 1) Is there a way to get quotation marks to appear in the returned code?Yes, just put backslashes in front of the quotation marks. This is known as escaping.str += "<body bgcolor=\"white\" text=\"black\">\n"; 2) Is there a way to set some queries to not appear in the returned code if the user does not supply answers to them?Yes, just have a test to see whether the user has put anything in the input field.// get form valuestext1 = document.getElementById("textfield1").value;text2 = document.getElementById("textfield2").value;// build the code, \n is for a line breakstr = "<html>\n";str += "<head>\n\t<title>page title</title>\n\t</head>\n";str += "<body>\n";if (text1 != "") str += "\ttext1: " + text1 + "\n<br/>\n";if (text2 != "") str += "\ttext2: " + text2 + "\n";str += "</body>\n</html>";// write the code into the textareadocument.getElementById("results").value = str; Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.