473,405 Members | 2,310 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,405 software developers and data experts.

Show/Hide buttons based on radio selection

I have a form with three radio options. And I have three buttons:
<input type="submit" name="mainform_action" value="Edit Data">
<input type="submit" name="mainform_action" value="View Data">
<input type="submit" name="mainform_action" value="Delete Data">

If the first radio button is selected, I only want all three buttons to be
visible to the user.

If the second radio button is selected, I only want the "Edit Data" and "View
Data" buttons to be visible.

If the third radio button is selected, I only want the "View Data" button to be
visible.

Is it possible to accomplish this in Javascript? In particular, I want to
continue using the "input type=submit" buttons without having to create my own.
Jul 20 '05 #1
3 23840
Owen Funkhouser wrote:
I have a form with three radio options. And I have three buttons:
<input type="submit" name="mainform_action" value="Edit Data">
<input type="submit" name="mainform_action" value="View Data">
<input type="submit" name="mainform_action" value="Delete Data">

If the first radio button is selected, I only want all three buttons to be
visible to the user.

If the second radio button is selected, I only want the "Edit Data" and "View
Data" buttons to be visible.

If the third radio button is selected, I only want the "View Data" button to be
visible.

Is it possible to accomplish this in Javascript?
Yes, it is. Enclose the radio *buttons* in a `fieldset' element or leave
them as children of the `form' element. Use the `onchange' event handler
of either element to call a user-defined method that sets the either the
`visibility' property to `hide' or `show' (Netscape 4.x), or the
`style.visibility' property to `hidden' or `visible' (others), depending
on the value of the `checked' property of the radio buttons. Good luck!
In particular, I want to continue using the "input type=submit"
buttons without having to create my own.


Null problemo.
PointedEars

Jul 20 '05 #2
Thomas 'PointedEars' Lahn <Po*********@web.de> writes:
Enclose the radio *buttons* in a `fieldset' element or leave them as
children of the `form' element. Use the `onchange' event handler of
either element


I didn't know that forms or fieldsets had onchange event handlers.
Checking the HTML 4.01 specification gives no mention of these.

I tested in IE 6, Opera 7 and Mozilla, using the following code:
---
<form onchange="alert('form')" action="">
<fieldset onchange="alert('field')"><legend>Test</legend>
<input name="too" onchange="alert('input')">
</fieldset>
</form>
---
and it threw all alerts in in Opera and Moz. In IE, only the input alert
was displayed.

The code is valid HTML 4.01 strict except for the onchange attributes
in the form and fieldset tags.

It seems these non-standard event handlers are not implemented in IE,
so a solution using them might not be generally applicable.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
~
Jul 20 '05 #3
On 23 Oct 2003 15:49:48 +0200, Lasse Reichstein Nielsen
<lr*@hotpop.com> brought forth from the murky depths:
Thomas 'PointedEars' Lahn <Po*********@web.de> writes:
Enclose the radio *buttons* in a `fieldset' element or leave them as
children of the `form' element. Use the `onchange' event handler of
either element


I didn't know that forms or fieldsets had onchange event handlers.
Checking the HTML 4.01 specification gives no mention of these.

I tested in IE 6, Opera 7 and Mozilla, using the following code:
---
<form onchange="alert('form')" action="">
<fieldset onchange="alert('field')"><legend>Test</legend>
<input name="too" onchange="alert('input')">
</fieldset>
</form>
---
and it threw all alerts in in Opera and Moz. In IE, only the input alert
was displayed.


Along the same line, I need to check for empty fields and am currently
using this script to do so. The problem is that it doesn't check radio
button fieldsets (or checkboxes). How would I add that in the simplest
way? All she wants me to check for are empties.

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: wsabstract.com -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function checkrequired(which) {
var pass=true;
if (document.images) {
for (i=0;i<which.length;i++) {
var tempobj=which.elements[i];
if (tempobj.name.substring(0,1)=="x") {
if (((tempobj.type=="text"||tempobj.type=="textarea") &&
tempobj.value=='')||(tempobj.type.toString().charA t(0)=="s"&&
tempobj.selectedIndex==0)) {
pass=false;
break;
}
}
}
}
if (!pass) {
shortFieldName=tempobj.name.substring(2,30).toUppe rCase();
alert("Please make sure the "+shortFieldName+" field is completed.");
return false;
}
else
return true;
}
// End -->
</script>

I add an x to the fieldname and strip off both the prefix letters
and the x. EG: name="xdname" is a required deliver-to name.

Is there a simple way to add radio button checking?

Jul 20 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Ken Fine | last post by:
I've made a content managment system that uses icons to represent page layouts. To choose a different layout, the user clicks on a radio button associated with each layout icon. On click of one of...
9
by: sergio | last post by:
Hi all, I have created the following script that will show/hide a menu based on checkboxes. It works fine in Opera but not on IE6! Does anybody knows a workaround this problem? Thanks for your...
10
by: DettCom | last post by:
Hello, I would like to be able to display or hide fields based on whether a specific Yes/No radio button is selected. This is in conjunction with a posting a just made here in the same group...
2
by: MOHSEN KASHANI | last post by:
Hi, I am trying to hide some form elements in a form by default and show/hide depending on which radio button is clicked. This is what I have but it is not working: <head> <style> ..noshow {...
5
by: dje | last post by:
In the OnClick event on a radioButtonList, I run a javascript to show/hide the appropriate div along with a submit button, which displays as expected. The problem is the submit no longer works on...
3
by: Mefistofeles | last post by:
Hello. Need help to make text-based radio buttons. On my calender site I want to have text that works like radio buttons. Exampel, bold text is the selected radio-text. Jan Feb Mar Apr May...
1
by: stewdizzle | last post by:
I have a from with three radio buttons (same group) and three text boxes. The radio buttons give the user a choice of uploading one, two, or three images. Currently, I have the text boxes load as...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.