Input Type = "Image"

[Jawahar Rajan]

All,
I am using a few Input type of "Image" instead of a classic submit button in
a form to achieve various tasks

for example
image1 - add user
image2 - modify user
image3 - delete user
image4 - reSet user.

These are only image and I use the onClick event to run JavaScript function
called whichPage

Function whichPage(nextPage)
{
if (nextPage = = 'addUser')
document.frmAdmin.action="AdminNewUser.asp"
if (nextPage = = 'modUser')
document.frmAdmin.action="AdminModUser.asp"
if (nextPage = = 'delUser')
document.frmAdmin.action="AdminDelUser.asp"
if (nextPage = = 'resetUser')
document.frmAdmin.action="AdminResetUser.asp"

}


in the main form there is a list of users with a radio button to each user.
What I want to do is to check that at least one radio button is selected
when the image2, image3 or image4 is clicked.
I have tried to use onClick="return whichPage()"
But I do not think that returning "false" to the onClick event works because
of the document.frmAdmin.action="...." will re-route the page before it can
return.
So my queation is how can I check that At least one radio button is checked
when one of the three images in question are clicked.
The form on Submit is no good because it will also check it when Image1 is
clicked and I do not want; as this adds a new user and hence an existing one
does not need to be selected.

Any suggestions or ideas will be appreciated

Thanks
Jawahar

 

[Grant Wagner]

All,
I am using a few Input type of "Image" instead of a classic submit button in
a form to achieve various tasks

for example
image1 - add user
image2 - modify user
image3 - delete user
image4 - reSet user.

These are only image and I use the onClick event to run JavaScript function
called whichPage

Function whichPage(nextPage)
{
if (nextPage = = 'addUser')
document.frmAdmin.action="AdminNewUser.asp"
if (nextPage = = 'modUser')
document.frmAdmin.action="AdminModUser.asp"
if (nextPage = = 'delUser')
document.frmAdmin.action="AdminDelUser.asp"
if (nextPage = = 'resetUser')
document.frmAdmin.action="AdminResetUser.asp"

}

in the main form there is a list of users with a radio button to each user.
What I want to do is to check that at least one radio button is selected
when the image2, image3 or image4 is clicked.
I have tried to use onClick="return whichPage()"
But I do not think that returning "false" to the onClick event works because
of the document.frmAdmin.action="...." will re-route the page before it can
return.
So my queation is how can I check that At least one radio button is checked
when one of the three images in question are clicked.
The form on Submit is no good because it will also check it when Image1 is
clicked and I do not want; as this adds a new user and hence an existing one
does not need to be selected.

Any suggestions or ideas will be appreciated

Thanks
Jawahar

Setting the action attribute of a form does not cause the form to be submitted,
so all your function is doing is setting the action on the form, the onclick
event returns and the default behavior of the <input type="image" ...> takes
place (that it, it submits the form).

Returning false to the onclick event of <input type="image" ...> will prevent
the form from being submitted. You've also got some syntax errors in your code,
and you probably want to write it as a switch to make it clearer what you're
doing.

function whichPage(imageInput, nextPage) {
var f = imageInput.form;
var theUserRadios = f.elements['userRadio'];
var userPicked = false;

if (typeof theUserRadios.length == 'undefined') {
// normalize a single radio to an array
theUserRadios = [ theUserRadios ];
}

// look at each radio input to see if it's selected
for (var i = 0; i < theUserRadios.length; i++) {
if (theUserRadios.checked) {
userPicked = true;
break;
}
}

if (userPicked) {
// if a radio input was picked, change the action
var formAction;
switch(nextPage) {
case 'addUser':
formAction = "AdminNewUser.asp";
break;
case 'modUser':
formAction = "AdminModUser.asp";
break;
case 'delUser':
formAction = "AdminDelUser.asp";
break;
case 'resetUser':
formAction = "AdminResetUser.asp";
break;
}
imageInput.form.action = formAction;
} else {
// no user picked
alert('You must pick a user first.');
}

return userPicked;
}

It's called with <input type="image" ... onclick="return whichPage(this,
'addUser');" /> etc

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 6/7 and Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html