XHTML select forms without the submit button?

[Guest ldexterldesign]

Hi guys,

 

I'm adamant this is possible. There's probably a simple solution.

 

I have a conventional XHTML select form which, when an option is selected and the submit button pressed, passes a PHP post variable to the refreshed (same) page.

 

Seen as the select form is the main navigation the use is constantly having to select and press the submit button. It would be handier if they didn't have to hit the submit button really.

 

Can anyone help with a solution or link me to a relevant help page?

 

Cheers,

Lewis

[redarrow]

what?

 

sounds like u need ajax/javascript.

[dropfaith]

i often use this form

 

							<form action="../">
								<p><select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    										<option value="">Choose Sort Option</option>

									<option value="index.php">All</option>
    										<option value="dvd.php">Dvds</option>
									<option value="theatre.php">In Theatres</option>				


								</select></p>
							</form>

 

its a select list with no submit button but im not sure it does what your looking for all it is for is to change links by a type

 

http://lawrenceguide.org/recipes/index.php its the sort by option on this

[Guest ldexterldesign]

Hmmm, cheers guys. Part of me thinks you're both right.

 

@dropfaith - thanks for that code example. It does do what I want to an extent, but as I'm not a JavaScript expert I can't hack into that in the short-term. I'm only working with one page here, not multiple pages acting as categories, as your example page illustrates.

 

I'll paste the code in below If that helps anyone else here. You needn't worry about the PHP in there:

 

    <form action="" method="post">
      <select name="fontFamily">
        <option id="font1" value="<?php echo $font1; ?>">Choose font family 1</option>
        <option id="font2" value="<?php echo $font2; ?>">Choose font family 2</option>
        <option id="font3" value="<?php echo $font3; ?>">Choose font family 3</option>
        <option id="font4" value="<?php echo $font4; ?>">Choose font family 4</option>
        <option id="font5" value="<?php echo $font5; ?>">Choose font family 5</option>
        <option id="font6" value="<?php echo $font6; ?>">Choose font family 6</option>
        <option id="font7" value="<?php echo $font7; ?>">Choose font family 7</option>
        <option id="font8" value="<?php echo $font8; ?>">Choose font family 8</option>
        <option id="font9" value="<?php echo $font9; ?>">Choose font family 9</option>
        <option id="font10" value="<?php echo $font10; ?>">Choose font family 10</option>
        <option id="font11" value="<?php echo $font11; ?>">Choose font family 11</option>
        <option id="font12" value="<?php echo $font12; ?>">Choose font family 12</option>
        <option id="font13" value="<?php echo $font13; ?>">Choose font family 13</option>
        <option id="font14" value="<?php echo $font14; ?>">Choose font family 14</option>
        <option id="font15" value="<?php echo $font15; ?>">Choose font family 15</option>
        <option id="font16" value="<?php echo $font16; ?>">Choose font family 16</option>
        <option id="font17" value="<?php echo $font17; ?>">Choose font family 17</option>
        <option selected="selected" title="Currently selected"><?php echo $selectedFont ?></option>
      </select>
      <input type="submit" name="submit" value="Go!" />
    </form>

 

Lewis

[laPistola]

dropfaiths "jumpmenu" don't require anyother knowledge of javaScript other then the code he has given you.

 

If thats not exactly what your after then what do you need this to do exactly, explain what effect you what to happen?

[JasonLewis]

      <select name="fontFamily" onchange="javascript: this.form.submit()">

 

But you should provide a way for people with JavaScript disabled to also submit the form.

[Guest ldexterldesign]

      <select name="fontFamily" onchange="javascript: this.form.submit()">

 

But you should provide a way for people with JavaScript disabled to also submit the form.

 

Hey man, thanks for the tip - at least someone's on the ball (not sure how I can put this problem any clearer). I hoped that would be the simple solution I was looking for, but that code doesn't appear to do anything when I click a select option? Any further thoughts?

 

Thanks,

Lewis

[dropfaith]

okay i played a bit now that i know your changing fonts and created this its still js but yeah.

 

also tested in firefox and see no reason why it would fail anywhere else..

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Font Styles</title>
<script type="text/javascript">
function changeFont(_name) {
	document.body.style.fontFamily = _name;
}
</script>
</head>

<body style="font-family:Georgia">
<h1>This font should be changed</h1>
<select id="fs" onchange="changeFont(this.value);">
<option value="arial">Arial</option>
    <option value="verdana">Verdana</option>
    <option value="impact">Impact</option>
    <option value="'ms comic sans'">MS Comic Sans</option>
</select>
<i><strong>I sure hope this font changes too!</strong></i>
</body>
</html>

[Guest ldexterldesign]

okay i played a bit now that i know your changing fonts and created this its still js but yeah.

 

also tested in firefox and see no reason why it would fail anywhere else..

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Font Styles</title>
<script type="text/javascript">
function changeFont(_name) {
	document.body.style.fontFamily = _name;
}
</script>
</head>

<body style="font-family:Georgia">
<h1>This font should be changed</h1>
<select id="fs" onchange="changeFont(this.value);">
<option value="arial">Arial</option>
    <option value="verdana">Verdana</option>
    <option value="impact">Impact</option>
    <option value="'ms comic sans'">MS Comic Sans</option>
</select>
<i><strong>I sure hope this font changes too!</strong></i>
</body>
</html>

 

Solution achieved - pats on back! Cheers for your help mate

 

Lewis