Link als submitbutton

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mark Hogeveen

Mark Hogeveen

02/11/2012 12:52:48
Quote Anchor link
Hallo, ik heb een button met sprites gemaakt en een achtergrondafbeelding gegeven met CSS.
De button is een link omdat ik anders de :hover manier niet kan gebruiken. (Internet Explorer ondersteunt alleen de CSS :hover bij links)

De button is als volgt:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<div class="blue-button">
    <a href="#" class="blue-button-link">
    <span class="blue-button-left"></span>
    <span class="blue-button-center">Verzenden</span>
    <span class="blue-button-right"></span>
<input type="submit" name="test" class="blue-button-submit" value="" onClick="alert('test')">
    </a>
</div>


En hier de CSS:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
.blue-button {
height: 29px;
display: inline;
}
a .blue-button-left {
width: 3px;
height: 28px;
padding-top: 4px;
padding-left: 1px;
padding-right: 2px;
padding-bottom: 6px;
display: inline;
background: url('/img/blue-button.gif') no-repeat 0px -28px;
}
a:hover .blue-button-left {
width: 3px;
height: 28px;
background: url('/img/blue-button-mouseover.gif') no-repeat 0px -28px;
}
a .blue-button-center {
height: 28px;
background: url('/img/blue-button.gif') repeat-x;
padding-top: 4px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 6px;
margin-right: -10px;
}
a:hover .blue-button-center {
height: 28px;
background: url('/img/blue-button-mouseover.gif') repeat-x;
padding-top: 4px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 6px;
margin-right: -10px;
}
a .blue-button-right {
width: 32px;
height: 28px;
padding-top: 4px;
padding-left: 10px;
padding-right: 22px;
padding-bottom: 6px;
background: url('/img/blue-button.gif') no-repeat -3px -56px;
}
a:hover .blue-button-right {
width: 32px;
height: 28px;
padding-top: 4px;
padding-left: 10px;
padding-right: 22px;
padding-bottom: 6px;
background: url('/img/blue-button-mouseover.gif') no-repeat -3px -56px;
}
.blue-button-link {
height: 30px;
font-family: verdana;
font-size: 11pt;
font-weight: bold;
color: white;
text-decoration: none;
}
.blue-button-link:hover {
height: 30px;
font-family: verdana;
font-size: 11pt;
font-weight: bold;
color: #fafafa;
text-decoration: none;
}
.blue-button-submit {
height: 29px;
display: block;
position: absolute;
background-color: transparent;
border: 1px solid black; /* Dit doe ik tijdelijk zodat ik de button kan zien */
margin: 0px;
padding-left: 10px;
padding-right: 10px;
color: white;
font-family: verdana;
font-size: 11pt;
font-weight: bold;
float: left;
}

De button werkt bij mij perfect (en ook het mouse over effect)
maar nu moet ik met javascript maken dat de link een formulier moet submitten, dat wil ik niet.
Ik wil het formulier submitten met een gewone submit button, zodat er geen javascript oplossing nodig is Ook als er een bezoeker javascript uit heeft staan kan dan het formulier verzonden worden.
Dus ik heb bedacht dat de submitbutton onzichtbaar in de link komt te staan. Als je met de muis over de link gaat kun je toch nog het :hover effect gebruiken.
En de button bedekt (onzichtbaar) de hele link.
Dus als je op de link klikt klik je eigenlijk op de submit button omdat die er bovenop staat.
(de link is dus alleen maar voor de CSS :hover en is verder niet meer belangrijk)

Mijn probleem:

Ik krijg de button niet op z'n plek. Ik heb al vanalles gebrobeerd, met position:absolute, float, etc...
De button moet een compact stukje html blijven dat ik overal neer kan zetten waar ik wil. En dat ik niks hoef aan te passen zoals de breedte, hoogte, position, de stijl staat vast in de CSS.
Weet iemand hoe ik de submitbutton eroverheen kan plaatsen op de goede manier?

Het schijnt er ook nog eens mee te maken te hebben welk soort doctype ik gebruik, ik gebruik nu deze:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Voorbeeld: Klik
Gewijzigd op 02/11/2012 13:00:06 door Mark Hogeveen
 
PHP hulp

PHP hulp

11/05/2024 04:24:43
 
Reshad F

Reshad F

02/11/2012 13:11:09
Quote Anchor link
je kan toch gewoon heel simpel met GET waardes gaan werken?

in je href komt dan iets van

href="<php $_SERVER['PHP_SELF'] ?>?page=pagina"

en dan

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
if(isset($_GET['pagina']){
// hier afhandelen
}
?>


het is niet het veiligst maar het is het eerste wat in me opkwam.
Gewijzigd op 02/11/2012 13:12:02 door Reshad F
 
Bo Ter Ham

Bo Ter Ham

02/11/2012 13:26:59
Quote Anchor link
Werkt het ook niet met <button name="blabla" class="blabla">value</button>?
Ik heb alleen IE9 dus ik kan het niet testen..
 
Mark Hogeveen

Mark Hogeveen

02/11/2012 13:48:11
Quote Anchor link
Het gaat erom dat een formulier kan worden gesubmit, en het moet met POST omdat er een wachtwoord wordt verzonden (en het mag dus niet in de adresbalk te lezen zijn)
Ook als ik met een link een GET request doe, dan wordt er geen data van een formulier meegezonden.

@ Bo Ter Ham

Hoe bedoel je dat je het niet kunt testen met IE9?
En een <button></button> kan, maar dit soort buttons kun je geen type="submit" geven, omdat het geen echte inputs zijn, maar gewone klikbuttons. Het moet dus met <input type="submit" name="naam" class="classnaam">
Gewijzigd op 02/11/2012 13:55:47 door Mark Hogeveen
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.