How do I combine onclick drop down event and check box value

HowdeeDoodee · Jul 13, 2005

I am using the following code which works fine.

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="[URL unfurl="true"]http://www.websitenow.com/XC/NewPage.php?BT=ON&BK=Tap&CH=10&VR=20[/URL]
</select>

The above code generates a web site url below.

Code:

[URL unfurl="true"]http://www.webpage.com/XZ/SeeNew.php?BT=ON&BK=Tap&CH=10&VR=20[/URL]

However, I want to be able to put checkboxes on the form and have the onclick event grab the url of

Code:

[URL unfurl="true"]http://www.websitenow.com/XC/NewPage.php?Tap&CH=10&VR=20[/URL]

AND then append BT=ON to the url if the user checks the BT checkbox. Is this possible? Thank you in advance for any replies.

jemminger · Jul 13, 2005

here's one way:

Code:

<script type="text/javascript">
	function nav(sel) {
		if (sel.selectedIndex > 0) {
			var val = sel.options[sel.selectedIndex].value;
			var cbBT = sel.form.elements["BT"];
			var sBT = "";
			
			if (cbBT.checked) {
				sBT = "&" + cbBT.name + "=" + cbBT.value;
			}
			
			window.location.href = val + sBT;
		}
	}
</script>

<form>
<select name="values" onChange="nav(this);">
	<option>FIND TOPICS STARTING WITH "A"</option>
	<option value="[URL unfurl="true"]http://www.websitenow.com/XC/NewPage.php?BK=Tap&CH=10&VR=20">option[/URL] 1</option>
</select>
<input type="checkbox" name="BT" value="ON" />
</form>

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

HowdeeDoodee · Jul 13, 2005

Dan, thank you very much for the code. I tested the code and everything works great. However, I shot myself in the foot because I need more than one check box but only used one check box in my example. My other checkboxes have values of TR, NV, ES, and SM. I am not a js programmer so I am uncertain how to duplicate your code to encompass the other boxes. Help would be more than appreciated. Thank you again.

HowdeeDoodee · Jul 14, 2005

Issue: Making only drop downs reset after a page loses focus while NOT making check boxes reset.

I am making some progress but still have one issue left. The issue is drop downs are on-change events. In this application...(1) because drop downs are on-change events, (2) if the user clicks on a drop down with a check box selected...(3) then the user comes back to this page...(4) the user can select another checkbox (5) BUT the drop down selection does not work because the drop down has seen no change therefore making the drop down ignore the click. In this code, I have to hit the reset button to clear the page to get the form to get the drop downs to re-activate.

Question: Is there any way to reset just the drop downs when the page loses focus so when the user comes back to this page, the user can make another check box selection and can then click on the same drop down selection taking the user to the previous page with new search criteria.

Code:

<script type="text/javascript">
    function nav(sel) {if (sel.selectedIndex > 0) {var val = sel.options[sel.selectedIndex].value;
            var cbBT = sel.form.elements["BT"];
            var sBT = "";
            
            var cbTR = sel.form.elements["TR"];
            var sTR = "";

            var cbNV = sel.form.elements["NV"];
            var sNV = "";
            
            var cbES = sel.form.elements["ES"];
            var sES = "";
            
            var cbSM = sel.form.elements["SM"];
            var sSM = "";
}
            
if (cbBT.checked) 
{
           sBT = "&" + cbBT.name + "=" + cbBT.value;
             window.location.href = val + sBT;
}           
else if (cbTR.checked)
{
         sTR = "&" + cbTR.name + "=" + cbTR.value;
             window.location.href = val + sTR;
}
else if (cbNV.checked)
{
         sNV = "&" + cbNV.name + "=" + cbNV.value;
             window.location.href = val + sNV;
}
else if (cbES.checked)
{
         sES = "&" + cbES.name + "=" + cbES.value;
             window.location.href = val + sES;
}

else if (cbSM.checked)
{
         sSM = "&" + cbSM.name + "=" + cbSM.value;
             window.location.href = val + sSM;
}

}
</script>

<form>

<input type="button" value="Reset" onClick="window.location='ThisPage.htm';">
<select name="values" onChange="nav(this);">
    <option>FIND TOPICS STARTING WITH "A"</option>
<option value="[URL unfurl="true"]http://www.anysite.com/TY/NewGuy.php?BK=Tap&CH=10&VR=20">option[/URL] 1</option>
<option value="[URL unfurl="true"]http://www.anysite.com/TY/NewGuy.php?BK=Tap&CH=10&VR=20">option[/URL] 2</option>
<option value="[URL unfurl="true"]http://www.anysite.com/TY/NewGuy.php?BK=Tap&CH=10&VR=20">option[/URL] 3</option>
<option value="[URL unfurl="true"]http://www.anysite.com/TY/NewGuy.php?BK=Tap&CH=10&VR=20">option[/URL] 4</option>
<option value="[URL unfurl="true"]http://www.anysite.com/TY/NewGuy.php?BK=Tap&CH=10&VR=20">option[/URL] 5</option>
</select>
 BT <input type="checkbox" name="BT" value="ON" />
 TR <input type="checkbox" name="TR" value="ON" />
 NV <input type="checkbox" name="NV" value="ON" />
 ES <input type="checkbox" name="ES" value="ON" />
 SM <input type="checkbox" name="SM" value="ON" />
</form>

</body>

jemminger · Jul 14, 2005

here's a way to use an arbitrary number of checkboxes: name them beginning with a tilde " ~ " so the script knows to include them. the select list is reset at the end of the process too.

Code:

<script type="text/javascript">
function nav(sel) {
	if (sel.selectedIndex > 0) {
		var form = sel.form;
		var els = form.elements;
		var url = sel.options[sel.selectedIndex].value;
		var pairs = new Array();
		
		//  look at the checkboxes
		for (var x = 0; x < els.length; x++) {
			//  see if element name begins with ~ and is checked
			if (/^~\w+/i.test(els[x].name) && els[x].checked) {
				var name = els[x].name.substring(1);
				pairs.push("&" + name + "=" + els[x].value);
			}
		}
		
		//  send to url
		window.location.href = url + pairs.join("");
		
		//  reset select list
		sel.selectedIndex = 0;
	}
}
</script>

<form>
	<input type="button" value="Reset" onClick="window.location='ThisPage.htm';">
	<select name="values" onChange="nav(this);">
    <option>FIND TOPICS STARTING WITH "A"</option>
		<option value="[URL unfurl="true"]http://www.anysite.com/TY/NewGuy.php?BK=Tap&CH=10&VR=20">option[/URL] 1</option>
		<option value="[URL unfurl="true"]http://www.anysite.com/TY/NewGuy.php?BK=Tap&CH=10&VR=20">option[/URL] 2</option>
		<option value="[URL unfurl="true"]http://www.anysite.com/TY/NewGuy.php?BK=Tap&CH=10&VR=20">option[/URL] 3</option>
		<option value="[URL unfurl="true"]http://www.anysite.com/TY/NewGuy.php?BK=Tap&CH=10&VR=20">option[/URL] 4</option>
		<option value="[URL unfurl="true"]http://www.anysite.com/TY/NewGuy.php?BK=Tap&CH=10&VR=20">option[/URL] 5</option>
	</select>
	 BT <input type="checkbox" name="~BT" value="ON" />
	 TR <input type="checkbox" name="~TR" value="ON" />
	 NV <input type="checkbox" name="~NV" value="ON" />
	 ES <input type="checkbox" name="~ES" value="ON" />
	 SM <input type="checkbox" name="~SM" value="ON" />
</form>

</body>

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

HowdeeDoodee · Jul 14, 2005

Dan, thank you for the code.

I should have explained this before. I apologize. I thought this would be a simple coding issue but perhaps not.

The purpose of this page is to give the user search options accessing a MySql database. When the user checks a checkbox, and clicks on, for example, option 2, then records corresponding to BT, TR, NV, ES, and SM or combinations thereof are displayed corresponding to the checked boxes. If the user checks three of the check boxes then the url sent to the php page from the select box carries with the url the three ON values thus generating an appropriate search routine in MySql.

Two issues remain.
Issue 1: I need the whole url to be in the option value line.

In the new code, the

http://www.thissite.com

part of the url has to be deleted in the option select statement because the url of the base directory is automatically inserted when the code is run and must be left out to get the drop down link to work. In the actual application, every select option will have a different url including the

http://www.thispart.com

part of the url.

Issue 2: Getting only the drop down to refresh while leaving the selected drop down option displayed when a user comes back to the page.

If I check on BT and option 2 everything works great the first time I use this drop down page. However, if I user the brower back button go back to this drop down page a second time with option 2 still showing in the drop down and uncheck BT, check TR, then click on option 2 again, nothing happens. Apparently, the onchange event in option 2 sees no change because the option 2 selection is still active from the last use. In other words, the drop down is not resetting so when the user goes back to this drop down page the user has to hit the reset button and refresh the page to refresh the drop down while also removing the checks in the check boxes. In the actual application, the user will see perhaps hundreds of drop down options. I need the check boxes to remain UNrefreshed while I need the drop downs refreshed while leaving the selected item in the drop down available. This would mean the user can check TR, click on option 2, and be taken to the appropriate url then come back to this drop down page and click on option 2 again with TR checked and be taken back to the same page again. It would also mean the user can change the check box options and click on option 2 a second, third, or fourth time and be taken to the option 2 url.

Thank you for the submittals.

jemminger · Jul 14, 2005

no problem Steve.

1. so take the hostname out...

2. you're dealing with browser's default behavior now - IE's is to persist the selection, Firefox's honors the script's setting of the selectedIndex back to zero. another way would be to attach code to window.onload to set the select:

Code:

window.onload = function() {
	document.getElementById("navForm").values.selectedIndex = 0;
}

<form [b]id="navForm"[/b]>
 <select name="values" onChange="nav(this);">

 ...

</form>

furthermore, both FF and IE persisting the checkboxes' states currently is probably serendipitous. to absolutely ensure they are persisted, you'll have to get even fancier, e.g. use cookies to save state.

if this were my project, i would not have the select fire onchange - i would require the user to click a "submit" button... this way you don't have to rely on the select list being reset to the first option for the onchange event to fire again.

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

HowdeeDoodee · Jul 14, 2005

Clearly demonstrating I have no idea what I am doing by calling you Dan instead of Jeff...

And I'm not Steve but I could be if I don't get something going on this.

Also, I am not a programmer, I just have enough knowledge of js to demonstrate I have no idea what I am doing.

I tried putting the window.onload within the script tags but got an error message.

I tried putting the form id at the top of the form but got an error message.

I've tried putting a submit button on the form and firing the submit button with nav(this) but got an error message. I would really like to use the submit button but do not know how to debug.

What I did find in researching was the following little demo. The demo resets the drop down every time the user makes a selection. Is there any way to combine the following onChange event and the nav(this) function?

Code:

<form>
<input type="text" value="" name="currentSel">
<select onChange="this.form.currentSel.value=this.options[this.selectedIndex].value;this.selectedIndex=0;" SIZE="1">
<option value="">Select an item</option>
<option value="first">first</option>
<option value="second">second</option>
<option value="third">third</option>
</select> </form>

Thank you in advance for any replies even if you are Jeff claiming to be Dan or Dan claiming to be Jeff. Doesn't matter.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do I combine onclick drop down event and check box value

HowdeeDoodee

Technical User

jemminger

Programmer

HowdeeDoodee

Technical User

HowdeeDoodee

Technical User

jemminger

Programmer

HowdeeDoodee

Technical User

jemminger

Programmer

HowdeeDoodee

Technical User

Similar threads

Part and Inventory Search

Sponsor