Image als Submit!?
Ik ben de laatste tijd bezig geweest met het bouwen van een portal..
De bedoeling is dat één zoekvenster bij verschillende zoekmachines gebruikt kan worden.
Het probleem is het volgende:
Ik wil liefst geen lelijke submit button maar een mooi logo van de betreffende zoekmachine!
MAAR, blijkbaar is het (met php en html) niet mogelijk dit werkend te krijgen in alle browsers aangezien een image geen 'value' tag mag hebben waar mijn 'seek' script gebruik van maakt.
De Google button ziet er mooi uit maar deze werkt bij mij alleen in Chrome..
Nu heb ik begrepen dat het met Javascript mogelijk is om te maken zoals ik het graag wil zien alleen is het mijzelf totnogtoe niet gelukt.
Dit is mijn form op dit moment:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<div><form action="/seek/" method="post">
<input class="input" type="text" size="28" maxlength="28" name="keyword" />
<br>
<br><br><input type="image" src="image/google.jpg" name="seek" value="Google" alt="Google">
<br><br><input type="submit" src="image/bing.png" name="seek" value="Bing" alt="Bing">
<br><br><input type="submit" src="image/yahoo.png" name="seek" value="Yahoo" alt="Yahoo">
<br><br><input type="submit" src="image/youtube.png" name="seek" value="Youtube" alt="Youtube">
<br><br><input type="submit" src="image/wikipedia.png" name="seek" value="Wikipedia" alt="Wikipedia">
<br><br><input type="submit" src="image/duckduckgo.png" name="seek" value="DuckDuckGo" alt="DuckDuckGo">
<br><br><input type="submit" src="image/twitter.png" name="seek" value="Twitter" alt="Twitter">
</form></div>
<input class="input" type="text" size="28" maxlength="28" name="keyword" />
<br>
<br><br><input type="image" src="image/google.jpg" name="seek" value="Google" alt="Google">
<br><br><input type="submit" src="image/bing.png" name="seek" value="Bing" alt="Bing">
<br><br><input type="submit" src="image/yahoo.png" name="seek" value="Yahoo" alt="Yahoo">
<br><br><input type="submit" src="image/youtube.png" name="seek" value="Youtube" alt="Youtube">
<br><br><input type="submit" src="image/wikipedia.png" name="seek" value="Wikipedia" alt="Wikipedia">
<br><br><input type="submit" src="image/duckduckgo.png" name="seek" value="DuckDuckGo" alt="DuckDuckGo">
<br><br><input type="submit" src="image/twitter.png" name="seek" value="Twitter" alt="Twitter">
</form></div>
Dit is het php script dat ervoor zorgt dat de zoekopdracht uitgevoerd word.
Quote:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Ik heb in de php sectie al de nodige tips gekregen om het script in te korten maar zolang het werkt wil ik eerst graag even zorgen dat ik een mooie afbeelding als submit button kan gebruiken.
Mijn dank is groot voor een passende oplossing!
Gewijzigd op 03/01/2015 19:44:02 door Jan Joosten
Bijvoorbeeld: http://stackoverflow.com/questions/14199788/how-do-i-use-an-image-as-a-submit-button
Als aanvulling op Ward's tweede mogelijkheid dan maar:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<style>
#phphulp {
cursor:pointer;
}
</style>
</head>
<body>
<form id="myForm" action="form_action.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<img id="phphulp" src="http://www.phphulp.nl/img/phphulp-logo.jpg" />
</form>
<script>
// functie wordt automatisch aangeroepen als de pagina geladen is
window.onload = function() {
var form = document.getElementById("myForm");
var phphulp = document.getElementById("phphulp");
// click event op element met id="phphulp"
phphulp.onclick = function() {
form.submit();
};
};
</script>
</body>
</html>
<html>
<head>
<style>
#phphulp {
cursor:pointer;
}
</style>
</head>
<body>
<form id="myForm" action="form_action.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<img id="phphulp" src="http://www.phphulp.nl/img/phphulp-logo.jpg" />
</form>
<script>
// functie wordt automatisch aangeroepen als de pagina geladen is
window.onload = function() {
var form = document.getElementById("myForm");
var phphulp = document.getElementById("phphulp");
// click event op element met id="phphulp"
phphulp.onclick = function() {
form.submit();
};
};
</script>
</body>
</html>
Gewijzigd op 03/01/2015 15:24:18 door Frank Nietbelangrijk
Ik ga voor optie twee als ik het voor elkaar krijg..
Welke optie zou bij jullie de voorkeur geven?
Ik heb wel meerdere images die als submit button fungeren of is dat geen probleem bij optie 2?
Gewijzigd op 03/01/2015 15:49:29 door Jan Joosten