title: Add text and background color to div from html form using jquery
body: <p>I am trying to add both text color and background color to a hidden div from a form. Once either text or background input fields have been populated, the div should appear with the pre-populated text in the new color and background too. The code is as below:</p>
  
  <p><strong>For the CSS</strong></p>
  
  <pre><code>.testcolor{
      width:250px;
      height:150px;
      border:1px solid #000000;
      display:hidden; 
  }
  </code></pre>
  
  <p><strong>For the HTML</strong></p>
  
  <pre><code>&lt;form id="myform" action="" method="post"&gt; 
      &lt;input type="text" id="txtcolor" class="tstcolor" name="txtcolor" value="#FF0000"&gt;
      &lt;input type="text" id="bgcolor" class="tstcolor" name="bgcolor" value="#FFFFFF"&gt;
      &lt;a href="#" class="preview"&gt;Preview&lt;/a&gt;
      &lt;div class="testcolor"&gt;
          Lorem ipsum ist nuch nach in die postimen obscurites nang interust ingrostech hochester gelumen bransiolen.
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>For the Javascript</strong></p>
  
  <pre><code>$(document).ready(function(){
      $(".tstcolor").keyup(function(){
          var txtcolor = $("#txtcolor").val();
          var background = $("#bgcolor").val();
  
          $("#txtcolor").css("color",txtcolor);
          $("#bgcolor").css("background-color",background);
  
          $('.preview').click(function(){
              $("#testcolor").css("visibility","visible");                        
          });
      });
  });
  </code></pre>