Menu
Form captured problems !
Hi All
The title doesn’t best describe my problem but I can’t think of a better way so I’ll just explain.
I have a simplified version of what I’m working with here.
[url]http://www.ttmt.org.uk/forum/
It’s a font tester where you can select text and font size from the drop menus and it will be set below in a given font. The values are captured with jQuery and the image is produced with the PHP GD library but thats all working.
My problem is I want to use the input text area and the text drop down menu to set the text that is used.
If text is typed into the text area I would like that to used. If text is selected from the drop down I would like that to be used.
Hope this makes sense and someone can help. Any help would be greatly appreciated.
[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<meta name=”robots” content=”noindex, nofollow” />
<title></title>
<style type=”text/css” media=”screen”>
*{margin:0;padding:0;}
#content{margin:20px;}
form{margin:0 0 20px 0;}
#inputText{width:300px;}
</style>
</head>
<body>
<div id=”content”>
<form method=”” action=”” id=”testerForm”>
<input id=”inputText” type=”text” name=”text” value=”” />
<select name=”text” id=”selectText”>
<option value=””>Text</option>
<option rendertype=”o”>0123456789</option>
<option rendertype=”o”>The quick brown fox jumps over the lazy dog</option>
<option rendertype=”o”>Fjord Nymphs XV beg quick waltz</option>
<option rendertype=”o”>J.Q. Vandz struck my big fox whelp</option>
</select>
<select name=”size” id=”selectSize”>
<option value=””>Size</option>
<option value=”40″>40</option>
<option value=”60″>60</option>
<option value=”84″>84</option>
<option value=”108″>108</option>
</select>
<input type=”submit” name=”submit” id=”set” value=”Set” />
</form>
<div class=”fontTester”>
</div>
</div><!– #content –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
<script type=”text/javascript” charset=”utf-8″>
var text = ‘Test’;
var size = 70;
var font = ‘corbelb.ttf’;
var dataString = ‘text=’ + text + ‘&size=’ + size + ‘&font=’ + font;
$(“.fontTester”).html(“<img src=’sample.php?” + dataString + “‘ />”);
//
$(‘#set’).click(function(e){
e.preventDefault();
//
if($(‘#inputText’).val() != ”){
text = $(‘#inputText’).val();
}
if($(‘#selectText’).val() != ” ){
text = $(‘#selectText’).val();
$(‘#inputText’).val(”);
}
if($(‘#selectSize’).val() != ”){
size = $(‘#selectSize’).val();
}
dataString = ‘text=’ + text + ‘&size=’ + size + ‘&font=’ + font;
$(“.fontTester”).find(“img”).remove();
$(“.fontTester”).html(“<img src=’sample.php?” + dataString + “‘ />”);
});
</script>
</body>
</html>