HTML/JavaScript/onclick

**KADEEM** · 03-11-2009

I just created a site with a form, there is a link that opens a popup that displays an image database. This image bank is shown with radio buttons just below to the unique selection.

HTML Code:

<table>
  <tr>
    <td><img src=miniature1.jpg><br><input type="radio" name="user" value="photo1"></td>
    <td><img src=miniature2.jpg><br><input type="radio" name="user" value="photo2"></td>
    <td><img src=miniature3.jpg><br><input type="radio" name="user" value="photo3"></td>
  </tr>
  <tr>
    <td><img src=miniature1.jpg><br><input type="radio" name="user" value="photo4"></td>
    <td><img src=miniature2.jpg><br><input type="radio" name="user" value="photo5"></td>
    <td><img src=miniature3.jpg><br><input type="radio" name="user" value="photo6"></td>
  </tr>
</table>

I wish that when I click the radio button, the popup closes and paste this in my form value example:

HTML Code:

<photo>photo1</photo>

**void** · 03-11-2009

I would try something like:

HTML Code:

<input type="radio" name="user" value="photo3" onclick="Select(this.value);">

and in your JavaScript file, you declare your function:

HTML Code:

function Select(val)
{
   //we fill the form of the parent page
   window.opener.getelementById('id_of_field_form').value = '<photo>photo' + val + '</photo>';
   // we close this popup
   window.close();
}

You just see if the getElementById apply well in the parent window

**KADEEM** · 03-11-2009

I wish I could center my web page, I've tried that:
as the device width:100%, margin:auto, but it must be put into #body or the <div>?

**Reegan** · 03-11-2009

If you made an effort to spin your HTML and your CSS code, can you provide us some more part of your code so that it would be helpful to give the proper guidance and solve your problem accurately?

**KADEEM** · 03-11-2009

My code :

HTML 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#menu2 {
 position:absolute;
 left:467px;
 top:225px;
 width:285px;
 height:28px;
 z-index:15;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-weight: normal;
 color: #000000;
 font-size: 16px;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #000000;
}
#menu3 {
 position:absolute;
 left:754px;
 top:225px;
 width:233px;
 height:27px;
 z-index:16;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-weight: normal;
 color: #FFFFFF;
 font-size: 16px;
 border-bottom-color: #FFFFFF;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #000000;
}
 
#banner{
    width:100%;
 position:absolute;
 left:195px;
 top:-1px;
 width:1019px;
 margin:0 auto 0 auto;
 height:194px;
 z-index:16;
 background-color: #FFFFFF;
}
#menu4 {
 position:absolute;
 left:989px;
 top:225px;
 width:260px;
 height:27px;
 z-index:6;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-weight: normal;
 color: #FFFFFF;
 font-size: 16px;
 border-right-width: 0px;
 border-right-style: solid;
 border-right-color: #000000;
}
#menu1 {
 position:absolute;
 left:198px;
 top:225px;
 width:267px;
 height:27px;
 z-index:7;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-weight: normal;
 color: #000000;
 font-size: 16px;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #000000;
}
a:link {
 color: #000000;
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color: #000000;
}
a:hover {
 text-decoration: none;
 color: #FFFFFF;
}
a:active {
 text-decoration: none;
 color: #000000;
}
body {  
    position:absolute;
    width:600px;
 margin-left:auto;
    margin-right:auto;
 text-align:center;
 background-image: url();
 background-repeat: no-repeat;
}
#real {
 position:absolute;
 left:399px;
 top:305px;
 width:661px;
 height:81px;
 z-index:8;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 16px;
 line-height: normal;
 color: #000000;
}
#banner {
 position:absolute;
 left:195px;
 top:198px;
 width:308px;
 height:570px;
 z-index:2;
 background-color: #D2D3FB;
}
#sarl {
 position:absolute;
 left:551px;
 top:719px;
 width:644px;
 height:142px;
 z-index:9;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
}
#Layer3 {
 position:absolute;
 left:0px;
 top:0px;
 width:739px;
 height:404px;
 z-index:10;
}
#Layer1 {
 position:absolute;
 left:574px;
 top:600px;
 width:104px;
 height:124px;
 z-index:10;
}
#manager{
 position:absolute;
 left:575px;
 top:574px;
 width:137px;
 height:25px;
 z-index:11;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
}
#Layer2 {
 position:absolute;
 left:748px;
 top:601px;
 width:124px;
 height:137px;
 z-index:12;
}
#resp {
 position:absolute;
 left:733px;
 top:574px;
 width:165px;
 height:26px;
 z-index:13;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
}
#Layer5 {
 position:absolute;
 left:801px;
 top:521px;
 width:379px;
 height:391px;
 z-index:14;
}
#Layer6 {
 position:absolute;
 left:449px;
 top:189px;
 width:855px;
 height:759px;
 z-index:1;
 background-color: #FFFFFF;
}
.style3 {
 color: #000000;
 font-weight: bold;
}
.style5 {
 font-size: 16;
 font-weight: bold;
}
#resume {
 position:absolute;
 left:392px;
 top:439px;
 width:699px;
 height:107px;
 z-index:14;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
}
#Layer4 {
 position:absolute;
 left:504px;
 top:804px;
 width:740px;
 height:117px;
 z-index:15;
}
#Layer7 {
 position:absolute;
 left:550px;
 top:737px;
 width:580px;
 height:79px;
 z-index:15;
}
#Layer8 {
 position:absolute;
 left:195px;
 top:194px;
 width:1058px;
 height:557px;
 z-index:2;
}
#Layer9 {
 position:absolute;
 left:0px;
 top:0px;
 width:154px;
 height:79px;
 z-index:15;
}
#Layer10 {
 position:absolute;
 left:194px;
 top:168px;
 width:1054px;
 height:600px;
 z-index:15;
}
#Layer11 {
 position:absolute;
 left:577px;
 top:64px;
 width:283px;
 height:130px;
 z-index:17;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 36px;
-->
</style>
</head>
 
<body>
<center>
<div id="menu2">
  <p align="center"><a href="service.html" class="style3"> PRODUCTS AND SERVICES </a></p>
</div>
<div id="menu3">
  <p align="center"><a href="provider.html"><strong> PROVIDER</strong></a></p>
</div>
<div id="banner"><img src="images/banner.jpg" width="1056" height="202" longdesc="images/Sans title-1.jpg" /></div>
<div id="menu4">
  <p align="center"><a href="contact.html"><strong>CONTACT</strong></a></p>
</div>
<div id="menu1">
  <div align="center" class="style5">PRESENTATION</div>
</div>
<div id="real">  
  <p align="center" class="style5">Execution of the works without intermediaries, or subcontract.</p>
  <p align="center"><strong>A company supplying and installing windows, doors, shutters, fully accountable to human scale. </strong></p>
  <p align="left">&nbsp;</p>
</div>
<div id="Layer1"><img src="images/second copy.jpg" width="137" height="140" longdesc="images/second copy.jpg" /></div>
<div id="manager">
  <div align="center">Manager</div>
</div>
<div id="Layer2"><img src="images/third copy.jpg" width="134" height="138" longdesc="images/third copy.jpg" /></div>
<div id="resp">
  <div align="center">Service Manager </div>
</div>
<div id="resume">
  <div align="justify">
    <p align="justify">After CAP locksmith specializing in the construction of windows and mirrors, to follow a long period as a controller works. During the creation of our society, first time we have worked under contract for major brands of window manufacturer. Today our company has extensive experience allows us to offer you the supply and installation of windows, doors, shutters and other products of Indian manufacture.</p>
  </div>
</div>
<div id="Layer8"><img src="images/window-2 copy copy.jpg" width="1056" height="556" lowsrc="images/window-2 copy copy.jpg" longdesc="images/window-2 copy copy.jpg" /></div>
<p>&nbsp;</p>
</center>
</body>
</html>