»
EnglishFrenchVietnamese

Print - Click Radio Button to View Information with images - JavaScriptBank.com

Full version: jsB@nk » Form » Checkbox » Click Radio Button to View Information with images
URL: https://www.javascriptbank.com/click-radio-button-to-view-information-with-images.html

Click Radio Button to View Information with images © JavaScriptBank.comIn order to display detailed information about some object; such as member or product; you can use simple JavaScript code. This is upgraded version of Click Radio Button to View Information; this script display image for each item.

Full version: jsB@nk » Form » Checkbox » Click Radio Button to View Information with images
URL: https://www.javascriptbank.com/click-radio-button-to-view-information-with-images.html



JavaScript
<script type="text/javascript"><!--// Created by Sandeep Gangadharan - http://www.sivamdesign.com/scripts/function printDetails() { txt = "<b>Title:</b> " + this.title + "<br>";  // change the text data here. You can have as many txt += "<b>Location:</b> " + this.location + "<br>";  // lines of data as required. to add more txt += "<b>State:</b> " + this.state + "<br>";  // lines do it as shown on the left txt += "<b>Cost:</b> " + this.cost + "<br>";  // links can be added as shown img = this.photo;theDetails = txt;document.changeImg.avatars.src = img;document.getElementById('theData').innerHTML = theDetails; }function place(title, location, state, cost, photo) { this.title = title; this.location = location; this.state = state; this.cost = cost; this.photo = photo; this.printDetails = printDetails; }// each user or product details should be added as shown below.Mountains = new place("Mountains", "Black Hills", "Colorado", "$1,250", "pix1-sm.gif");Lake = new place("Lake", "Taragon Lake", "Oregon", "$1,680", "pix2-sm.gif");Barren = new place("Barren", "Dimas Desert", "New Mexico", "1,375", "pix3-sm.gif");//--></script>


HTML
<form name="changeImg"><table align="center" bgcolor="#cccccc" border="0" cellpadding="2" cellspacing="2" width="400"> <tbody><tr>  <th class="small" align="left" width="150">   Username:  </th>  <th class="small" align="left" width="400">   Details:  </th>  <th class="small" align="left" width="50">   Photo:  </th> </tr> <tr>  <td class="small" align="left" bgcolor="#ffffff" valign="top" width="150">   <label for="a"><input id="a" name="pointer" onclick="javascript:Mountains.printDetails()" type="radio">Mountains</label><br>   <label for="b"><input id="b" name="pointer" onclick="javascript:Lake.printDetails()" type="radio">Lake</label><br>   <label for="c"><input id="c" name="pointer" onclick="javascript:Barren.printDetails()" type="radio">Barren</label><br>  </td>  <td class="small" align="left" bgcolor="#ffffff" valign="top" width="400">   <span id="theData" style="margin: 0pt; padding: 1px; width: 400px;"><b>Title:</b> Mountains<br><b>Location:</b> Black Hills<br><b>State:</b> Colorado<br><b>Cost:</b> $1,250<br></span>  </td>  <td align="center" bgcolor="#ffffff" valign="top" width="50">   <img src="pix1-sm.gif" name="avatars" alt="" height="60" width="50">  </td> </tr></tbody></table></form>