javascript and popup

Question

I am using a a href "Click Here" link in the page and if we click it will open a pop up contact form using javascript, here i need to get the value say like "id" into that popup from the a href so that i can manipulate the contact form,

<a href="javascript:showDiv('Showcase_10','<?=$mainrow[1]?>')">Click Here</a>

javascript function:

function showDiv(DisplayDiv) { 
if (document.getElementById) { // DOM3 = IE5, NS6 
 if(document.getElementById("simpleMap"))
 {
  document.getElementById("simpleMap").style.visibility = 'hidden';
 }
 document.getElementById(DisplayDiv).style.visibility = 'visible'; 
} 
else { 
if (document.layers) { // Netscape 4 
document.DisplayDiv.visibility = 'visible'; 
} 
else { // IE 4 
document.all.DisplayDiv.style.visibility = 'visible'; 
} 
} 
}

Popup Screen:

<div id="Showcase_10" style="visibility:hidden;">

<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<form action='result.php' onSubmit="return valid()" method="post">
<input type="hidden" name="siteid" value="<? echo $_REQUEST['siteid']; ?>"> <table width="90%" bgcolor="#eff8ff" border="0" style="border:solid; border-width:1px; border-color:#ccc" align="center" cellpadding="2" cellspacing="3" class="small-content">
<tr><td width="6%">&nbsp;</td>
<td colspan="2" align="left" class="subhead">Email Property Details</td>
</tr><tr><td width="6%">&nbsp;</td><td class="cont">Request more information, make an appointment or ask a question. </td>
</tr>
<tr>
<td width="6%">&nbsp;</td>
<td width="94%"><strong>Name</strong><br/>
<input name="name" type="text" class="field1" value=""/>&nbsp;&nbsp;<font color="#FF0000"><strong>*</strong></font></td></tr>
<tr>
<td width="6%">&nbsp;</td>
<td width="94%"><strong>Your Email</strong><br />
<input name="email" type="text" class="field1" id="textfield2" value=''/>&nbsp;&nbsp;<font color="#FF0000"><strong>*</strong></font><br />
<font color="#FF0000" style="font-family: Verdana, sans-serif;font-size : 9pt;" class="form-list">
</font></td>
</tr>
<td colspan="2" align="center"></td>
</tr>
</table>
</form>
</div>
</div>
</div>

Answer 1

In Javascript:

window.open ("path/to/my/new/html/page.html?id=3","mywindow"); 

Just like any other page, the get can be used to pass the data you need, you just may need to UrlEncode it first.

EDIT: Oh. You're referring to a modal dialog, not a popup window. Well in that case, since the data will need to be on the page fully once the page loads that way the ID can be present in the link, you have 2 basic options: 1) preload all data for all click links and store it locally in javascript, 2) break this method into an ajax call and update the modal dialog controls with the ajax data.

1) For storing it in javascript, you could easy prototype your own pseudo-class to hold all of the data for each row, allowing you to store them in an associative array by id.

function myDataItem(id, field1) {
    this.id = id;
    this.field1 = field1;
    this.field2 = "";      // initialize a property called field2
    this.getInfo = getDataItemIno;
}

function getDataItemIno() {
    return this.field1 + ' ' + this.field2;
}

var items;
items[3] = new myDataItem(3, "datastring");

2) The ajax solution would be a little more complex, and I would recommend using jQuery to build/handle all of those methods in order to keep it streamlined and simple.

Answer 2

The easiest way is to pass the id in the url of the popup window