CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

silvah Nybegynder

07. august 2013 - 14:03 Der er 3 kommentarer

Form options som text knapper?

Hej.

Jeg sidder pt. med hovedet nede i sandkassen. Jeg arbejder med et søge felt der primært blot skal søge på google og youtube.

Som udgangspunkt har jeg ikke noget problem med at lave en form ala http://www.mediacollege.com/internet/javascript/form/multi-search.html. Men jeg vil gerne kunne lave en der var lidt mere avanceret.

Om den skal laves i php, html med og uden JS kan jeg simpelthen ikke finde ud af.

Jeg kunne godt tænkte mig at valgmulighederne for hvad man ville søge efter, som videoer, internettet, nyheder osv var foroven som tekst man kunne trykke på. hvorefter man kunne skrive sine søge kriterier, og søge. Herefter ville man som på bl.a. den jeg har linket til ryge videre til google og få resultaterne der.

Det jeg kort spørger om er hvor dan jeg laver mine options som tekst?

Jeg har uploadet et billede så i kan få en forståelse -> http://oi42.tinypic.com/2ppygq8.jpg

Giver det nogen mening ?

Synes godt om

MadsHaupt Juniormester

07. august 2013 - 14:30 #1

Du behøver ikke at bruge options, du skal i stedet bruge en span, Det gør google.

Synes godt om

MadsHaupt Juniormester

08. august 2013 - 16:43 #2

Kode:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ASCII">
<style>
.span:link {
text-decoration: none;
}
.span:hover {
color: blue;
}
.option:link {
color: #000000;
}
.selected {
color: blue;
}
</style>
<script type="text/javascript">
function getLocation(m, tag) {
switch (m) {
case "b":
return "http://www.google.dk/search?tbm=isch&q=" + tag;
break;
case "v":
return "http://www.youtube.com/results?search_query=" + tag;
break;
case "s":
return "http://www.google.dk/#&q=" + tag;
break;
}
}
</script>
</head>
<body>
<script type="text/javascript">
var m = "s";
function setM(index, m) {
var eles = document.getElementsByClassName("span");
eles[0].setAttribute("class", "span option");
eles[1].setAttribute("class", "span option");
eles[2].setAttribute("class", "span option");
eles[index].setAttribute("class", "span selected");
this.m = m;
}
</script>
<a href="java script: setM(0, 'b');" class="span option"><span>Billeder</span></a>
<a href="java script: setM(1, 'v');" class="span option"><span>Videoer</span></a>
<a href="java script: setM(2, 's');" class="span selected"><span>Søning</span></a>
<br />
<input type="text" id="tag" />
<input type="button" value="Søg" onclick="document.location.href = getLocation(m, document.getElementById('tag').value);"
</body>
</html>

Synes godt om

MadsHaupt Juniormester

10. august 2013 - 13:11 #3

Rettelse af min kode:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ASCII">
<style>
.span:link {
text-decoration: none;
}
.span:hover {
color: blue;
}
.option:link {
color: #000000;
}
.selected {
color: blue;
}
</style>
<script type="text/javascript">
function getLocation(m, tag) {
switch (m) {
case "b":
return "http://www.google.dk/search?tbm=isch&q=" + tag;
break;
case "v":
return "http://www.youtube.com/results?search_query=" + tag;
break;
case "s":
return "http://www.google.dk/#&q=" + tag;
break;
}
}
</script>
</head>
<body>
<script type="text/javascript">
var m = "s";
function setM(index, m) {
var eles = document.getElementsByClassName("span");
eles[0].setAttribute("class", "span option");
eles[1].setAttribute("class", "span option");
eles[2].setAttribute("class", "span option");
eles[index].setAttribute("class", "span selected");
this.m = m;
}
</script>
<a href="java script: setM(0, 'b');" class="span option"><span>Billeder</span></a>
<a href="java script: setM(1, 'v');" class="span option"><span>Videoer</span></a>
<a href="java script: setM(2, 's');" class="span selected"><span>Søning</span></a>
<br />
<input type="text" id="tag" />
<input type="button" value="Søg" onclick="document.location.href = getLocation(m, document.getElementById('tag').value);"
</body>
</html>

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS