Assign something a value without reloading?

Hi there, I'm trying to make a site with fonts, but I'm stuck.

Here is a picture to easier describe what I'm trying to do:



Ok, so when someone type in their name for instance and click "show" I want the picture to show their name with the font chosen.

Here are some snippets of code. This first part is the input field with the button.

<input name="usertext" type="text"/><input type="button" value="show" onClick="showdiv('uniquename<? echo $n; ?>');"/>

PHP:

Down here is the hidden <div> that shows up when someone clicks the button.

<div id="uniquename<? echo $n; ?>" style="display:none; margin-left:0px;">
<center><p><img src="preview.php?text=<? echo $name;?>&font=fonts/<? echo $font;?>.ttf" alt=""/>
</p></center>
</div>

PHP:

Right now it will just show a picture with the name of the font.
In order to change this, I need a way to change the value of $name, without reloading the page.
Then the address to the picture would be: preview.php?text$name&font=$font where $name would be what the user type in instead of the name of the font.

I've tried to look around for an answer, and I see that AJAX might be a solution to it. But I don't know anything about AJAX

Would be great if someone had an idea.

Thanks.

 

yes ajax is the answer.

 

I'll do it for you if you want, only I'm not writing the whole lot, so post or pm me the code for that page, and I'll ajaxify it for you ......

 

a gentleman and a scholar you are, krakjoe

 

No need for AJAX.

Make a few tweaks to the form:

<input name="usertext<? echo $n; ?>" type="text"/>
<input type="button" value="show" onClick="showFont('<? echo $n; ?>', '<? echo $font;?>');" />

Code (markup):

Change the <img/> tag to:

<img id="preview<? echo $n;?>" src="loading.gif" alt=""/>

Code (markup):

Note the loading.gif. Name it whatever but make sure there is an image there so when the div layer shows (after a user clicks "show"), the user sees something until the image starts loading.

Make a showFont(id, font) function, add the code of showdiv() and this:

document.getElementById("preview"+id).src = "preview.php?text="+document.getElementById("usertext"+id).value+"&font=fonts/"+font+".ttf";

Code (markup):