Google searchbar in html, 2 knoppen zelfde searchbar?

[Tk55]

Ik ben momenteel even aan het experimenteren met html en ik probeer een homepage te maken voor op mijn mobiele telefoon, zodat alles makkelijk geordend is en er simpel uit ziet. Nu wil ik graag 1 searchbar maar met 2 knoppen, dus zoals op de Google homepage met "search" en "im feeling lucky" (dit) maar dan wil ik dit doen met "Google Search" en "Search Images", weet iemand hoe ik dit kan combineren in 1 tekstbalk? Ik heb nu dit:

code:

<form method="get" action="http://www.google.com/search">
<input type="text"   name="q" size="35"
 maxlength="255" value="" />
<br>
<input type="submit" value="Search" />
</form> 

<form method="get" action="http://images.google.com/images">
<input type="text"   name="q" size="35"
 maxlength="255" value="" />
<br>
<input type="submit" value="Search Images" />
</form>

[Juup]

Klein beetje javascript in de onclick van de 2e submit button met iets als

JavaScript:

this.form.action="http://images.google.com/images";

[ Voor 5% gewijzigd door Juup op 16-07-2009 18:46 ]

[Luqq]

Ik zou dit met javascript doen. Een functie aan je submit knoppen hangen die de action van je form aanpast, en vervolgens submit.

[Duroth]

Als vies alternatief zou een redirectje ook werken (b.v. op basis van PHP), door beide buttons hetzelfde name="" attribuut mee te geven, en aan de hand van de value="" de redirect link te bepalen.

Dit is natuurlijk niet ideaal voor een mobiele telefoon, omdat er een extra request voor nodig is, en dat tijdsverlies is mobiel wel heel goed merkbaar...

Zelf zou ik het dus ook met wat javascript oplossen

[Tk55]

Bedankt, het is nu gelukt om een action aan elke knop toe te wijzen. Nu wil ik ook graag de name="q" variabel maken. Ik wil dit dus bij een van de knoppen name="i" maken ipv name="q", en dit in dezelfde searchbar te houden. Hoe werkt dit?

[_Thanatos_]

Je kunt die twee forms toch gewoon in die werkbalk plempen? Wat is het probleem dat je het op één enkel form element wil hebben? Je kunt een form gewoon floaten, dan komen ze naast elkaar als er voldoende ruimte is.

[RobIII]

Duroth schreef op donderdag 16 juli 2009 @ 20:48:
Als vies alternatief zou een redirectje ook werken (b.v. op basis van PHP), door beide buttons hetzelfde name="" attribuut mee te geven, en aan de hand van de value="" de redirect link te bepalen.

Ik vind dat geen vies alternatief maar juist een goed alternatief. Op die manier werkt je formulier ook zonder JS en in zo goed als alle situaties (mits redirects dus ondersteund worden) en daarbij voorkom je dan problemen die TS nu heeft ("i" i.p.v. "q"); je vangt in je PHP script je eigen "foo" value en redirect a.d.h.v. de gedrukte knop naar x.com/?q=bar of y.com/?i=bar.

_Thanatos_ schreef op vrijdag 17 juli 2009 @ 14:51:
Je kunt die twee forms toch gewoon in die werkbalk plempen? Wat is het probleem dat je het op één enkel form element wil hebben? Je kunt een form gewoon floaten, dan komen ze naast elkaar als er voldoende ruimte is.

Hij wil natuurlijk maar 1 textbox

[ Voor 19% gewijzigd door RobIII op 17-07-2009 15:06 ]

[Duroth]

RobIII schreef op vrijdag 17 juli 2009 @ 15:02:
Ik vind dat geen vies alternatief maar juist een goed alternatief. Op die manier werkt je formulier ook zonder JS en in zo goed als alle situaties...

Helemaal gelijk natuurlijk, maar omdat de pagina op een mobiele telefoon moet gaan draaien zal die redirect heel wat meer tijd kosten. Of ik moet de snelheid van mobiel internet tegenwoordig onderschatten, maar voor zover ik weet is dat nog altijd ver onder de maat.

@TS: Gooi er wat extra javascript tegenaan Zoiets, zo ongeveer...

HTML:

<form name="searchForm" method="get" action="http://www.google.com/search">
<input type="text" id="search_keyword" name="q" value="Je zoekterm">

<input type="submit" value="Google zoeken">
<input type="button" value="Google Afbeeldingen zoeken" onclick="this.form.action='http://images.google.com/images';document.getElementById('search_keyword').name='i';this.form.submit();">

Het stuk document.getElementById('search_keyword').name='i'; zou er dan voor zorgen dat de querystring als i=ZOEKWOORD wordt opgebouwd, in plaats van q=ZOEKWOORD.

Edit: Omdat ik anders toch maar uit mijn neus zit te eten vanavond , even in recordtijd een (niet-getest!) scriptje geschreven wat precies zou moeten doen wat jij wilt.

HTML:

<script type="text/javascript">
    function doGoogleSearch() {
        var keyword = document.getElementById('form_keyword').value;
        document.location.href = 'http://www.google.com/search?q='+keyword;
    }
    
    function doImageSearch() {
        var keyword = document.getElementById('form_keyword').value;
        document.location.href = 'http://images.google.com/images?i='+keyword;
    }
</script>

<input type="text" id="form_keyword" name="form_keyword">

<input type="button" onclick="doGoogleSearch();" value="Google Zoeken">
<input type="button" onclick="doImageSearch();" value="Google Afbeeldingen Zoeken">

[ Voor 32% gewijzigd door Duroth op 17-07-2009 22:00 ]

[RobIII]

Duroth schreef op vrijdag 17 juli 2009 @ 21:47:
Helemaal gelijk natuurlijk, maar omdat de pagina op een mobiele telefoon moet gaan draaien zal die redirect heel wat meer tijd kosten. Of ik moet de snelheid van mobiel internet tegenwoordig onderschatten, maar voor zover ik weet is dat nog altijd ver onder de maat.

Ik weet niet of je de snelheid onderschat (ik heb een iPhone met 3g dinges maar vraag me niet wat de snelheid is; surfen gaat best aardig op zo'n ding maar ik weet niet hoe het met andere smartdingessen is) maar dan nog is een redirect echt niet super-zwaar ofzo. Het is een http-header en that's it. De DNS lookup naar Google moet toch gebeuren (JS of redirect, allebei de gevallen) en de DNS lookup naar de redirectende pagina is gecached omdat de werkbalk toch al getoond wordt. Als bijkomend voordeel kun je (als je wil en je ethisch er niet mee zit) ook nog eens loggen waar mensen op zoeken.

[ Voor 3% gewijzigd door RobIII op 18-07-2009 01:13 ]

[Tk55]

Hey Duroth, heel erg bedankt voor het script wat je gemaakt hebt. Het werkt zoals het moet (alleen gebruikt google images geen i maar ook gewoon q, i was voor wat anders). Ik heb een HTC Touch Diamond2 en gebruik eigenlijk altijd Wi-Fi, dus zo'n redirect zal wel niet zo'n probleem zijn maar het javascriptje werkt prima bedankt!