PHP/HTML form to on screen display without submit or reload

Hi All

I have a php/html form that when submitted the text field data gets put into a MySQL database, this is all working correctly,

However I would like the text from the name input, the font and the color to be dynamically displayed on the page before its submitted…

How can I do it?

below is the form code.

many thanks



echo "<script type='text/javascript' src='jscolor/jscolor.js'></script>";
echo "<table><form action='addname.php' method='post' Name='addname'>";
echo "<tr><td>Your Name:</td><td><input type='text' name='name' size='100'></td></tr>";
echo "<tr><td>Your Email:</td><td><input type='text' name='email' size='100'></td></tr>";

echo "<tr><td>Font:</td><td><select name='font'><option value='AlwaysForever'>Always Forever</option><option value='BlackChancery'>Black Chancery</option><option value='GitaScript'>Gita Script</option><option value='JellykaVampireStreet'>Jellyka Vampire Street</option><option value='MademoiselleCamille'>Mademoiselle Camille</option><option value='ManyWeatz'>Many Weatz</option><option value='VentillaStone'>Ventilla Stone</option></select></td></tr>";

echo "<tr><td>Color:</td><td><input type='text' class='color' name='color' size='100'></td></tr>";
echo "<tr><td></td><td><input type='submit' value='Add name'></td></tr>";
echo "</form></table><BR><BR>";


I’m not sure I understand your question… You have a form where you select a FONT and a Color… What do you want to display where?

Hi xMog

The submitted form puts the name, email, font choice and color choice into a database.

Then on another page

The name, font and color are echo’d out so that the name displays in the selected font and color.

This is all working correctly…

What i would like to happen is on the form page, (below the submit button) the text dynamically appears as the user types there name in the text field,
then when they select a font choice, the name changes to the font choice the user has chosen, and when the user makes a color choice the dynamically displayed name changes to the color…

This is all before the submit button is clicked so that the user gets a live preview of there choices…

In short i want to be able to use form chosen variables instantly on the same page.

Hope this makes sense…


Not with PHP
Moving to JavaScript


You could do it like this:

    <label for="name">Name: </label><input type="text" id="name">
    <label for="email">Email: </label><input type="text" id="email">
    <label for="font">Font: </label>
    <select id="font">
      <option value="">Please select</option>
      <option value='Arial'>Arial</option>
      <option value='Times New Roman'>Black Chancery</option>
      <option value='Comic Sans MS'>Comic Sans</option>
      <option value='Verdana'>Verdana</option>
    <label for="color">Color: </label><input type="text" id="color">
  <p>Preview: <span id="preview"></span></p>
  <input type='submit' value='Add name'>

and (requires jQuery):

function updatePreview(obj){

$("#font").on("change", function(){
  updatePreview({"font-family": this.value});

$("#color").on("keyup", function(){
  updatePreview({"color": this.value});

$("#name").on("keyup", function(){

Here’s a demo:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.