[HTML] Need to combine drop down and checkbox values

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

HowdeeDoodee

Thread Starter
Joined
Aug 26, 2004
Messages
615
I need to combine the input from checkboxes with a hyperlink embedded in an on-click drop down box. At the present time I do not have any checkboxes in my htlm drop down code. This means the user only goes to the following link based on upon what is in the link below. However, I do not want this.


Code:
<select name="values" onChange="if(this.options[this.selectedIndex].value) window.location.href=this.options[this.selectedIndex].value;"> 
<option>FIND TOPICS STARTING WITH "A"</option>
<option value="http://www.websiteaddress.com/XC/FindTopic.php?TY=ON&TE=ON&SeeTopic=A">A</option>
</select>
When a user clicks on the above drop down the user is taken to the following page:

Code:
http://www.websiteaddress.com/XC/FindTopic.php?TY=ON&TE=ON&SeeTopic=A
What I want to do is make check boxes available so a user can choose between TY and TE and have the TY=ON or the TE=ON added on to or appended to the following hyperlink

Code:
http://www.websiteaddress.com/XC/FindTopic.php?SeeTopic=A
Therefore, I want the user to be able to click on the TY checkbox, the user will hit the drop down entry and get sent to the following page with the TY checkbox checked.

Code:
http://www.websiteaddress.com/XC/FindTopic.php?SeeTopic=A&TY=ON
Or, if the user clicks on the TE checkbox, the user will be sent to the following page.

Code:
http://www.websiteaddress.com/XC/FindTopic.php?SeeTopic=A&TE=ON
Or, if the user clicks on both the TE checkbox and the TY checkbox, the user will be sent to the following page.

Code:
http://www.websiteaddress.com/XC/FindTopic.php?SeeTopic=A&TE=ON&TY=ON
Thank you in advance for any replies.

Edited to show code rather than html links
 

HowdeeDoodee

Thread Starter
Joined
Aug 26, 2004
Messages
615
OK, another way to solve this problem is to send more than one value from within a drop down box. Does anyone know how to send more than one value in a drop down box? For example, how would I sent TE=ON and TY=ON when the drop down is clicked?
 
Joined
Jul 19, 2005
Messages
37
how about creating the js function:

Code:
click_on_select(){
chkTE = eval("document.myform.TE"); 
if (chkTE.checked == true){
 var TE = '&TE=ON';
}else{
 var TE = '&TE=OFF';
}
chkTY = eval("document.myform.TY"); 
if (chkTY.checked == true){
 var TY = '&TY=ON';
}else{
 var TY = '&TY=OFF';
}
window.location.href=document.myform.values.options[this.selectedIndex].value+TE+TY;
}
with this html code


HTML:
<form name=myform>
<select name="values" onChange="javascript:click_on_select();"> 
<option>FIND TOPICS STARTING WITH "A"</option>
<option value="http://www.websiteaddress.com/XC/FindTopic.php?&SeeTopic=A">A</option>
</select>
<input type=check name=TE>
<input type=check name=TY>
</form>
 

HowdeeDoodee

Thread Starter
Joined
Aug 26, 2004
Messages
615
EtHEO, thank you for the submission. I will give the script a try and report back here on the board.
 

HowdeeDoodee

Thread Starter
Joined
Aug 26, 2004
Messages
615
EtHeO, it appears your code has an error. The error message I get when I either try to run the code from FrontPage or in IE is the following.

Error: 'document.myform.values.options [...] value' is null or not an object

Perhaps you could check the code on your end and report back.

I did add the word function to the top of the code and did have to change the word check to checkboxes to get the checkboxes to appear. Here is what I used to check your code with...

<script type="text/javascript">
function click_on_select()
{

chkTE = eval("document.myform.TE");
if (chkTE.checked == true)
{
var TE = '&TE=ON';
}else{
var TE = '&TE=OFF';
}

chkTY = eval("document.myform.TY");
if (chkTY.checked == true)
{
var TY = '&TY=ON';
}else{
var TY = '&TY=OFF';
}

window.location.href=document.myform.values.options[this.selectedIndex].value+TE+TY;
}

</script>

<form name=myform>
<select name="values" onChange="javascript:click_on_select();">
<option>FIND TOPICS STARTING WITH "A"</option>
<option value="http://www.websiteaddress.com/XC/FindTopic.php?&SeeTopic=A">A</option>
</select>
TE <input type=checkbox name=TE>
TY<input type=checkbox name=TY>
</form>
 
Joined
Jul 19, 2005
Messages
37
I'm sorry, dumb mistake on my end, forgot to work out the original 'this' elements.
The html is correct, here's the new js:

Code:
<script type="text/javascript">
function click_on_select()
{

chkTE = eval("document.myform.TE"); 
if (chkTE.checked == true)
{
var TE = '&TE=ON';
}else{
var TE = '&TE=OFF';
}

chkTY = eval("document.myform.TY"); 
if (chkTY.checked == true)
{
var TY = '&TY=ON';
}else{
var TY = '&TY=OFF';
}

window.location.href=document.myform.values.options[document.myform.values.selectedIndex].value+TE+TY;
}

</script>
I tested it, and it works with this html:
HTML:
<html>
<head>
<script type="text/javascript" src="options.js">
</script>
</head>
<body>
<form name=myform>
 <select name="values" onChange="javascript:click_on_select();">
  <option>FIND TOPICS STARTING WITH "A"</option>
  <option value="http://www.websiteaddress.com/XC/FindTopic.php?&SeeTopic=A">A</option>
 </select>
 TE <input type=checkbox name=TE> 
 TY <input type=checkbox name=TY>
</form>
</body>
</html>
where options is the js file of course.

Another method is using the forms for what they're actually meant for, using this html page (with a tiny bit of js in it):
HTML:
<html>
<body>
<form name="myform" action="http://www.websiteaddress.com/XC/FindTopic.php">
 <select name="SeeTopic" onChange="if(this.options[this.selectedIndex] != ''){document.myform.submit(); return true;}else{return false;}">
  <option value="">FIND TOPICS STARTING WITH "A"</option>
  <option value="A">A</option>
 </select>
 TE <input type=checkbox name=TE> 
 TY <input type=checkbox name=TY>
</form>
</body>
</html>
The only difference with the previous page is that this one sends the ON or OFF in low case (so this sends on and off).
Hope to have helped you.

EtHeO
 

HowdeeDoodee

Thread Starter
Joined
Aug 26, 2004
Messages
615
Thank you, the script is working. I have two remaining issues.

Issue 1. Can you make it so only ON is passed?

In my php page I set up the variables searching through the db in the followring way:

Code:
if(!empty($TE1))
   {
   $TE = "'TE'";
   }
   else
   {
   $TE = "''";
   }


  if(!empty($TY)){
  $TY = "'TY'";
   }
   else
   {
   $TY = "''";
   }
However, since the php page is now getting two values, both ON and OFF, the TE and TY variables are always being searched. How do I change your script to make it so the only variable passed to the php page is ON. In other words, how do I make it so OFF is not passed to the php page.

Issue 2. Can you add a submit button?

Another issue is this. When the user clicks on checkbox TE and runs a search everything works as it should. However, if the user then goes back to the html drop down page and selects checkbox TY or both checkboxes TE and TY, the user has to refresh the page to get the already chosen drop down selection to re-activate. Once clicked, even though the drop down selection is still hi-lighted, the drop down selection is no longer active if the user goes back to the html drop down page. Since the drop downs can have hundreds of selections, having to refresh the page and then look up the user's wanted drop down value a second, third, or fourth time is a major pain and inconvenience for the user. Is is possible to put a submit button on this form so the user can go back to the html drop down page and change the user's selection checkbox selection, hit a submit button, and be taken to the user's new checkbox selection in the db?

Thank you for the submission. Your help is greatly appreciated.

EDITED TO ADD: If you can add a submit button to this script, this script will prove to be incredibly valuable to js and php users. I have been trying for days to find a script to do what I need done and no script can be found. Combining drop downs and check boxes adds great search capability. Thanks.
 
Joined
Jul 19, 2005
Messages
37
A submit button is easy:
HTML:
<input type="submit" value="Click me!">
When you want people to choose between either TY or TE, you can add radio button by doing this:
HTML:
<input type=radio name="method" value="TY">
<input type="radio" name="method" value="TE">
This way, the value comes in by the name of method, with either the value TY or TE.
You can make the script select between these value by the following:
PHP:
switch($_REQUEST['method']){
case "TE";
echo "You chose TE"; //or whatever you want
break;

case "TY";
echo "You chose TY"; //or whatever
break;

default;
echo "Nothing was selected";
break;
}
Made this up on the fly, haven't had the chance to test it yet.
Let me know if it works.

EtHeO
 

HowdeeDoodee

Thread Starter
Joined
Aug 26, 2004
Messages
615
Thank you for the reply.

Issue 1: Turning off the OFF. In the following js code, how do I give the checkboxes only one value with that value being ON? The checkboxes have to stay as checkboxes because the user will want to select more than one checkbox at a time. In the actual application, there will be a minimum of seven with more to be added later.

To get the checkboxes to have only one value of ON I tried deleting the

"else{
var BT = '&BT=OFF';
}"

part of the if-else but something else has to be changed because I got an error message when I made this deletion. So, how do I make the checkboxes have only one value with that value being "ON"?


Issue 2. On-click event of the submit button. Notice I added a submit button to the form and made the drop downs regular drop downs using the <select> tages. However, I tried making your select on-change event the click event for the submit button. Making the on-Change event an on-Click event did not work. The problem now is the event for the submit button must be different than the onChange event. Can you give me the proper code for a submit button for this form? I expect my syntax for the button may also be incorrect.


Code:
<script type="text/javascript">
function click_on_select()
{

chkBT = eval("document.myform.BT"); 
if (chkBT.checked == true)
{
var BT = '&BT=ON';
}
else{
var BT = '&BT=OFF';
}

chkTR = eval("document.myform.TR"); 
if (chkTR.checked == true)
{
var TR = '&TR=ON';
}
else{
var TR = '&TR=OFF';
}

window.location.href=document.myform.values.options[document.myform.values.selectedIndex].value+BT+TR;
}

</script>

<html>
<head>
<script type="text/javascript" src="options.js">
</script>
</head>
<body>
<form name=myform>
<input type="submit" value="Submit Query" name="Subbutton" onSubmit="javascript:click_on_select();">
<select>
<option>FIND TOPICS STARTING WITH "A"</option>
<option value="http://www.websiteaddress.com/XP/RefNew.php?BK=Tapper&CH=10&VR=20">option 1</option>
<option value="http://www.websiteaddress.com/XP/RefNew.php?BK=Isam&CH=45&VR=7">Isa option 2</option>
<option value="http://www.websiteaddress.com/XP/RefNew.php?BK=Jameston&CH=3&VR=17">option 3</option>
<option value="http://www.websiteaddress.com/XP/RefNew.php?BK=Spindel&CH=2&VR=4"> option 4</option>
 BT 
 </select>
 <p>BT<input type="checkbox" name="BT" value="ON">
 TR <input type="checkbox" name="TR" value="ON">
 </p>
</form>
</body>
</html>
 
Joined
Jul 19, 2005
Messages
37
Issue two:
HTML:
<input type="submit" value="Submit Query" name="Subbutton" onSubmit="javascript:click_on_select();">
There is no onSubmit I know of. Try using onClick. Here's the new code:
HTML:
<input type="submit" value="Submit Query" name="Subbutton" onClick="javascript:click_on_select();">
For issue one:
Code:
<script type="text/javascript">
function click_on_select(){
chkBT = eval("document.myform.BT"); 
if (chkBT.checked == true){
var BT = '&BT=ON';
}else{
var BT = '';
}
chkTR = eval("document.myform.TR"); 
if (chkTR.checked == true){
var TR = '&TR=ON';
}else{
var TR = '';
}
window.location.href=document.myform.values.options[document.myform.values.selectedIndex].value+BT+TR;
}
</script>
This would leave the value if it is not selected.
Let me know if it is what you want.
 

HowdeeDoodee

Thread Starter
Joined
Aug 26, 2004
Messages
615
Thank you for the suggestions.

Using the onClick event you suggest, I am getting the following error

error...documment.myform.values.options is null or not an object
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Members online

Top