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: .html

The modal works fine, but I can't seem to get the variables to output in the HTML.

In the page this is HTML code for a table row:

<tr>
<td></td>
  <td class="date">1967</td>
  <td class="desc">(F257 Dies 3+J. S4157). BU Full Lustre</td>
  <td class="price">&pound;0.20</td>
  <td class="nogrey"><a href=".cfm?userid=8935970&product=Item+714.+1d+1967+BU+Full+Lustre&price=0.20&return=http%3A%2F%2Fwww.colincooke%2Fcoinpages%2Fpennies.html" target="_self"><div class="cart-button"></div></a><a href="#dialog1" name="modal"><div class="offer-button"></div></a></td>
</tr>

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:

    <script type="text/javascript">
$(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();
 });   




 }
);
</script>

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.

i.e. it says:

"You are making an offer for: itemDate, itemDescription, itemPrice"

The modal popup uses this code on the page:

<div id="boxes">
<!-- Start of Login Dialog -->  
<div id="dialog1" class="window">
  <div class="d-header">

  //I entered this message
  You are making an offer for: 

    <input type="text" value="username"/><br/>
    <input type="password" value="Password" />    
  </div>
  <div class="d-blank"></div>
  <div class="d-login"><input name="Login" type="button" value="Login" /></div>
</div>
<!-- End of Login Dialog -->
</div>

and i've tried using:

 You are making an offer for:

<script language="javascript">
document.write (itemDate);
</script>

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?

I've googled "print jQuery variables in HTML" but can't find anything relevant. This is either too obvious or not possible?

Any help would be appreciated.

Many Thanks

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: http://www.colincooke./coinpages/pennies_offer.html

The modal works fine, but I can't seem to get the variables to output in the HTML.

In the page this is HTML code for a table row:

<tr>
<td></td>
  <td class="date">1967</td>
  <td class="desc">(F257 Dies 3+J. S4157). BU Full Lustre</td>
  <td class="price">&pound;0.20</td>
  <td class="nogrey"><a href="http://ww6.aitsafe./cf/add.cfm?userid=8935970&product=Item+714.+1d+1967+BU+Full+Lustre&price=0.20&return=http%3A%2F%2Fwww.colincooke.%2Fcoinpages%2Fpennies.html" target="_self"><div class="cart-button"></div></a><a href="#dialog1" name="modal"><div class="offer-button"></div></a></td>
</tr>

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:

    <script type="text/javascript">
$(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();
 });   




 }
);
</script>

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.

i.e. it says:

"You are making an offer for: itemDate, itemDescription, itemPrice"

The modal popup uses this code on the page:

<div id="boxes">
<!-- Start of Login Dialog -->  
<div id="dialog1" class="window">
  <div class="d-header">

  //I entered this message
  You are making an offer for: 

    <input type="text" value="username"/><br/>
    <input type="password" value="Password" />    
  </div>
  <div class="d-blank"></div>
  <div class="d-login"><input name="Login" type="button" value="Login" /></div>
</div>
<!-- End of Login Dialog -->
</div>

and i've tried using:

 You are making an offer for:

<script language="javascript">
document.write (itemDate);
</script>

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?

I've googled "print jQuery variables in HTML" but can't find anything relevant. This is either too obvious or not possible?

Any help would be appreciated.

Many Thanks

• javascript
• jquery
• html

1 Answer 1

If I were you I would look up the append/prepend functions in the jquery documentation.

http://api.jquery./append/

http://api.jquery./prepend/