[html] drop-down menu om search engine te kiezen

[Verwijderd]

Wat ik dus probeer te maken, is een drop-down menu, daarnaast een invoerveld en vervolgens een button om te submitten. In het menu komen enkele zoekmachines te staan waarna het te zoeken item in het invoerveld getypt kan worden. Vervolgens wordt met een druk op de button het ingetypte item gezocht bij de geselecteerde zoekmachine.

Basic code voor een drop-down menu:

code:

<select>
 <option>imdb</option>
 <option>google</option>
 <option>Van Dale</option>
 <option>Merriam-Webster</option>
</select>

Dit probeer ik te verenigen met de huidige situatie:

code:

<object>

 <form action="http://www.imdb.com/find" method="get">
  <p>
   <input type="text" value="" name="q" /> <input type="submit" value="Search" /> IMDb
  </p>
 </form>

 <form action="http://www.google.com/search" method="get" id="google">
  <p>
   <input type="text" value="" name="q" /> <input type="submit" value="Search" /> Google
  </p>
 </form>

 <form action="http://www.vandale.nl/opzoeken/woordenboek/" method="get">
  <p>
   <input type="text" value="" name="zoekwoord" /> <input type="submit" value="Search" /> Van Dale
  </p>
 </form>

 <form action="http://www.merriam-webster.com/cgi-bin/dictionary/" method="get">
  <p>
   <input type="text" value="" name="va" /> <input type="submit" value="Search" /> Merriam-Webster
  </p>
 </form>

</object>

De huidige code zorgt voor afzonderlijke invoervelden en buttons voor elke zoekmachine. Die wil ik dus allemaal reduceren tot 1 veld en 1 button om plaats te besparen op mijn website. Elke <form> heeft een eigen <action> en dit valt niet zomaar in te bouwen in de bovenste code. Ook het feit dat bij de text inputs verschillende "name="-opties voorkomen, maakt dit niet zonder meer mogelijk.

Heb me al rotgezocht via Google, maar tot dusver geen resultaat. Voor de duidelijkheid: ik zoek een pure (x)html-oplossing (eventueel met CSS natuurlijk) en doe dus niet aan javascript e.d. Wie helpt mij uit de brand? Is het eigenlijk wel mogelijk?

[ Voor 18% gewijzigd door Verwijderd op 06-01-2005 04:00 . Reden: typo ]

[NMe]

Zonder Javascript? Ik geef het je te doen... Volgens mij kan dat niet.

Edit: Met Javascript kan het wel, heb hier een scriptje dat ik ooit ergens vandaan gehaald heb:

HTML:

<script>
function checkfunctie() {
    SearchWindow = window.open(document.forma.searchtype.value+document.forms[0].tekst.value,'Windowname');
}
</script>


<form name="forma" action="javascript:checkfunctie()">
<p>Web Search<br clear=left>
  <input type="text" name="tekst" class="textbox" size="14"><select size="1" name="searchtype">
  <option selected value="http://www.google.com/search?hl=nl&q=">Google</option>
  <option value="http://gathering.tweakers.net/forum/find/keyword?where=all&action=find&data%5Bsearchtype%5D=search&data%5Bboolean%5D=AND&data%5Bq%5D=">GoT</option>
  <option value="http://forum.fok.nl//fok/search_lite?member=&order=relevance&q=">Fok!</option>
  <option value="http://www.cddb.com/php/search2.php3?f=artist&f=disc&f=track&image=Search&q=">CDDB</option>
</select>
<input class='button' type='submit' value='Search' onClick='checkfunctie()' onSubmit='checkfunctie()'>
</p></form>

Zoals je ziet wordt er onSubmit een functie aangeroepen die de URL uit de option value (waar de naam van de variabele al in staat) aangevuld met de zoektekst.

[ Voor 90% gewijzigd door NMe op 06-01-2005 04:01 ]

[Blaise]

Je kan ook alles submitten naar een 2e pagina die checked (met bijv. PHP) naar welke zoekmachine en met welke keyword de bezoeker moet worden doorgestuurd.

[Verwijderd]

PHP... een optie waar ik nog niet over heb nagedacht. PHP schrijven is (nog) niet weggelegd voor mij, maar misschien kan ik wat kant-en-klare scriptjes vinden.

@NMe: Heb je javascript getest met explorer maar het werkt niet plus de foutmelding "error: 'document.forma.searchtype' is null or not an object".

[ Voor 33% gewijzigd door Verwijderd op 06-01-2005 04:36 ]

[NMe]

In de meest basale vorm kun je zoiets doen als het volgende, al kan het veel netter dan dit.

Formulier:

HTML:

<form name="forma" action="checkpagina.php" method="post">
<p>Web Search<br clear=left>
  <input type="text" name="tekst" class="textbox" size="14"><select size="1" name="searchtype">
  <option selected value="http://www.google.com/search?hl=nl&q=">Google</option>
  <option value="http://gathering.tweakers.net/forum/find/keyword?where=all&action=find&data%5Bsearchtype%5D=search&data%5Bboolean%5D=AND&data%5Bq%5D=">GoT</option>
  <option value="http://forum.fok.nl//fok/search_lite?member=&order=relevance&q=">Fok!</option>
  <option value="http://www.cddb.com/php/search2.php3?f=artist&f=disc&f=track&image=Search&q=">CDDB</option>
</select>
<input class="button" type="submit" value="Search">
</p></form>

Checkpagina.php:

PHP:

header('Location: '.$_POST['searchtype'].$_POST['tekst']);

[Verwijderd]

Toch maar het javascript in mijn site verwerkt . Werkt prima, alleen heb ik nog 2 vraagjes.

Als eerste zou ik willen dat zoekresultaten gewoon in het huidige venster ipv een nieuw venster worden weergegeven. Wat moet ik dan aan het script veranderen?

Volgens het W3C mag een <form> geen attribute "name" hebben. "id" mag wel maar dan werkt het script niet. Idem voor <input> waar geen "onClick" en "onSubmit" in mag staan. Hoe pas je het script aan zodat het door de W3C validator heenkomt? Geen groot issue natuurlijk, maar totdat ik javascript ging gebruiken, voldeed mijn volledige site aan de standaard en dat houd ik liever zo .

[NMe]

Gewoon een id gebruiken in het form, en dan met de getElementById functie werken.

[Verwijderd]

getElementById is gelukt, thanx . Nu zitten alleen "onClick" en "onSubmit" nog in de weg.

[crisp]

Verwijderd schreef op donderdag 06 januari 2005 @ 16:48:
getElementById is gelukt, thanx . Nu zitten alleen "onClick" en "onSubmit" nog in de weg.

document.forms[formid] werkt ook gewoon met een id. Verder hoort onsubmit in de form-tag en let op de juiste spelling (lowercase).
Je kan vanuit een eventhandler ook meteen een referentie meegeven naar het form-object; dan heb je helemaal geen name of id meer nodig.

[Verwijderd]

Dankjewel crisp voor je tips. Mijn pagina is nu weer helemaal 'W3C compliant'.

Een laatste probleem dat ik nog probeer te tacklen is het openen van zoekresultaten in het huidige venster ipv een nieuw venster te openen. Ik vermoed dat het ergens met "SearchWindow = window.open" te maken heeft, maar wat ik precies moet veranderen kan ik nergens vinden.

[Verwijderd]

Eenmalige kick:

Iemand een idee hoe ik zoekresultaten met het javascript in het huidige venster laat zien in plaats van in een nieuw venster?

[Erkens]

window.location

edit:

JavaScript:

window.location="http://www.google.com/search?q="+keyword;

[ Voor 73% gewijzigd door Erkens op 09-01-2005 19:36 ]

[Thijsmans]

@Erkers: .replace('url')

[Erkens]

Prammenhanger schreef op zondag 09 januari 2005 @ 19:37:
@Erkers: .replace('url')

hmm ik gebruik nooit .replace hiervoor?

quote: http://www.mozilla.org/docs/dom/domref/dom_window_ref30.html

Gets/sets the location, or current URL, of the window object.
Syntax
url = window.location

window.location = url

[Verwijderd]

Zowel .replace als window.location openen een nieuw venster.

[Erkens]

Verwijderd schreef op zondag 09 januari 2005 @ 21:07:
Zowel .replace als window.location openen een nieuw venster.

met welke code?

[Verwijderd]

Erkens schreef op zondag 09 januari 2005 @ 22:19:
[...]

met welke code?

in plaats van window.open

[Erkens]

Verwijderd schreef op maandag 10 januari 2005 @ 03:32:
[...]

in plaats van window.open

doh, paste eens die gehele code, want wellicht pas je het verkeerd toe ofzo, dat bedoel ik

[Woudloper]

Als we even de voorgestelde code van -NMe- nemen en die veranderen in de door Prammenhanger gesuggereerde oplossing komen we tot het volgende.

Java:

function checkfunctie() {
    SearchWindow = window.location.replace(document.forma.searchtype.value+document.forms[0].tekst.value,'Windowname');
}

[Erkens]

Woudloper schreef op maandag 10 januari 2005 @ 08:43:
Als we even de voorgestelde code van -NMe- nemen en die veranderen in de door Prammenhanger gesuggereerde oplossing komen we tot het volgende.

Java:

function checkfunctie() {
    SearchWindow = window.location.replace(document.forma.searchtype.value+document.forms[0].tekst.value,'Windowname');
}

ik zou die windowname weglaten

JavaScript:

function checkfunctie() {
    SearchWindow = window.location.replace(document.forma.searchtype.value+document.forms[0].tekst.value);
}

[Verwijderd]

Werkt . Alleen de back-functie van de browser werkt dan niet .

[Erkens]

Verwijderd schreef op maandag 10 januari 2005 @ 17:40:
Werkt . Alleen de back-functie van de browser werkt dan niet .

afaik komt dat door die replace, maar dat is te testen door "window.location = " te gebruiken

[Verwijderd]

.replace weg dan doet het script niks meer. Hoe ik "window.location = " moet gebruiken is mij niet duidelijk, maar het mag inmiddels duidelijk zijn dat ik een totale javascript n00b ben .

[Erkens]

Verwijderd schreef op maandag 10 januari 2005 @ 17:54:
.replace weg dan doet het script niks meer. Hoe ik "window.location = " moet gebruiken is mij niet duidelijk, maar het mag inmiddels duidelijk zijn dat ik een totale javascript n00b ben .

dat is gewoon een toekenning, hoe moeilijk kan het zijn

JavaScript:

function checkfunctie() {
  window.location=document.forma.searchtype.value+document.forms[0].tekst.value;
}

Overigens zijn dit echt standaard dingen die je overal tegen komt

[Verwijderd]

Ah, dank . URL niet tussen aanhalingstekens dus, zucht .

Standaard dingen, zeg je. Zijn er goede sites die scripts documenteren? How-to's etc. Zoeken met Google levert veel te veel troep op.

Iedereen bedankt voor de tips!

[ Voor 12% gewijzigd door Verwijderd op 10-01-2005 18:20 ]

[Verwijderd]

http://www.w3schools.com/js/default.asp :: JS algemeen
http://www.w3schools.com/dhtml/default.asp :: DHTML (js stuff)
http://www.w3schools.com/htmldom/dom_obj_anchor.asp :: DOM stuff (snap ik zelf ook niet echt)

Jammer dat ik niet echt een goede site op I-net weet die diep op de javascript ingaat.

Het rottige is dat sommige functies niet werken in IE en andere weer niet in FF. irritant. Na lang kloten krijg je het meestal wel voor elkaar

[ Voor 20% gewijzigd door Verwijderd op 10-01-2005 18:48 ]