By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,835 Members | 1,959 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,835 IT Pros & Developers. It's quick & easy.

Radio and check boxes problems

P: n/a
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

Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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').getAttribut e('checked') ==
'true') {
document.getElementById('Contract').setAttribute(' checked', 'true');
} else {
document.getElementById('Contract').removeAttribut e('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.

Jul 23 '05 #2

P: n/a
<ji******@hotmail.com> wrote in message
news:11**********************@g49g2000cwa.googlegr oups.com...
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


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.
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.