PDA

View Full Version : Code Generator


Dada78
01-13-2006, 08:43 PM
I think this would be more client side then sever side, if so you can move it. What I am looking for is a script or something that will generate HTML code for selected items. For example, lets say I have a page full of little icons. A user can select certain icons and hit the button to generate then it would generate a HTML code to paste on thier site or something. The rest I have built I just don't know how to go about creating something to generate the code. I see these things all the time. If someone could direct me towards some readings or offer some insite on how this is done that would be great.


-Thanks

aluminumpork
01-14-2006, 07:04 AM
Here is a quick little example I wrote, run this code in a browser and see how it works. From you description, I wasn't really 100% percent sure as to what you needed, so this example has you enter 3 basic values, you then click Generate. The script runs through and grabs the values from the form, then assembles a variable. Pretty straight-forward. If this isn't what you needed then just ask.


<html>
<head>

<script type="text/javascript">
<!--

function generateHTML(){
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var newsLetter = document.getElementById('newsletter').value;

var html = "<html>\n<head>\n<title>User Information</title>\n</head>\n<body>\n";
html = html + "Thank you for submitting your information " + firstName + "!";
html = html + "<br>You entered that your last name was " + lastName;
if(newsLetter=='No'){
html = html + " and that you do not wish to receive a newsletter.\n";
} else {
html = html + " and that you would like to receive a newsletter.\n";
}
html = html + "</body>\n</html>\n";
document.getElementById('outputCode').innerHTML = html;
document.getElementById('outputExample').value = html;
}
//-->
</script>


</head>

<body>

<table width="100%" height="100%"><tr valign="middle"><td align="center">

<table>
<form name="userInfo">
<tr><td>Your First Name:</td><td><input type="text" name="firstName" id="firstName" /></td></tr>
<tr><td>Your Last Name:</td><td><input type="text" name="lastName" id="lastName" /></td></tr>
<tr><td>Would you like a newsletter?</td><td><select name="newsletter" id="newsletter"><option value="Yes" />Yes<option value="No" />No</select></td></tr>
<tr><td colspan="2" align="center"><input type="button" onClick="generateHTML();" value="Generate!" /></td></tr>
</form>
</table>

<table>
<tr>
<td width="50%"><fieldset><legend>Output Example</legend><div style="height: 185px; width: 100%;" id="outputCode"></div></fieldset></td>
<td width="50%"><fieldset><legend>Copy and Paste Code</legend><form><textarea rows="10" cols="50" id="outputExample"></textarea></form></fieldset></td>
</tr>
</table>

</td></tr></table>

</body>
</html>


Hope it helps!
edit: Oh, and please do excuse the nasty tables, I didn't feel like doing a full layout for this one. ;-)

Dada78
01-14-2006, 06:05 PM
Yea that is along the lines of what I am looking for. It's a start and gives me something to work with. Instead of filling out a form it has checkboxes to select certain small icons. Then depending on what icons are checked then it would generate the code for the icons to copy and paste where you wish.

-Thanks