Not sure what I am looking for

I am looking for something that is updating live and I think it should be done with javascript. But I just don’t know what to look for or search for.
There are probably a lot of already coded stuff that I can grab out there and use for this little thing, but what is it called?

I have a page with a form on the left side with three empty fields that are supposed to be filled in and then inserted into a MySQL db.
On the right side there is an empty page, formatted by me with something like a header, a content area and a footer.
The first field on the left side is a headline, the second a text area and the third field a footer text.

When the user is writing text in the fields I would like the text to be updated live on the right side, so the user can see how the text looks like when it’s being placed where it’s supposed to be.

What should I look for? Is it javascript? Then what is this function called?
Or should I look for something else to make it work?

I am playing around in Dreamweaver (not sure if there is already something I can use there).

Hi there,

This is quite easy with a little bit of JavaScript (or jQuery in this case).

What I have done is created three text areas (header, content and footer).
There is a jQuery event listener that captures every “key up” even on any of these elements and copies the current value of the text field, to a correspondingly named element in the preview section of the page.

Here’s the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery textarea preview</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <style>
      *{
        margin:0;
        padding:0;
      }

      h1{ margin-bottom:20px;}
      h2{ margin-bottom:15px;}
      p{ margin-bottom:10px;}

      textarea{
        width:99%;
        margin-bottom:20px;
      }

      #form, #preview{
        width:46%;
        float:left;
        margin: 10px;
        padding:10px;
        border:solid 1px gray;
        font-size:18px;
        line-height:140%;
      }

      #form{ background:#CCC; }
      #preview{ background:yellow; }
      .clear{ clear:both; }
    </style>
  </head>

  <body>
    <div id="form">
      <h1>Input Area</h1>
      <label for="header">Header:</label><br />
      <textarea id="header" rows="5"></textarea>

      <label for="content">Content:</label><br />
      <textarea id="content" rows="15"></textarea>

      <label for="footer">Footer:</label><br />
      <textarea id="footer" rows="5"></textarea>
    </div>


    <div id="preview">
      <h1>Preview Area</h1>
      <h2 id="headerPreview"></h2>
      <p id="contentPreview"></p>
      <p id="footerPreview"></p>
    </div>

    <script>
      $(document).ready(function() {
        $("#header").keyup(function(){
          $("#headerPreview").text($(this).val());
        });
        $("#content").keyup(function(){
          $("#contentPreview").text($(this).val());
        });
        $("#footer").keyup(function(){
          $("#footerPreview").text($(this).val());
        });
      });
    </script>
  </body>
</html>

Hopefully it should be quite straight forward, but if you have any questions, just let me know.

Wow! Thanks. That is exactly what I’m looking for.
Can the same thing be done with a menu selection? If I had like colors in a list and the user is picking one from the list. Is it possible to make the color change as soon as one selection is made?

Maybe I should start looking at jQuery?
Is there a lot of things to use there?

Do you mean a simple style sheet switcher?
Here’s a tutorial I made about how to implement this.
There’s a link to a demo at the bottom of the blog post, but I’ll post it here in case you miss it.

If I misunderstood you, just let me know.
If this is what you were looking for, please leave a comment on the blog.

Well, almost what I’m looking for. But not to set cookies. In the first script you sent me things are happening on the right hand side. I would like the colours to change there as well. Just like in the first script you sent. But, when changing the color in the menu, like in the second script, the colours should change on the right frame.
Maybe to change the td tag or table background or something like that maybe?
So, it’s actually very close to what you sent now.

Hi,

So you would like to extend the first script I posted (the one with the input area and the preview area) with two drop-downs.
Using these drop-downs, you could then select the background colour and the text colour of the preview area.

Is this correct?

Yes. That is what I’m looking for! :slight_smile:

Is it possible to change the footer to a selection list that changes the background color? If I select black, red or green in the list and then the change is updated in the second area?

Hi there,

This should do what you want:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Mirror Text</title>
    <!--http://www.sitepoint.com/forums/showthread.php?970534-Not-sure-what-I-am-looking-for-->
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <style>
      *{
        margin:0;
        padding:0;
      }

      h1{ margin-bottom:20px;}
      h2{ margin-bottom:15px;}
      p{ margin-bottom:10px;}

      textarea{
        width:99%;
        margin-bottom:20px;
      }

      fieldset{
        padding:8px;
        margin-bottom:10px;
      }

      fieldset div:first-child{margin-bottom: 10px;}

      #form, #preview{
        width:46%;
        float:left;
        margin: 10px;
        padding:10px;
        border:solid 1px gray;
        font-size:18px;
        line-height:140%;
      }

      #form{ background:#CCC; }
      .clear{ clear:both; }
    </style>
  </head>

  <body>
    <div id="form">
      <h1>Input Area</h1>
      <label for="header">Header:</label><br />
      <textarea id="header" rows="5"></textarea>

      <label for="content">Content:</label><br />
      <textarea id="content" rows="15"></textarea>

      <label for="footer">Footer:</label><br />
      <textarea id="footer" rows="5"></textarea>
    </div>


    <div id="preview">
      <h1>Preview Area</h1>

      <fieldset>
        <div>
          <label for="bg">Select the background colour:</label>
          <select class="selector" id="bg" data-property="background">
            <option value="white">Default</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>
          </select>
        </div>

        <div>
          <label for="col">Select the background colour:</label>
          <select class="selector" id="col" data-property="color">
            <option value="black">Default</option>
            <option value="yellow">Yellow</option>
            <option value="white">White</option>
            <option value="purple">Purple</option>
          </select>
        </div>
      </fieldset>

      <h2 id="headerPreview"></h2>
      <p id="contentPreview"></p>
      <p id="footerPreview"></p>
    </div>

    <script>
      $(document).ready(function() {
        function mirrorText(e, m){
          e.keyup(function(){
            m.text(e.val());
          });
        }

        var pre = $("#preview");

        $(".selector").change(function(){
          pre.css( $(this).attr("data-property"), $(this).val());
        });

        mirrorText($("#header"),$("#headerPreview"));
        mirrorText($("#content"),$("#contentPreview"));
        mirrorText($("#footer"),$("#footerPreview"));
      });
    </script>
  </body>
</html>

Please note that I have refactored the initial code I gave you, as it was querying the DOM every time a key was pressed.
Caching your selectors (like I have done here), is a much better practice.

HTH

Great. I will try that!

I haven’t been working on this page for a while now and I’m going back to fix some things.
If I want to save the content from the header, content and footer in my db. How can I get the text that is written on the page?

Hi,

With:

$("#header").text();
$("#content").text();
$("#footer").text();

respectively.

Hmmm, I didn’t understand that. How can I make these into a php string?
I thought you meant:

$header=$("#header").text();
$content=$("#content").text();
$footer=$("#footer").text();

But that didn’t work…

Nah, that won’t work, you’re right.
The reason is that PHP is interpreted server-side and has no concept of those variables.
AFAIK, you’ll need to do this via AJAX, as the contents of these three areas is added dynamically by your users.

So, there is no way to save these inputs in a simple way. Either post them to the following page or anything that works.
Or is it possible to use AJAX and then convert the input to a string or whatever? I don’t know anything at all about AJAX.

The page is working fine and the only thing I need now after a lot of work is to save the text that is being printed when the user is ready.

It would be relatively trivial to add a “Save” button, which when clicked would gather the text from the appropriate sections and post it to a PHP script, which could then save it to a database.
Would you like help implementing that?

Otherwise, if you are trying to preserve state between pages, it might be better to go with another option - local storage, for example.

Just to add a link saying SAVE AND CONTINUE would be really great. And then pass on the three strings. Then I can continue using whatever is in those strings. I just didn’t get it how to do it. But if you know a simple way… that would be great!

Yeah, but the crux of the matter is why do you want to save it (i.e. for which purpose)?

Do you just want to save it for the session (e.g. so the data is accessible on the next page) or do you want to save it so that the data is accessible at a later date (e.g. in a data base).

It would be great if you could briefly describe what you are trying to do.

I want to save it for later. A user should be able to write a headline, some short text and a footer. They can see all the text live on the page. When they are satisfied, they can go on to the next page. The next time they login they can continue working or use that text on my page.
The code is so great, when a user can see the amount of text being placed on the page. So, I would like to save it in my MySQL db when they move on to the next page on my site.

Ok then, MySQL it is.

So, let’s add some kind of button, e.g. “Save”, then get it talking to a PHP script.

That could look something like this:

<button id="save">Save!</button>

$("#save").on("click", function(){
  var headerText = $("#header").text(), 
      contentText = $("#content").text(), 
      footerText = $("#footer").text();  

  $.ajax({
    type: "POST",
    url: "myScript.php",
    data: 'header=' + headerText + '&content=' + contentText + '&footer=' + footerText ,
    success: function(res) {
      console.log(res);
   }
  });
});

Then, you’d need to make a PHP file, name it myScript.php and place it in the same directory.

This should just echo back the values we post to it, to make sure things are working (database will come later).

<?php
  $header = $_POST['header'];
  $content = $_POST['content'];
  $footer = $_POST['footer'];

  echo "You submitted: " . $header . ", " . $content . ", " . $footer;
?>

Try that and let me know if it worked.
I’m kind of busy on something else right now, so I didn’t test this.
If you can’t get it to work, I’ll set things up on my end so I can run it, too.