Listbox with Submit Button

[ilokana]

Hi,

I'm new to PHP. Is there a way to create a listbox without the submit button and not using Javascript? Can I use href instead? Thanks in advance.

Ilokana

[darkagn]

Hi ilokana and welcome to DaniWeb :)

I'm not sure exactly what you are trying to do here? Do you want to create a drop-down box that when the user selects an option it automatically redirects them to a selected link? Why do you not want a Submit button?

Regards,
darkagn

[ilokana]

Thanks, darkagn.

Yes, that's what I meant - a drop-down list redirecting the selection to a link without the submit button. If there's a way to create it without the button, I prefer it that way.

Ilokana

[NormandP]

For a PopUp without a submit button and instant redirection, you should try something like:

<form name="popupnav"> 
   <select name="link" onChange="location=document.popupnav.link.options 
[document.popupnav.link.selectedIndex].value;" value="GO"> 
   <option selected>Choose</option> 
   <option value="http://www.msn.com">MSN</option>
   <option value="http://www.yahoo.com">Yahoo</option>
   <option value="http://www.google.com">Google</option> 
   </select> 
   </form>

If you want a listbox without a submit button and instant redirection:

<form name="listboxnav"> 
   <select name="link" size="3" multiple="multiple" onChange="location=document.listboxnav.link.options 
[document.listboxnav.link.selectedIndex].value;" value="GO"> 
   <option value="http://www.msn.com">MSN</option>
   <option value="http://www.yahoo.com">Yahoo</option>
   <option value="http://www.google.com">Google</option> 
   </select> 
   </form>

"size=3" is relative to the number of items in the ListBox... need to be adjusted

[ilokana]

Is there a way not to use Javascript? Thanks.

Ilokana

[kanaku]

Eep. I think that javascript is the only way to go.

PHP is (I don't know the formal term) but it only works when you 'submit' or 'send' the data. From experience, it's Javascript that handles browser events like onMouseOut, onChange, onClick, etc... (AJAX is still Javascript + PHP) so you're really going to need javascript.

Can you tell us why you can't use javascript? So we can think of a workaround.

(A question for the more informed people... can she use DHTML instead? Or does DHTML also use javascript?)

[ilokana]

I have an external link for my javascript codes. I have this code for my list box:

<form name="form1" method="post" action="<?php echo $PHP_SELF; ?>">
<select class="class1" onclick="selected()" size="20" name="mylist" id="mylist">
<?php
$sql = "SELECT * FROM table1";
if ($result = mysql_query($sql))
{
while ($row = mysql_fetch_array($result))
{
if ( $row == $id )
echo '<option value="/table/'.$row.'" selected>'. $row .'</option>';
else
echo '<option value="/table/'.$row.'">'. $row .'</option>';
}
}
?></select></form>

If javascript is the only way, is it possible to show the link of the selected list onMouseover? Thanks.

[kanaku]

Try adding a title attribute to each option...

<select>
<option title="http://www.google.com">Google</option>
<option title="http://philippineonlinedirectory.com/aklan">Aklan</option>
</select>

Whatever's in between the title="" is shown when the mouse hovers the element.

[ilokana]

Yes, that's what I used when I created our pages but I want to show the link of the selected list onMouseover. I was assuming the if I use <a href="/table/'.$row">$row</a> would let me get that but I can't get it work.

Sorry if I'm not explaining myself clearly. Thanks.

[kanaku]

hehe... ok lang. =)

Link of the selected list...?

Do you want something like this? (Hover on the left menu.)

The tutorial for doing that is the same link. I'm not sure if IE supports it though... *goes to check*

Wow! It works!

[ilokana]

Yes, that's what I meant. I've tried looking up in the internet but have not found anything yet. :(

Salamat.

[kanaku]

Yes, that's what I meant. I've tried looking up in the internet but have not found anything yet.

Eep! Are you working with that tutorial or looking for something else? The link I gave you is also a tutorial for that effect.

[ilokana]

Yes, the link that you gave me is what I meant but I want it in a list box. Will that work?

[kanaku]

Sadly, no. I just tried right now...

The only Javascript events that apply to the option elements are
1. onFocus (you have to click on it --- since your option tags open the page upon clicking, we can't use this)
2. onBlur (when you 'remove' or 'exit' from focus --- not that useful in this case either

The onChange applies to the <select> element itself... eep... eep eep... I'm stumped.

Yes, that's what I used when I created our pages but I want to show the link of the selected list onMouseover.

The only thing I can think of right now is the title. Why is the title attribute not working for you..?

If you want to have more control over the list, maybe you change it from <option></option> to a normal list <ul><li></li></ul> instead? The list is more flexible, it will let you use that ericmeyer tutorial for the mouseOver, and let you use <a href=""></a> inside your tags for the instant redirection. You can still style the list with CSS such that it will look like the regular <select> you currently have.

Here is a sample code... don't try to dissect it. Copy and past it into notepad first and save as .html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
			"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>CSS trial</title>

<style type="text/css">
<!--

div#container
{
width: 500px;
margin: 0 auto;
}

div#links
{
position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 10pt Verdana, sans-serif; z-index: 100;}

div#links a
{display: block; margin: 3px 0; color: #000; text-decoration: none; padding: 0 3px;}
   
   
div#links a:hover {color: #FFF; background: #57F;}

div#links a span {display: none;}

div#links a:hover span {display: block;
   position: absolute; top: 250px; left: 0; width: 125px; z-index: 100; color: #333;}
   
div#optionList
	{
	height: 200px;
	overflow: auto;
	}
ul#linklist
	{
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
-->
</style>


</head>
<body>

<div id="links">
<div id="optionList">
<ul id="linklist">
<li><a href="http://www.msn.com" title="MSN">MSN<span>Go to MSN.</span></a></li>
<li><a href="http://www.google.com" title="Google">Google<span>Go to Google.</span></a></li>
<li><a href="http://www.yahoo.com" title="Yahoo">Yahoo<span>Go to yahoo.</span></a></li>
<li><a href="http://www.msn.com" title="MSN">MSN<span>Go to MSN.</span></a></li>
<li><a href="http://www.google.com" title="Google">Google<span>Go to Google.</span></a></li>
<li><a href="http://www.yahoo.com" title="Yahoo">Yahoo<span>Go to yahoo.</span></a></li>
<li><a href="http://www.msn.com" title="MSN">MSN<span>Go to MSN.</span></a></li>
<li><a href="http://www.google.com" title="Google">Google<span>Go to Google.</span></a></li>
<li><a href="http://www.yahoo.com" title="Yahoo">Yahoo<span>Go to yahoo.</span></a></li>
<li><a href="http://www.msn.com" title="MSN">MSN<span>Go to MSN.</span></a></li>
<li><a href="http://www.google.com" title="Google">Google<span>Go to Google.</span></a></li>
<li><a href="http://www.yahoo.com" title="Yahoo">Yahoo<span>Go to yahoo.</span></a></li>
</ul>
</div>
</div>



</div>
</body>
</html>

[ilokana]

The code works! This solved my dilemma. Thanks, kanaku! :)

[kanaku]

:D (you're welcome... and my apologies for the pasikot-sikot help)

[php-freelancer]

Dear friend,

You can simply use following code.

<form name='form_name' method='POST'>
<select name='somename' onchange='document.form_name.submit();'>

You can contact me on this url if you still cant find the solution,
<URL SNIPPED>