Radiobuttons als form input

[Verwijderd]

Dag mensen,

ik wil voor een webformulier eigenlijk een aantal grote buttons gebruiken als form input.
Daar is m.i. geen standaard element voor dus zelf maar wat gefabriceerd.
Ik heb echter het idee dat het beter kan.. maar kan niks concreets vinden.

Iemand een idee?

Thanks!





<script>

JavaScript:

function buttonchange(catbutton) {
    document.getElementById('category').value = catbutton;

    for (i=1;i<=5;i++)
    {
        document.getElementById('catbutton'+i).className = 'myButton';
    }

    
    document.getElementById('catbutton'+catbutton).className = 'myButtonSelected';
}

function buttonchange2(amountbutton) {
    document.getElementById('amount').value = amountbutton;

    for (i=1;i<=5;i++)
    {
        document.getElementById('amountbutton'+i).className = 'myButton';
    }

    
    document.getElementById('amountbutton'+amountbutton).className = 'myButtonSelected';
}

</script>

HTML:

<form name="new_inventory" method="post">

<input type="hidden" name="category" value="" />
<input type="hidden" name="amount" id="amount" value="" />

<label>VAR 1</label>
<input type="button" name="catbutton1" id="catbutton1" value="1" onclick="buttonchange(1);" class="myButton">
<input type="button" name="catbutton2" id="catbutton2" value="2" onclick="buttonchange(2);" class="myButton">
<input type="button" name="catbutton3" id="catbutton3" value="3" onclick="buttonchange(3);" class="myButton">
<input type="button" name="catbutton4" id="catbutton4" value="4" onclick="buttonchange(4);" class="myButton">
<input type="button" name="catbutton5" id="catbutton5" value="5" onclick="buttonchange(5);" class="myButton">

<label>VAR 2</label>
<input type="button" name="amountbutton1" id="amountbutton1" value="1" onclick="buttonchange2(1);" class="myButton">
<input type="button" name="amountbutton2" id="amountbutton2" value="2" onclick="buttonchange2(2);" class="myButton">
<input type="button" name="amountbutton3" id="amountbutton3" value="3" onclick="buttonchange2(3);" class="myButton">
<input type="button" name="amountbutton4" id="amountbutton4" value="4" onclick="buttonchange2(4);" class="myButton">
<input type="button" name="amountbutton5" id="amountbutton5" value="5" onclick="buttonchange2(5);" class="myButton">
<br /><br /><br />

<input type=submit  value="send"/>
</form>

Cascading Stylesheet:

.myButton{
background:url(images/test1.png) no-repeat;

width: 141px;
height: 70px;
border: none;

font-size:20px;
}

.myButtonSelected{
background:url(images/test2.png) no-repeat;

width: 141px;
height: 70px;
border: none;
font-size:20px;
}

[crisp]

Daar kan je gewoon radiobuttons met labels voor gebruiken, en je hebt in principe niet eens javascript nodig. Sommige browsers (IE < 9 bijvoorbeeld) zal je echter nog wel een handje moeten helpen... Mijn basis-opzet zou zoiets zijn:

HTML:

input[type="radio"] {
    display: none;
}
label {
    display: inline-block;
    margin-right: 13px;
    width: 130px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    border: 2px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 8px #ccc;
    background-image: linear-gradient(#fff, #cce3e4);

    /* voor Firefox */
    background-image: -moz-linear-gradient(#fff, #cce3e4);
    -moz-border-radius: 5px;
    -moz-box-shadow: 0 0 8px #ccc;
}
input:checked + label {
    border-color: lime;
    box-shadow: 0 0 8px lime;

    -moz-box-shadow: 0 0 8px lime;
}
</style>
<form>
    <p>
        <input type="radio" name="foo" id="foo1" value="1"><label for="foo1">1</label>
        <input type="radio" name="foo" id="foo2" value="2"><label for="foo2">2</label>
        <input type="radio" name="foo" id="foo3" value="3"><label for="foo3">3</label>
        <input type="radio" name="foo" id="foo4" value="4"><label for="foo4">4</label>
        <input type="radio" name="foo" id="foo5" value="5"><label for="foo5">5</label>
    </p>
    <p>
        <input type="submit">
    </p>
</form>