Link to home
Start Free TrialLog in
Avatar of jsuelflow
jsuelflowFlag for United States of America

asked on

Select Image like a radio button; multiple button groups on page.

I have adapted the related solution previously given, but I want to have multiple button groups on the same page. How is this best accomplished?
<!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=UTF-8" />
<script type="text/javascript">
     function setSelected(obj) {
          var mySpans = document.getElementById("myImgs").getElementsByTagName("td");
          for (var t=0,spn; spn=mySpans[t]; t++) {
               spn.style.border = "4px white solid";
			   spn.style.background = "#eee";
			   spn.style.color = "black"
          }
          obj.style.border = "4px green solid";
		  obj.style.background = "white";
		  obj.style.color = "green";
          document.getElementById("selectedImg").value = obj.childNodes[0].id;
     }</script>
     
<style>
body {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:.8em;
}
table {
	width:50%;
}
td {
	width:150px;
	vertical-align:top;
	padding:12px;
	border:4px white solid;
	text-align: center;
	-moz-border-radius:18px;
	-webkit-border-radius:18px;
}
tr {
	background-color:#eee;
}
</style>
<title>Daily Check-In</title>
</head>
<body>
<table align="center" id="myImgs">
  <form>
    <tr>
      <td colspan="5"><h3>Today, my overall ENERGY is:</h3></td>
    </tr>
    <tr>
      <input type="hidden" id="energy" name="energy">
      <td id="01" onclick="setSelected(this)"><img src="images/batt-01.png"><br />
        Very Low</td>
      <td id="02" onclick="setSelected(this)"><img src="images/batt-02.png"><br />
        Somewhat Low</td>
      <td id="03" onclick="setSelected(this)"><img src="images/batt-03.png"><br />
        Average</td>
      <td id="04" onclick="setSelected(this)"><img src="images/batt-04.png"><br />
        Somewhat High</td>
      <td id="05" onclick="setSelected(this)"><img src="images/batt-05.png"><br />
        Very High</td>
    </tr>
    <tr>
      <td colspan="5"><h3>Today, my overall MOOD is:</h3></td>
    </tr>
    <tr>
      <input type="hidden" id="mood" name="mood">
      <td id="01" onclick="setSelected(this)"><img src="images/mood-01.png"><br />
        Very Sad</td>
      <td id="02" onclick="setSelected(this)"><img src="images/mood-02.png"><br />
        Somewhat Sad</td>
      <td id="03" onclick="setSelected(this)"><img src="images/mood-03.png"><br />
        Average</td>
      <td id="04" onclick="setSelected(this)"><img src="images/mood-04.png"><br />
        Somewhat Happy</td>
      <td id="05" onclick="setSelected(this)"><img src="images/mood-05.png"><br />
        Very Happy</td>
    </tr>
    <tr>
      <td colspan="5"><input name="submit" type="button" value="SUBMIT" /></td>
    </tr>
  </form>
</table>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of kadaba
kadaba
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jsuelflow

ASKER

With much gratitude! Thank you for your help on this.

Line 74 seemed to have an extraneous 'myImgs' in the onclick; removal of that did not alter functionality; please advise if there was a reason for its inclusion.

Again, very many thank yous!
this,'mood','myImgs' should be this,'mood'

No need to include that, sorry missed my eye .

Thanks for the points and have a great day.