SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to pass jQuery variables to PHP script ?

    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.

    Code:
    <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.

    Code:
    <!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. #2
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    You forgot the ampersands in the dataString:

    Code:
    var dataString = 'text=' + text + '&size=' + size + '&font=' + font;

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <?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. #4
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Location
    Florida
    Posts
    58
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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


    http://www.sitepoint.com/forums/show...he-second-word

  5. #5
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    Ah, you're using $_POST in your PHP script, but you're requesting the image with $_GET

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

        
    $im imagecreatetruecolor(1000200);

        
    $gray imagecolorallocate($im240240240);
        
    $black imagecolorallocate($im000);
        
    imagefilledrectangle($im001000199$gray);
        
            
    $theText $_GET['text'];
        
    $theSize $_GET['size'];
        
    $theFont $_GET['font'];
                  
            
    imagefttext($im$theSize015160$black$theFont$theText);        
            
        
    imagepng($im);
        
        
    imagedestroy($im);

    ?>

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Location
    Florida
    Posts
    58
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Immerse, working now.

  8. #8
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    Cool, glad it works now


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •