Form which generates image in real-time

Question

Hi, I am looking to build a form which updates an image in real-time.

Could someone help me out and tell me the best way to go about creating a form similar to this (languages, techniques, etc): http://www.demonplates.com/platebuilder.php

Where as you enter details the image is updated accordingly. The form will send to google checkout with the data entered.

Much appreciated.

Answer 1

You don't even have to use AJAX for this. Assuming the script generating the image takes a GET parameter such as: generate_image.php?text=foo

You can just dynamically update the src attribute of the image every time the contents of the input box change. Here's an example using jQuery.

<input type="text" id="image_text" value="your text here" />
<br />
<img src="generate_image.php?text=your+text+here" alt="generated image" id="generated_image" />

And the JavaScript:

$('#image_text').change(function() {
    $('#generated_image').attr('src', $(this).val());
});