How to pass jQuery variables to PHP script?

JavaScript
1

How to pass jQuery variables to PHP script ?

Hi All

I have a simple page here that uses the PHP GD library to create an image of text
in a font at a set size.

Select the text, size and press set and the text should be set at that size.

http://www.ttmt.org.uk/1/

I want to do this without the page reloading so I’m trying capture the input with jQuery
and pass them to the php script.


<script type="text/javascript" >
    $(function(){
      $('.button').click(function(e){
       e.preventDefault();
        var text = $('#text').val();
        var size = $('#size').val();
        var font = 'CALIBRI.TTF';
        //alert(text);
        //alert(size);
        //alert(font);
        //
        var dataString = 'text=' + text + 'size=' + size + 'font=' + font;
        alert(dataString);
        $("#top").find("img").remove();
        $("#top").append("<img src='imageftt.php?" + dataString + "'/>");
      });
    });
  </script>

Alerts show that the correct info is being captured.

The php script is being called because it’s that thats producing the grey box on the page.

The problem is the text isn’t being produced with the box.

Am I passing the jQuery variables to PHP script correctly ?

How can I check they are being received by the PHP script ?

Any help would be greatly appreciated.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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"/>

	<title>untitled</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
  <script src="../js/jquery.easing.1.3.js" type="text/javascript"></script>


  <script type="text/javascript" >
      $(function(){
        $('.button').click(function(e){
         e.preventDefault();
          var text = $('#text').val();
          var size = $('#size').val();
          var font = 'CALIBRI.TTF';
          //alert(text);
          //alert(size);
          //alert(font);
          //
          var dataString = 'text=' + text + 'size=' + size + 'font=' + font;
          alert(dataString);
          $("#top").find("img").remove();
          $("#top").append("<img src='imageftt.php?" + dataString + "'/>");
        });
      });
    </script>


</head>

<body>
  <div id="wrap">
    <form action="" method="">
      <select name="text" id="text">
        <option value="<?php echo $_POST['text'];?>">Text</option>
        <option value="ABCDEFGHJIKLMNOPQRSTUVWXYZ">ABCDEFGHIJKLMNOPQRSTUVWXYZ</option>
        <option value="abcdefghijklmnopqrstuvwxyz">abcdefghijklmnopqrstuvwxyz</option>
        <option value="0123456789">0123456789</option>
      </select>
      <select name="size" id="size">
        <option value="<?php echo $_POST['size'];?>">Size</option>
        <option value="72">72</option>
        <option value="84">84</option>
        <option value="96">96</option>
        <option value="108">108</option>
      </select>
      <input type="submit" name="submit" class="button" value="Set &rarr;" />
    </form>

    <div id="top"></div>

  </div>
</body>
</html>
2

You forgot the ampersands in the dataString:


var dataString = 'text=' + text + '[COLOR="#FF0000"]&[/COLOR]size=' + size + '[COLOR="#FF0000"]&[/COLOR]font=' + font;
3

Immerse,

I’ve tried that before but It doesn’t seem to work

http://www.ttmt.org.uk/1

this is the php I’m using if thats the problem.


<?php

	header('Content-Type: image/png');

	$im = imagecreatetruecolor(1000, 200);

	$gray = imagecolorallocate($im, 240, 240, 240);
	$black = imagecolorallocate($im, 0, 0, 0);
	imagefilledrectangle($im, 0, 0, 1000, 199, $gray);

        $theText = $_POST['text'];
	$theSize = $_POST['size'];
	$theFont = $_POST['font'];
			
        imagefttext($im, $theSize, 0, 15, 160, $black, $theFont, $theText);		
		
	imagepng($im);
	
	imagedestroy($im);

?>
4

I just asked a similar question, I swear I searched before I posted. But Immerse’s comment wasn’t my issue. I am missing the second word

5

Ah, you’re using $_POST in your PHP script, but you’re requesting the image with $_GET :slight_smile:


<?php
        
	header('Content-Type: image/png');

	$im = imagecreatetruecolor(1000, 200);

	$gray = imagecolorallocate($im, 240, 240, 240);
	$black = imagecolorallocate($im, 0, 0, 0);
	imagefilledrectangle($im, 0, 0, 1000, 199, $gray);
    
        $theText = $_GET['text'];
	$theSize = $_GET['size'];
	$theFont = $_GET['font'];
			  
        imagefttext($im, $theSize, 0, 15, 160, $black, $theFont, $theText);		
		
	imagepng($im);
	
	imagedestroy($im);

?>
6

Good call Immerse,

I missed that, if switching around $_POST/$_GET doesn’t work you may wanna try $_REQUEST which is the universal post/get

7

Thank you Immerse, working now.

8

Cool, glad it works now :wink: