All I want is to make an Image click activate a radio button

O

otherblandart

Hi All!

I've dug and dug and can't seem to find what should be a simple
solution (disclaimer: I'm VERY new at javascript).

Basically, I have a simple form, with a number of text boxes, a drop
down or two, and a group of radio buttons (used to select a phone
model from 4 options, paired with images of the 4 phones). What I want
is to set the onClick for each image to select the corresponding
option button. here's what I have so far:

In the <head>:

<script type="text/javascript">
<!--
function pickOpt(theValue) {
var dfe = document.SPOrdDet.radModel;
dfe[theValue].checked=true;
return
}
//-->
</script>

In the <form> (included line breaks for readability here)

<input type="radio" name="radModel" value="SPR8703">
<img border="0"
src="images/SP8703e.gif" width="104" height="166" align="middle"
onclick="javascript:pickOpt(0);">
<input type="radio" name="radModel" value="SPR8830">
<img border="0"
src="images/SP8830.gif" width="97" height="166" align="middle"
onclick="javascript:pickOpt(1);">
<input type="radio" name="radModel" value="VZW8703">
<img border="0"
src="images/VZ8703e.jpg" align="middle"
onclick="javascript:pickOpt(2);">
<input type="radio" name="radModel" value="VZW8830">
<img border="0"
src="images/VZ8830.jpg" width="95" height="166" align="middle"
onclick="javascript:pickOpt(3);">

No matter what I try (in addition to the script piece above I've tried
several other contructs, including looping through each option), I get
either an 'Object Expected' or 'document.SPOrdDet.radModel' is null or
not an object' error.

I'm using FrontPage (I know, but it's what my employer has to work
with ;), and all the above is in an asp file.

This thing is driving me nuts! Any and all input is greatly
appreciated!!
 
R

RobG

Hi All!

I've dug and dug and can't seem to find what should be a simple
solution (disclaimer: I'm VERY new at javascript).

Basically, I have a simple form, with a number of text boxes, a drop
down or two, and a group of radio buttons (used to select a phone
model from 4 options, paired with images of the 4 phones). What I want
is to set the onClick for each image to select the corresponding
option button. here's what I have so far:
Click to expand...

You *should* be able to do it with pure HTML, something like:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>foo</title>
<form action="">
<div>

<label for="x0"><img src="phone1.gif" alt="">
<input type="radio" id="x0" name="rSet_0"></label>

<label for="x1"><img src="phone2.gif" alt="">
<input type="radio" id="x1" name="rSet_0"></label>

</div>
</form>


However, since IE won't handle that, you must use script.


In the <head>:

<script type="text/javascript">
<!--
Click to expand...

Forget the HTML comment delimiters inside script elements, they are
completely unnecessary.

function pickOpt(theValue) {
var dfe = document.SPOrdDet.radModel;
dfe[theValue].checked=true;
return
}
//-->
</script>

In the <form> (included line breaks for readability here)

<input type="radio" name="radModel" value="SPR8703">
<img border="0"
src="images/SP8703e.gif" width="104" height="166" align="middle"
onclick="javascript:pickOpt(0);">
Click to expand...

Ditch the "javascript:", it is not required.

<input type="radio" name="radModel" value="SPR8830">
<img border="0"
src="images/SP8830.gif" width="97" height="166" align="middle"
onclick="javascript:pickOpt(1);">
<input type="radio" name="radModel" value="VZW8703">
<img border="0"
src="images/VZ8703e.jpg" align="middle"
onclick="javascript:pickOpt(2);">
<input type="radio" name="radModel" value="VZW8830">
<img border="0"
src="images/VZ8830.jpg" width="95" height="166" align="middle"
onclick="javascript:pickOpt(3);">

No matter what I try (in addition to the script piece above I've tried
several other contructs, including looping through each option), I get
either an 'Object Expected' or 'document.SPOrdDet.radModel' is null or
not an object' error.
Click to expand...

Then it is your HTML. If you're using HTML 4 strict and SPOrdDet is
the form's id, use:

var dfe = document.forms['SPOrdDet'].elements['radModel'];


That will work with all doctypes and both form ids and names.
 
O

otherblandart

No matter what I try (in addition to the script piece above I've tried
several other contructs, including looping through each option), I get
either an 'Object Expected' or 'document.SPOrdDet.radModel' is null or
not an object' error.
Click to expand...

Then it is your HTML. If you're using HTML 4 strict and SPOrdDet is
the form's id, use:

var dfe = document.forms['SPOrdDet'].elements['radModel'];

That will work with all doctypes and both form ids and names.
Click to expand...

Using that returned a similar error:
'document.forms.SPOrdDet.elements' is null or not an object :(

It's like there's something preventing the page from recognizing the
DOM ???

H
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How can I arrange a series of radio buttons? 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
How to properly insert a landing page within same container beneath an image element? 1
Image on header 2
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0
Image not changing between "mute" & "un-mute" images. 5
Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
How do I fix this issue in sqaurespace code block? 1

Members online

No members online now.
Total: 260 (members: 1, guests: 259)
Robots: 219

Forum statistics

Threads
474,262
Messages
2,571,043
Members
48,769
Latest member
Clifft

Latest Threads

Top