Radio and check boxes problems

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

jimi_xyz@hotmail.com - 30 Jun 2005 14:36 GMT

Sorry if this isn't the correct group, i don't think there is a group
for straight HTML. I am trying to create a type of search engine. There
are two radio buttons at the top, in the middle there is a text box,
with the search button next to it, and at the bottom there are four
check boxes. When the form loads one of the two radio buttons are
selected as the default, what i want is when someone clicks on one of
the four checkboxes, one of the two radio buttons are deselected. The
user is able to select all 4 checkboxes if he/she wishes, but if they
click on a check box, the radio button, depending on which one is
select is deselected. Sorry if thats confusing, I don't know much
javascript, so a in depth example would be nice, here is my code so
far....

<form class="complex-form" name="searchForm" method="post"
action="Directory.asp">
<TABLE border="1" cellspacing="2" summary="Search Form">
<TR>
<TD rowspan="3"><FONT size ="+3" COLOR=blue
face=arial><b>JIFFY</B></FONT>
    <FONT size="+2" color="#CCCCCC"
face=arial><B>Search</B></FONT></TD>

<TD><center><input type="radio" name="SearchType" selected disable
Value="Contract" checked> Contract Number
     <input type="radio" name="SearchType" disable Value="JON">
Job Order Number (JON)
     </center></TD>
</TR>
<TR>
<TD><center><label for="SearchBox"></label>
    <input TYPE="text" NAME="SearchBox" id="SearchBox" SIZE="55"
MAXLENGTH="55" value="<%=request("searchwords")%>">
<input type="Submit" Value="Search" class=button>
    </center></TD>
</TR>
<TR>
<TD><center><input type="checkbox" name="SearchType" disable
Value="Title"> Title
    <input type="checkbox" name="SearchType" disable Value="Scope">
Scope
    <input type="checkbox" name="SearchType" disable
Value="Objective"> Objective
    <input type="checkbox" name="SearchType" disable
Value="Approach"> Approach
    </center></TD>
</TABLE>
</form>

Thank you any help will be greatly appreciated,
Jimmie

Reply to this Message

LV_Indy - 30 Jun 2005 15:26 GMT

You need to put an onclick handler on each checkbox that reads through
the checkboxes whenever one changes and decides which radio button to
select.

example of one of your checkboxes:

<input id="SearchType" type="checkbox" name="SearchType" disable

> Value="Title" onclick="handle_oncheck();">

example javascript:

function handle_oncheck () {
if (document.getElementById('SearchType').getAttribute('checked') ==
'true') {
document.getElementById('Contract').setAttribute('checked', 'true');
} else {
document.getElementById('Contract').removeAttribute('checked');
}
}

Obviously you'll want to put your own logic in that function but that's
an example. And if you are going to do it this way, you'll need to put
a unique id on each of your input elements so you can use
getElementById. For my example to work, you would need one of your
radio buttons to have the id="Contract".

Hope this helps.
Laura.

Reply to this Message

McKirahan - 30 Jun 2005 15:51 GMT

> Sorry if this isn't the correct group, i don't think there is a group
> for straight HTML. I am trying to create a type of search engine. There
[quoted text clipped - 46 lines]
> Thank you any help will be greatly appreciated,
> Jimmie

Here's a variation of your code. Watch for word-wrap.

<html>
<head>
<title>engine.htm</title>
<script type="text/javascript">
function SearchTypes(that) {
var form = document.searchForm;
if (that.checked) {
for (var i=0; i<form.SearchType0.length; i++) {
form.SearchType0[i].checked = false;
}
}
}
</script>
<style type="text/css">
td { font-family:Arial; height:32px }
th { font-family:Arial; font-weight:bold }
.button { background-color: #FFFFFF }
.border { border:solid 1px #AAAAAA }
</style>
</head>
<body>

<form action="Directory.asp" class="complex-form" method="post"
name="searchForm">
<table border="0" cellpadding="0" cellspacing="2" summary="Search Form"
width="700" class="border">
<tr>
<th rowspan="3" width="150">
<font size="+3" color=blue>JIFFY</font><br>
<font size="+2" color="#CCCCCC">Search</font>
</th>
<td align="center">
<input type="radio" name="SearchType0" value="Contract" checked>
Contract Number
<input type="radio" name="SearchType0" value="JON"> Job Order Number
(JON)
</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" name="SearchType1" onclick="SearchTypes(this)"
value="Title"> Title
<input type="checkbox" name="SearchType2" onclick="SearchTypes(this)"
value="Scope"> Scope
<input type="checkbox" name="SearchType3" onclick="SearchTypes(this)"
value="Objective"> Objective
<input type="checkbox" name="SearchType4" onclick="SearchTypes(this)"
value="Approach"> Approach
</td>
</tr>
<tr>
<td align="center">
<input type="text" name="SearchBox" size="55" maxlength="55"
value="<%=request("searchwords")%>">
<input type="Submit" Value="Search" class="button">
</center>
</td>
</tr>
</table>
</form>

</body>
</html>

What do you want to happen if the select a radio button after checking a
checkbox?

You could disable the radio buttons if any check box is checked.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / June 2005

Radio and check boxes problems