Form capture problems!

JavaScript
1

Form capture 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.

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.


<!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>