Ajax Help

randomspce · Apr 5, 2012

Hello Experts,

I am a newbie and I am trying to create Ajax + PHP program .. The idea is that the user will type in some text (in this example "Test"), select a font and a size, press the "Try it" button, and an image will appear (replacing one that was there before) with a version of that text rendered using that font.

The list of fonts needs to be created dynamically, meaning it's not hard-coded anywhere.PHP script on separate file can call convert -list font and parse out all the font names (the ones following "Font:"). It's up to you whether you create a JSON variable from the result (new way) or create HTML in your PHP (old way).

This is my code
<html>
<head>
<title></title>
<script type="text/javascript" src="generate.js"></script>
</head>
<body>

<div>
<textarea id="userInput" rows="4" cols="50"></textarea><br /><br />
<select name="fonts" id="fontPicker">
<option value="Arial,Arial,Helvetica,sans-serif">Arial,Arial,Helvetica,sans-serif</option><option value="Arial Black,Arial Black,Gadget,sans-serif">Arial Black,Arial Black,Gadget,sans-serif</option><option value="Comic Sans MS,Comic Sans MS,cursive">Comic Sans MS,Comic Sans MS,cursive</option><option value="Courier New,Courier New,Courier,monospace">Courier New,Courier New,Courier,monospace</option><option value="Georgia,Georgia,serif">Georgia,Georgia,serif</option><option value="Impact,Charcoal,sans-serif">Impact,Charcoal,sans-serif</option><option value="Lucida Console,Monaco,monospace">Lucida Console,Monaco,monospace</option><option value="Lucida Sans Unicode,Lucida Grande,sans-serif">Lucida Sans Unicode,Lucida Grande,sans-serif</option><option value="Palatino Linotype,Book Antiqua,Palatino,serif">Palatino Linotype,Book Antiqua,Palatino,serif</option><option value="Tahoma,Geneva,sans-serif">Tahoma,Geneva,sans-serif</option><option value="Times New Roman,Times,serif">Times New Roman,Times,serif</option><option value="Trebuchet MS,Helvetica,sans-serif">Trebuchet MS,Helvetica,sans-serif</option><option value="Verdana,Geneva,sans-serif">Verdana,Geneva,sans-serif</option> </select>  

<select name="fontSize" id="sizePicker">
<option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="14">14</option><option value="16">16</option><option value="18">18</option><option value="20">20</option><option value="22">22</option><option value="24">24</option><option value="26">26</option><option value="28">28</option><option value="30">30</option><option value="32">32</option><option value="36">36</option><option value="40">40</option><option value="44">44</option><option value="48">48</option><option value="54">54</option><option value="60">60</option><option value="66">66</option><option value="72">72</option> </select><br /><br />

<input type="button" name="try" value="Try It" onclick="createImg()" />
</div>
<p id="displayImg">
</p>
</body>
</html>

and my Javascript file
function createImg(){
var text = document.getElementById("userInput").value;
var fontList = document.getElementById("fontPicker");
var font = fontList.options[fontList.selectedIndex].text;
var sizeList = document.getElementById("sizePicker");
var size = sizeList.options[sizeList.selectedIndex].text;

//var text = document.getElementById("userInput").style.fontSize=size;

document.getElementById("displayImg").innerHTML=text;

}

Please give me clues

Ajax Help

randomspce

New Member