PDA

View Full Version : creating web forms from scratch

herbharrell
08-29-2006, 08:14 PM
I am looking for information on how to use Javascript to create html forms from scratch. Surprisingly, neither Goodman's Javascript Bible nor Zakas Professional Javascript for Web Developers handle the topic (they assume you want to do something with pre-existing, hand-written html forms). A small set of examples with comments would probably be all I need. Can anyone point me in the right direction? If so, thanks!
Basscyst
08-30-2006, 02:39 AM
Here is an example:

<html>
<head>
<script type="text/javascript">
function makeForm()
{
//create form element
var form=document.createElement('form');
form.setAttribute('method','post');
form.setAttribute('action','http://yoururl.com/somepage.asp')

//create input and set attributes
var input=document.createElement('input');
input.setAttribute('name','txt1');
input.setAttribute('type','text');

//create a submit button and set attributes
var sub=document.createElement('input');
sub.setAttribute('type','submit');
sub.setAttribute('value','GO');

//append the elements to the form
form.appendChild(input);
form.appendChild(sub);

//append the form to the document
document.getElementById('formspot').appendChild(form);
}
//when the page loads build the form
window.onload=function()
{
makeForm();
}
</script>
</head>
<body>
<div id="formspot">
</div>
</body>
</html>


Basscyst
darknailblue
09-12-2006, 11:04 PM
Another more raw way to do this would be to use javascript to write HTML to the page. This way you could control the layout of the form elements if needed. Here's a quick example (not involving forms) of how to do this. I took this from a printer friendly template that I created.

<script type="text/javascript">
// == Global Variables
var printHeader;
var printLinks;
var printFooter;
var defWinSet;

// == Document Header

printHeader='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n';
printHeader+='<html xmlns="http://www.w3.org/1999/xhtml">\n';
printHeader+='<head>\n';
printHeader+='<title>Quiet Woods</title>\n';
printHeader+='<link href="quietwoods.css" rel="stylesheet" type="text/css" />\n';
printHeader+='<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n';
printHeader+='</head>\n';
printHeader+='<body>\n';
printHeader+='<div id="pfcontainer">\n';
printHeader+=' <table width="100%" border="0">\n';
printHeader+=' <tr>\n';
printHeader+=' <td width="44%"><img src="images/quietwoods/logo.gif" width="302" height="124" /></td>\n';
printHeader+=' <td width="56%">\n';
printHeader+=' <table width="100%" border="0">\n';
printHeader+=' <tr>\n';
printHeader+=' <td width="27%" height="72" align="center" valign="middle"><p>Exclusively<br />\n';
printHeader+=' Represented By:<br />\n';
printHeader+=' <br />\n';
printHeader+=' <strong>Dawn Hoydilla </strong></p>\n';
printHeader+=' </td>\n';
printHeader+=' <td width="14%" align="left" valign="middle"><p><a href="http://prudentialct.com/ContactUs/SEHomePage.asp?Associate_Key=154" target="_blank"><img src="http://prudentialct.com/photolib/people/C15/DHoydilla.jpg" width="105" height="120" border="0" align="left" /></a></p> </td>\n';
printHeader+=' <td width="59%" align="left" valign="middle"><p>203-741-5224<br />\n';
printHeader+=' 203-589-1278<br />\n';
printHeader+=' <a href="mailto:dhoydilla@prudentialct.com">dhoydilla@prudentialct.com</a></p>\n';
printHeader+=' 1243 South Broad Street<br />\n';
printHeader+=' Wallingford, CT 06492</td>\n';
printHeader+=' </tr>\n';
printHeader+=' </table>\n';
printHeader+=' </td>\n';
printHeader+=' </tr>\n';
printHeader+=' </table>\n';
printHeader+=' <img src="images/quietwoods/log.gif" width="800" height="25" />\n';

// == Document Footer

printFooter='</div>\n';
printFooter+='</body>\n';
printFooter+='</html>\n';


// == Misc. Options/Settings

printLinks='<p align="right"><a href="javascript:window.print()">Send to Printer</a> | <a href="javascript:self.close()">Close Window</a></p>\n';
defWinSet="toolbar=yes, location=no, directories=yes, menubar=yes, scrollbars=yes, width=750px, height=600px, left=100, top=25";

function printerFriendly(cd, wo){
var winOpt;
var winPrint;
var printContent;

//setup window opening options
if (wo!=null){winOpt=wo;}
else {winOpt=defWinSet;}


//extract content
printContent=document.getElementById(cd).innerHTML;

//open the window and display dynamic content
winPrint = window.open("","",winOpt);
winPrint.document.open();
winPrint.document.write(printHeader);
winPrint.document.write(printLinks);
winPrint.document.write(printContent);
winPrint.document.write(printFooter);
winPrint.document.close();
winPrint.document.focus();
}
</script>

The main thing to pay attention to is the setting up of HTML code within the printHeader variable and winPrint.document.write() function. Using this method you can use javascript to create entire pages dynamically from scratch. There is a lot more code in this example that you don't need at all, but I'm sure that you get the idea.

~darknailblue
Basscyst
09-13-2006, 09:38 PM
The proper way to do this is to use the dom to create and append elements to the document. What if you want to create the form on an existing page after the page has loaded, maintaining it's current content?