click table td and select radio

Question

saad_sinpk 0 Newbie Poster

13 Years Ago

can u guys help me out i have make one form and i want that if i click on text around radio it select radio here is my form code

<form name="myForm" action="join.php" method="post" id="joinPool" name="insert" >
<input type="hidden" value="" name="event_id" >
<input type="hidden" value="survivor" name="game_type" >
<input type="hidden" value="38" name="nexts" >
<input type="hidden" value="405" name="idvar" >

<input type="hidden" value="38" name="uid" >

<tr>

					<td id="percentage175" class="percentage" onclick="set('eventMatch175'); swap(189, 150, 'noPickColumn2223')">
<img src="Chris_leban500x325.gif" alt="Chris_leban500x325.gif" />
											</td>
					<td class="leftColumn">
						<input type="hidden" value="175" name="fight_id" ><span class="fourteen"><strong>Chris Leben</strong></span> &nbsp; 
										

<input id="eventMatch175" type = "radio" name = "fighter" value = "280">
							<span class="eleven">

														<br>Record: 22-7							<br>Height: 5-11		 <br>Weight: 185												</span>
					</td>
					<td id="noPickColumn2223" class="middleColumn active">
						<strong>VS</strong><br>						<span class="joinClass">Middleweight</span>
												
						
					</td>
					<td class="rightColumn">

						 <input type = "radio" name = "fighter" value = "304"> 
					 <span class="fourteen"><strong>Mark Munoz</strong></span>
						 							<span class="eleven">
														<br>Record: 11-2							<br>Height: 6-0		 <br>Weight: 186												</span>
	
					</td>
					<td id="percentage150" class="percentage" onclick="set('eventMatch150'); swap('150', '189', 'noPickColumn2223')">
<img src="Mark_Munoz_500x325.gif" alt="Mark_Munoz_500x325.gif" />
											</td>

				</tr>
						
<tr>

					<td id="percentage176" class="percentage" onclick="set('eventMatch176'); swap(189, 150, 'noPickColumn2223')">
<img src="renan_barao_head.gif" alt="renan_barao_head.gif" />
											</td>
					<td class="leftColumn">
						<input type="hidden" value="176" name="fight_id" ><span class="fourteen"><strong>Renan Barao</strong></span> &nbsp; 
										

<input id="eventMatch176" type = "radio" name = "fighter" value = "282">

							<span class="eleven">
														<br>Record: 26-8							<br>Height: 5-6		 <br>Weight: 135												</span>
					</td>
					<td id="noPickColumn2223" class="middleColumn active">
						<strong>VS</strong><br>						<span class="joinClass">Bantamweight</span>
												
						
					</td>

					<td class="rightColumn">
						 <input type = "radio" name = "fighter" value = "283"> 
					 <span class="fourteen"><strong>Brad Pickett</strong></span>
						 							<span class="eleven">
														<br>Record: 21-4							<br>Height: 5-6		 <br>Weight: 135												</span>
	
					</td>
					<td id="percentage150" class="percentage" onclick="set('eventMatch150'); swap('150', '189', 'noPickColumn2223')">

<img src="/brad_pickett_head.gif" alt="brad_pickett_head.gif" />
											</td>
				</tr>
						
<tr>

					<td id="percentage177" class="percentage" onclick="set('eventMatch177'); swap(189, 150, 'noPickColumn2223')">
<img src="papy_abedi_head.gif" alt="papy_abedi_head.gif" />
											</td>
					<td class="leftColumn">
						<input type="hidden" value="177" name="fight_id" ><span class="fourteen"><strong>Papy Abedi</strong></span> &nbsp; 
										


<input id="eventMatch177" type = "radio" name = "fighter" value = "284">
							<span class="eleven">
														<br>Record: 8-0							<br>Height: 5-11		 <br>Weight: 170												</span>
					</td>
					<td id="noPickColumn2223" class="middleColumn active">
						<strong>VS</strong><br>						<span class="joinClass">Welterweight</span>

												
						
					</td>
					<td class="rightColumn">
						 <input type = "radio" name = "fighter" value = "285"> 
					 <span class="fourteen"><strong>Thiago Alves</strong></span>
						 							<span class="eleven">
														<br>Record: 23-7							<br>Height: 5-9		 <br>Weight: 170												</span>
	
					</td>

					<td id="percentage150" class="percentage" onclick="set('eventMatch150'); swap('150', '189', 'noPickColumn2223')">
<img src="thiago_alves_500x325_ufc.gif" alt="thiago_alves_500x325_ufc.gif" />
											</td>
				</tr>
						
<tr>

					<td id="percentage180" class="percentage" onclick="set('eventMatch180'); swap(189, 150, 'noPickColumn2223')">
<img src="Terry_Etim_500x325.gif" alt="Terry_Etim_500x325.gif" />
											</td>
					<td class="leftColumn">

						<input type="hidden" value="180" name="fight_id" ><span class="fourteen"><strong>Terry Etim</strong></span> &nbsp; 
										

<input id="eventMatch180" type = "radio" name = "fighter" value = "290">
							<span class="eleven">
														<br>Record: 14-3							<br>Height: 6-1		 <br>Weight: 155												</span>
					</td>
					<td id="noPickColumn2223" class="middleColumn active">
						<strong>VS</strong><br>						<span class="joinClass">Lightweight</span>

												
						
					</td>
					<td class="rightColumn">
						 <input type = "radio" name = "fighter" value = "291"> 
					 <span class="fourteen"><strong>Edward Faaloloto</strong></span>
						 							<span class="eleven">
														<br>Record: 5-2							<br>Height: 5-9		 <br>Weight: 155												</span>
	
					</td>

					<td id="percentage150" class="percentage" onclick="set('eventMatch150'); swap('150', '189', 'noPickColumn2223')">
<img src="comingsoon_headshot_.gif" alt="comingsoon_headshot_.gif" />
											</td>
				</tr>
						
<tr>

					<td id="percentage182" class="percentage" onclick="set('eventMatch182'); swap(189, 150, 'noPickColumn2223')">
<img src="cyrille_diabate_head.gif" alt="cyrille_diabate_head.gif" />
											</td>
					<td class="leftColumn">

						<input type="hidden" value="182" name="fight_id" ><span class="fourteen"><strong>Cyrille Diabate</strong></span> &nbsp; 
										

<input id="eventMatch182" type = "radio" name = "fighter" value = "292">
							<span class="eleven">
														<br>Record: 17-7-1							<br>Height: 6-6		 <br>Weight: 205												</span>
					</td>
					<td id="noPickColumn2223" class="middleColumn active">
						<strong>VS</strong><br>						<span class="joinClass">Light Heavyweight</span>

												
						
					</td>
					<td class="rightColumn">
						 <input type = "radio" name = "fighter" value = "293"> 
					 <span class="fourteen"><strong>Anthony Perosh</strong></span>
						 							<span class="eleven">
														<br>Record: 11-6							<br>Height: 6-3		 <br>Weight: 205												</span>
	
					</td>

					<td id="percentage150" class="percentage" onclick="set('eventMatch150'); swap('150', '189', 'noPickColumn2223')">
<img src="anthony_perosh_head.gif" alt="anthony_perosh_head.gif" />
											</td>
				</tr>
						
<tr>

					<td id="percentage183" class="percentage" onclick="set('eventMatch183'); swap(189, 150, 'noPickColumn2223')">
<img src="michihiro_omigawa_head.gif" alt="michihiro_omigawa_head.gif" />
											</td>
					<td class="leftColumn">

						<input type="hidden" value="183" name="fight_id" ><span class="fourteen"><strong>Michihiro Omigawa</strong></span> &nbsp; 
										

<input id="eventMatch183" type = "radio" name = "fighter" value = "294">
							<span class="eleven">
														<br>Record: 12-10							<br>Height: 5-6		 <br>Weight: 143												</span>
					</td>
					<td id="noPickColumn2223" class="middleColumn active">
						<strong>VS</strong><br>						<span class="joinClass">Featherweight</span>

												
						
					</td>
					<td class="rightColumn">
						 <input type = "radio" name = "fighter" value = "295"> 
					 <span class="fourteen"><strong>Jason Young</strong></span>
						 							<span class="eleven">
														<br>Record: 8-4							<br>Height: 5-9		 <br>Weight: 145												</span>
	
					</td>

					<td id="percentage150" class="percentage" onclick="set('eventMatch150'); swap('150', '189', 'noPickColumn2223')">
<img src="jason_young_head.gif" alt="jason_young_head.gif" />
											</td>
				</tr>
						
<tr>

					<td id="percentage184" class="percentage" onclick="set('eventMatch184'); swap(189, 150, 'noPickColumn2223')">
<img src="comingsoon_headshot_.gif" alt="comingsoon_headshot_.gif" />
											</td>
					<td class="leftColumn">

						<input type="hidden" value="184" name="fight_id" ><span class="fourteen"><strong>Philip De Fries</strong></span> &nbsp; 
										

<input id="eventMatch184" type = "radio" name = "fighter" value = "296">
							<span class="eleven">
														<br>Record: 7-0							<br>Height: 6-4		 <br>Weight: 254												</span>
					</td>
					<td id="noPickColumn2223" class="middleColumn active">
						<strong>VS</strong><br>						<span class="joinClass">Heavyweight</span>

												
						
					</td>
					<td class="rightColumn">
						 <input type = "radio" name = "fighter" value = "168"> 
					 <span class="fourteen"><strong>Rob Broughton </strong></span>
						 							<span class="eleven">
														<br>Record: 15-6-1							<br>Height: 6-3		 <br>Weight: 257												</span>
	
					</td>

					<td id="percentage150" class="percentage" onclick="set('eventMatch150'); swap('150', '189', 'noPickColumn2223')">
<img src="rob_broughton_head.gif" alt="rob_broughton_head.gif" />
											</td>
				</tr>
						
<tr>

					<td id="percentage185" class="percentage" onclick="set('eventMatch185'); swap(189, 150, 'noPickColumn2223')">
<img src="ChrisCope_Headshot.gif" alt="ChrisCope_Headshot.gif" />
											</td>
					<td class="leftColumn">

						<input type="hidden" value="185" name="fight_id" ><span class="fourteen"><strong>Chris Cope</strong></span> &nbsp; 
										

<input id="eventMatch185" type = "radio" name = "fighter" value = "298">
							<span class="eleven">
														<br>Record: 5-1							<br>Height: 6-1		 <br>Weight: 170												</span>
					</td>
					<td id="noPickColumn2223" class="middleColumn active">
						<strong>VS</strong><br>						<span class="joinClass">Welterweight</span>

												
						
					</td>
					<td class="rightColumn">
						 <input type = "radio" name = "fighter" value = "299"> 
					 <span class="fourteen"><strong>Che Mills</strong></span>
						 							<span class="eleven">
														<br>Record: 13-4							<br>Height: 5-11		 <br>Weight: 170												</span>
	
					</td>

					<td id="percentage150" class="percentage" onclick="set('eventMatch150'); swap('150', '189', 'noPickColumn2223')">
<img src="comingsoon_headshot_.gif" alt="comingsoon_headshot_.gif" />
											</td>
				</tr>
						
<tr>

					<td id="percentage186" class="percentage" onclick="set('eventMatch186'); swap(189, 150, 'noPickColumn2223')">
<img src="chris_cariaso_head.gif" alt="chris_cariaso_head.gif" />
											</td>
					<td class="leftColumn">

						<input type="hidden" value="186" name="fight_id" ><span class="fourteen"><strong>Chris Cariaso</strong></span> &nbsp; 
										

<input id="eventMatch186" type = "radio" name = "fighter" value = "300">
							<span class="eleven">
														<br>Record: 11-3							<br>Height: 5-3		 <br>Weight: 135												</span>
					</td>
					<td id="noPickColumn2223" class="middleColumn active">
						<strong>VS</strong><br>						<span class="joinClass">Bantamweight</span>

												
						
					</td>
					<td class="rightColumn">
						 <input type = "radio" name = "fighter" value = "301"> 
					 <span class="fourteen"><strong>Vaughan Lee</strong></span>
						 							<span class="eleven">
														<br>Record: 11-6-1							<br>Height: 		 <br>Weight: 135												</span>
	
					</td>

					<td id="percentage150" class="percentage" onclick="set('eventMatch150'); swap('150', '189', 'noPickColumn2223')">
<img src="comingsoon_headshot_.gif" alt="comingsoon_headshot_.gif" />
											</td>
				</tr>
						
<tr>

					<td id="percentage187" class="percentage" onclick="set('eventMatch187'); swap(189, 150, 'noPickColumn2223')">
<img src="justin_edwards.gif" alt="justin_edwards.gif" />
											</td>
					<td class="leftColumn">

						<input type="hidden" value="187" name="fight_id" ><span class="fourteen"><strong>Justin Edwards</strong></span> &nbsp; 
										

<input id="eventMatch187" type = "radio" name = "fighter" value = "302">
							<span class="eleven">
														<br>Record: 7-1							<br>Height: 5-10		 <br>Weight: 170												</span>
					</td>
					<td id="noPickColumn2223" class="middleColumn active">
						<strong>VS</strong><br>						<span class="joinClass">Welterweight</span>

												
						
					</td>
					<td class="rightColumn">
						 <input type = "radio" name = "fighter" value = "303"> 
					 <span class="fourteen"><strong>John Maguire</strong></span>
						 							<span class="eleven">
														<br>Record: 16-3							<br>Height: 5-9		 <br>Weight: 170												</span>
	
					</td>

					<td id="percentage150" class="percentage" onclick="set('eventMatch150'); swap('150', '189', 'noPickColumn2223')">
<img src="comingsoon_headshot_.gif" alt="comingsoon_headshot_.gif" />
											</td>
				</tr>
						

						<tr>
				<td></td>

				<td></td>
				<td class="center"><input class="global" value="Submit My Picks!" type="submit" name="insert_join" value="Submit"></td>
			</tr>

		</tbody></table>
		
		
		
	</form>

javascript

3 Contributors
4 Replies
113 Views
4 Days Discussion Span
Latest Post 13 Years Ago Latest Post by super9876

MartinRinehart 0 Junior Poster in Training

13 Years Ago

Hey, friend, that's way too much code! Hire a consultant to go that way.

For a little friendly, free support, narrow the issue down to maybe a dozen lines and a well-focused question.

In general, use a div around each neighborhood and assign an 'onclick' handler to the div. Code you want to execute goes in the handler, thus:

<script type='text/JavaScript'>
<div id='area1'>
     stuff here for first clickable area
</div>

<script type='text/JavaScript'>
    var a1_ref = document.getElementById( 'area1' );
        a1_ref.onclick = handle_click; // no parens, no quotes!

    function handle_click() {
        this.style.background = 'red'; // good way to test a click handler
    }
    ...

</script>

Edited 11 Years Ago by Dani because: Formatting fixed

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

saad_sinpk 0 Newbie Poster · Answer 1 · 2011-11-05T01:28:46+00:00

here is small code

<form name="myForm" action="join.php" method="post" id="joinPool" name="insert" >
<input type="hidden" value="" name="event_id" >
<input type="hidden" value="survivor" name="game_type" >
<input type="hidden" value="38" name="nexts" >
<input type="hidden" value="405" name="idvar" >

<input type="hidden" value="38" name="uid" >

						
<tr>

					<td id="percentage187" class="percentage" onclick="set('eventMatch187'); swap(189, 150, 'noPickColumn2223')">
<img src="justin_edwards.gif" alt="justin_edwards.gif" />
											</td>
					<td class="leftColumn">

						<input type="hidden" value="187" name="fight_id" ><span class="fourteen"><strong>Justin Edwards</strong></span> &nbsp; 
										

<input id="eventMatch187" type = "radio" name = "fighter" value = "302">
							<span class="eleven">
														<br>Record: 7-1							<br>Height: 5-10		 <br>Weight: 170												</span>
					</td>
					<td id="noPickColumn2223" class="middleColumn active">
						<strong>VS</strong><br>						<span class="joinClass">Welterweight</span>

												
						
					</td>
					<td class="rightColumn">
						 <input type = "radio" name = "fighter" value = "303"> 
					 <span class="fourteen"><strong>John Maguire</strong></span>
						 							<span class="eleven">
														<br>Record: 16-3							<br>Height: 5-9		 <br>Weight: 170												</span>
	
					</td>

					<td id="percentage150" class="percentage" onclick="set('eventMatch150'); swap('150', '189', 'noPickColumn2223')">
<img src="comingsoon_headshot_.gif" alt="comingsoon_headshot_.gif" />
											</td>
				</tr>
						

						<tr>
				<td></td>

				<td></td>
				<td class="center"><input class="global" value="Submit My Picks!" type="submit" name="insert_join" value="Submit"></td>
			</tr>

		</tbody></table>
		
		
		
	</form>

if i use your code i think it will not tick radio is there any way from which i can tick radio also ?

MartinRinehart 0 Junior Poster in Training · Answer 2 · 2011-11-05T14:54:37+00:00

Once you have control with your JS function you can do anything you like in the function. I always begin by popping an 'alert()' or setting the background red - either will tell you that you have, in fact, successfully called the function. (Too many times I used to write code, then try to 'debug' it when it wasn't even called.)

super9876 0 Newbie Poster · Answer 3 · 2011-11-09T01:53:12+00:00

wow. that's a huge block of code. perhaps reduce it all and just try one field and get that to work. it'll be easier to see what's going on too.