[html/js] select onchange submit na scrollen

[pietje63]

Ik ben bezig met een simpele selectbox die moet submitten nadat je op een waarde klikt. Ik gebruik hiervoor het volgende stukje javascript;

code:

 onChange="javascript:this.form.submit()"

Dit werkt allemaal alleen merkte iets heel raars. Als ik scroll door de opties en dan ernaast klik, ergens anders in het document, dan submit hij ook (wat dus niet de bedoeling is). De waarde die hij dan voor de select meegeeft is die van de eerste option (die dus bij het begin al geselecteerd is).

Ik heb nu wat onderzoek gedaan en ben tot 2 conclusies gekomen:
- probleem alleen in internet explorer
- probleem alleen als er optgroups zijn

Iemand ervaring met dit probleem? (en het liefst ook een oplossing)

2 voorbeelden online:
http://www.pietje63.nl/temp/test.html (met optgroup)
http://www.pietje63.nl/temp/test2.html (zonder optgroup)

[ Voor 9% gewijzigd door pietje63 op 08-01-2006 23:13 ]

[NMe]

Geen idee waar het aan kan liggen. Bij mij doet ie het zowel in IE6 als in FF1.5 gewoon goed. Ik gebruik Win2k.

offtopic:
Overigens is het onchange en niet onChange (zeker als je XHTML-compliant wil zijn), en hoeft er geen javascript: in je eventhandler te staan.

[r0bert]

Doordat je scrolled, kom je als eerste de eerste (2e eigenlijk) optie tegen, je onchange wordt gefired en je form wordt gesubmit.. heel logisch Oplossing zou proberen dat af te vangen (check op een "onclick") Of misschien in zovere dat van toepassing is een vertraging.

[pietje63]

Ik ga voor html 4.01 op de rest van de site waar dit stukje code op komt. Maar heb beide voor de controle maar gewijzigd, maar maakte niets uit. Ik heb het probleem trouwens niet bij het GoT selecteer forum ding hier linksonder.

(met scrollen bedoel ik btw scrollen met het scroll wiel van mijn muis)

r0bert schreef op zondag 08 januari 2006 @ 23:25:
Doordat je scrolled, kom je als eerste de eerste (2e eigenlijk) optie tegen, je onchange wordt gefired en je form wordt gesubmit.. heel logisch Oplossing zou proberen dat af te vangen (check op een "onclick") Of misschien in zovere dat van toepassing is een vertraging.

De actie komt er pas op het moment dat ik NAAST de select klik dus niet direct op het moment van scrollen. Verder is de waarde gelijk aan die in eerste instantie (en dus niet waar ik met scrollen eindig ofzo)

onclick ga ik nu proberen -> dan submit hij al bij het selecteren van de select.

[ Voor 55% gewijzigd door pietje63 op 08-01-2006 23:31 ]

[crisp]

Op GoT heeft de eerste optie geen value, en daarop wordt gechecked bij een onchange:

HTML:

<select name="select_forum" onchange="switchforum(this)">
  <option value="">Selecteer forum...</option>
  <optgroup label="Mededelingen">
    <option value="32">Mededelingenforum</option>
  </optgroup>
  <!-- etcetera -->
</select>

HTML:

function switchforum(x)
{
    var s = x.options[x.selectedIndex];
    if (s.value != '') window.location.href = board_script_url + '/list_topics/' + s.value;
}

[pietje63]

Ok, de Got methode geript (al lijkt het me omslachtig, maar zou niet weten hoe dit anders te doen..)

HTML:

<script language="javascript">
function test_submit(x)
  {
  var s = x.options[x.selectedIndex];
  if (s.value != 'select') select_lijst.submit();
  }
</script>

HTML:

<form action="index.php" method="get" name="select_lijst">
[..]
<select name="select_lijst" onclick="test_submit(this)">

(kleine aanpassing, in submit ipv window.location om het wat algemener te houden) Verder natuurlijk iedereen bedankt (behalve ie die hier toch de boosdoener lijkt te zijn).

http://www.pietje63.nl/temp/test3.html voor het resultaat

[ Voor 17% gewijzigd door pietje63 op 09-01-2006 00:28 ]

[crisp]

Je hebt nu ws toch een probleem in non-IE browsers aangezien select_lijst niet gedefinieerd zal zijn; je kan beter dit doen:

HTML:

<script type="text/javascript">
function test_submit(x)
{
  var s = x.options[x.selectedIndex];
  if (s.value != 'select') x.form.submit();
}
</script>

en dan ism onchange ipv onclick. Je form hoeft dan ook geen (deprecated) name-attribuut te hebben. Als je toch iets wilt hebben om je form te kunnen targetten gebruik dan liever een ID ism getElementByID of via de document.forms collection.

Het kan uiteraard ook in een one-liner:

HTML:

<select name="select_lijst" onchange="if(this.options[this.selectedIndex].value!='select')this.form.submit()">

en verder: tsja, IE - een browser vol met bugs die al in 5 jaar geen enkele fix heeft gezien op security-issues na...

[ Voor 54% gewijzigd door crisp op 09-01-2006 00:34 ]

[pietje63]

onchange/click -> had dit idd al gewijzigd omdat er anders ook problemen optraden icm de back knop v/d browser (was eringeslopen door een vorige test).

Over het probleem met het targetten van het form. In Firefox werkt het wel gewoon, maar nu ik dit script nog aan het ontwerpen ben kan ik het beter meteen goed doen. Ik ga nu voor de oneliner (omdat er meerdere forms op de pagina zijn en ik hier geen problemen mee wil krijgen en dit dan stiekem toch wel makkelijker is).