da hidden a text

**carlomarx** · 27-11-2013, 05:18

Quest'esempio si limita a fare quello che cerchi. Se vuoi renderlo più cool devi lavorare sul CSS.

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento HTML</title>
<style type="text/css">
fieldset.e-list {
    position: relative;
    height: 24px;
    width: 250px;
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
    padding: 0;
    margin: 0;
    border: none;
}

fieldset.e-list label, fieldset.e-list input[type="text"], fieldset.e-list legend {
    width: 90%;
    height: 24px;
    margin: 0;
    padding: 0 8px;
    line-height: 24px;
    font-family: verdana;
    font-weight: normal;
    font-size: 12px;
    border: 1px #cccccc solid;
    background-color: #ffffff;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

fieldset.e-list:hover label, fieldset.e-list:hover input[type="text"] {
    border: none;
}

fieldset.e-list label:hover, fieldset.e-list input[type="text"]:hover {
    background-color: red !important;
}

#tizio:checked  + label, fieldset.e-list input[type="radio"], fieldset.e-list  input[type="text"], fieldset.e-list label, fieldset.e-list legend {
    display: none;
}

fieldset.e-list:hover  label, fieldset.e-list input[type="radio"]:checked + label,  #tizio:checked ~ input[type="text"], fieldset.e-list:hover legend  {
    display: block;
}

fieldset.e-list:hover  input[type="radio"]:checked + label, fieldset.e-list:hover  input[type="radio"]:checked ~ input[type="text"] {
    background-color: blue;
}

</style>
</head>

<body>

<form name="tuo-form">
    <div>Metti il mouse sopra questo campo:
        <fieldset class="e-list">
            <legend>- scegli -</legend>
            <input type="radio" name="selezione" value="0" id="tizio"  /><label for="tizio">Scegli...</label><input  type="text" name="campotesto" value="0" />
            <input  type="radio" name="selezione" checked value="1" id="caio" /><label  for="caio">Gianni</label>
            <input  type="radio" name="selezione" value="2" id="sempronio" /><label  for="sempronio">Pinotto</label>
        </fieldset>
    </div>
    <p>Esempio di textbox normale: <input type="text" name="testosemplice" /></p>
    <p>
        Esempio di select normale:
        <select name="selectsemplice">
            <option>Mario</option>
            <option>Luigi</option>
            <option>Dumbo</option>
        </select>
    </p>
    <p>
        Esempio di textarea normale:<br />
        <textarea name="areaditesto" cols="50" rows="10"></textarea>
    </p>
</form>

</body>
</html>

**partime** · 27-11-2013, 09:52

Originariamente inviata da carlomarx

Quest'esempio si limita a fare quello che cerchi. Se vuoi renderlo più cool devi lavorare sul CSS.

Sai che non riesco a trovare una singola riga del codice che hai scritto (l'hai scritto tu, vero?) che abbia attinenza con quanto richiesto?

frenkytribe, se usi jQuery, puoi inserire il seguente codice nel tag <head>:

codice:

<script type="text/javascript">
    $(document).ready(function() {
        $("#selezione").change(function() {
            var valore = $(this).val();
            $("#hid").val(valore);
            if (valore == "0")
            {
                $("#hid").attr("type", "text");
            }
            else
            {
                $("#hid").attr("type", "hidden");
            }
        });
    });
</script>

modificando però il tuo form in modo da aggiungere l'attributo "id" ai campi:

codice:

<select id="selezione" name="selezione">
    <option>0</option>
    <option>1</option>
    <option>2</option>
</select>
<br/>
<input type="hidden" id="hid" name="hid" value=""/>

**frenkytribe** · 27-11-2013, 13:40

Originariamente inviata da partime

Sai che non riesco a trovare una singola riga del codice che hai scritto (l'hai scritto tu, vero?) che abbia attinenza con quanto richiesto?

Esattamente! Non capisco cosa c'entra...

Comunque ho risolto, il cambio di un type non funziona con tutte le versioni di IE, ma si può risolvere con jquery e css utilizzando show e hide. Potete vedere un esempio quà.
http://jsfiddle.net/neysor/4EVBL/

**carlomarx** · 27-11-2013, 15:22

Originariamente inviata da partime

Sai che non riesco a trovare una singola riga del codice che hai scritto (l'hai scritto tu, vero?) che abbia attinenza con quanto richiesto?

Probabilmente è vero che certe soluzioni non sono alla portata di tutti…! :P

**partime** · 27-11-2013, 18:04

Originariamente inviata da carlomarx

Probabilmente è vero che certe soluzioni non sono alla portata di tutti…! :P

Probabile... bisogna impegnarsi parecchio per trovare attinenza tra la richiesta e la tua risposta, e siamo in due a non esserci riusciti...

**carlomarx** · 27-11-2013, 22:06

Originariamente inviata da partime

Probabile... bisogna impegnarsi parecchio per trovare attinenza tra la richiesta e la tua risposta, e siamo in due a non esserci riusciti...

Magari dopo questa discussione ci si potrebbe chiedere se non sia meglio nascondere un campo fisso su "text" e far scegliere al php se accoglierlo o no in base alla scelta della (pseudo)select, o se sia invece necessario tutto il trambusto proposto in apertura a questo thread. Il tutto prendendo in considerazione che quella che vi ho proposto è una realizzazione in puro CSS (= compatibilità a 360°).
Almeno la pulce nell'orecchio spero di averla instillata…

Discussione: da hidden a text

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio