title: Javascript /jQuery variable print in HTML
body: <p>I'm trying to add "Make an offer" buttons to the following web-page so people can click and fill out the modal popup form and then it e-mails their details: <a href="http://www.colincooke.com/coinpages/pennies_offer.html" rel="nofollow noreferrer">http://www.colincooke.com/coinpages/pennies_offer.html</a></p>
  
  <p>The modal works fine, but I can't seem to get the variables to output in the HTML.</p>
  
  <p>In the page this is HTML code for a table row:    </p>
  
  <pre><code>&lt;tr&gt;
  &lt;td&gt;&lt;/td&gt;
    &lt;td class="date"&gt;1967&lt;/td&gt;
    &lt;td class="desc"&gt;(F257 Dies 3+J. S4157). BU Full Lustre&lt;/td&gt;
    &lt;td class="price"&gt;&amp;pound;0.20&lt;/td&gt;
    &lt;td class="nogrey"&gt;&lt;a href="http://ww6.aitsafe.com/cf/add.cfm?userid=8935970&amp;product=Item+714.+1d+1967+BU+Full+Lustre&amp;price=0.20&amp;return=http%3A%2F%2Fwww.colincooke.com%2Fcoinpages%2Fpennies.html" target="_self"&gt;&lt;div class="cart-button"&gt;&lt;/div&gt;&lt;/a&gt;&lt;a href="#dialog1" name="modal"&gt;&lt;div class="offer-button"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>And this is the JavaScript/jQuery code to make a modal popup and get values from the button clicked - the modal stuff is not my code - only the stuff that stores the variables (could probably be more elegant:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  $(document).ready(
  
   function()
   {
    $.localScroll();
    $("table.stocktable a.coinpic").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false });
  
    $("div.offer-button").click(function(){
  
      // add item text to variables
  
  
                                  // THIS IS MY (amateur!) CODE BLOCK BELOW:
  
      var itemDate = $(this).parent().parent().parent().children("td.date").text();
      var itemDescription = $(this).parent().parent().parent().children("td.desc").text();
      var itemPrice = $(this).parent().parent().parent().children("td.price").text();
    });
  
                                    // Is there a better/more direct way of doing the above? It currently works - but could be neater I think.
  
  
    // MODAL BELOW
    //select all the a tag with name equal to modal
   $('a[name=modal]').click(function(e) {
    //Cancel the link behavior
    e.preventDefault();
  
    //Get the A tag
    var id = $(this).attr('href');
  
    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
  
    //Set heigth and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});
  
    //transition effect  
  
    $('#mask').fadeTo("medium",0.8); 
  
    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();
  
    //Set the popup window to center
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);
  
    //transition effect
    $(id).fadeIn(250); 
  
   });
  
   //if close button is clicked
   $('.window .close').click(function (e) {
    //Cancel the link behavior
    e.preventDefault();
  
    $('#mask').hide();
    $('.window').hide();
   });  
  
   //if mask is clicked
   $('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
   });   
  
  
  
  
   }
  );
  &lt;/script&gt;
  </code></pre>
  
  <p>I think I've managed to get the variables stored for the item Picture, Description and Price (I tried an alert and it seemed to work) but I want to now print the variables in the modal window that shows up.</p>
  
  <p>i.e. it says: </p>
  
  <blockquote>
    <p>"You are making an offer for: itemDate, itemDescription, itemPrice"</p>
  </blockquote>
  
  <p>The modal popup uses this code on the page:</p>
  
  <pre><code>&lt;div id="boxes"&gt;
  &lt;!-- Start of Login Dialog --&gt;  
  &lt;div id="dialog1" class="window"&gt;
    &lt;div class="d-header"&gt;
  
    //I entered this message
    You are making an offer for: 
  
      &lt;input type="text" value="username"/&gt;&lt;br/&gt;
      &lt;input type="password" value="Password" /&gt;    
    &lt;/div&gt;
    &lt;div class="d-blank"&gt;&lt;/div&gt;
    &lt;div class="d-login"&gt;&lt;input name="Login" type="button" value="Login" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- End of Login Dialog --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and i've tried using:</p>
  
  <pre><code> You are making an offer for:
  
  &lt;script language="javascript"&gt;
  document.write (itemDate);
  &lt;/script&gt;
  </code></pre>
  
  <p>But for reasons that will be obvious to someone, this doesn't work. I'm thinking maybe the variable stored by jQuery might not be available outside that code. How do I output the jQuery variables stored by itemDate, itemDescription and itemPrice in the HTML code at the correct places in the HTML modal form?</p>
  
  <p>I've googled "print jQuery variables in HTML" but can't find anything relevant. This is either too obvious or not possible?</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Many Thanks</p>