Avatar billede 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 ?
Avatar billede 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.
Avatar billede 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>
Avatar billede 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>
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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