Cambiare type input?

[memai]

é possibile con javascript cambiare il type di un input?


esempio:

abbiamo un input type='text' e cliccado su un link questo input type diventa type='file'

<script>
function cambia(){

//cambio type dell'input es, scrivendo: document.form.campo.type="file";  però so che è errato
}
</script>

<forrm name='form'>
<input type='text' name='campo'>
</form>
<a href='' onclick='cambia()'>Cambia</a>

Grazie!

[javascripter]

Sai che errato? Hai provato?
È corretto. Però, sarebbe più preciso in questo modo:

<!-- in head -->
<script type="text/javascript">
//<![CDATA[
function cambia(){
     document.forms.form.campo.type="file";
}
//]]>
</script>
<!-- in body -->
<form name='form'>
<input type='text' name='campo'>
</form>
<a href='' onclick='cambia(); return false;'>Cambia</a>

A me risulta che in IE il cambio dell'attributo type non è consentito.

[memai]

Io avevo provato e non mi andava.
Mmmh, dovrebbe funzionare? No, perchè non va.

P.s: io uso Google Chrome, per me quindi non c'è problema.

Io avevo provato e non mi andava.
Mmmh, dovrebbe funzionare? No, perchè non va.

P.s: io uso Google Chrome, per me quindi non c'è problema.

Si, tu usi Chrome. Ma quanti dei tuoi visitatori usano IE?
E per questi, come ti comporti?

Ti faccio ricordare che ancora IE è il browser più utilizzato.

PS. Ti faccio notare che il tuo sito ha una rappresentazione che non è quella che speri non con IE ma neanche con Firefox.

Rendere un lavoro compatibile solo con Chrome mi pare riduttivo non credi?

EDIT:
Mentre stavo testando una mia soluzione mi accorgo che su Chrome il cambio di attributo non funziona neppure ...

[memai]

Per il momento a me serve solo sapere come riuscire a fare quello che sto cercando, ti dò "Assolutamente" ragione sul fatto che è importante riuscir a garantire lo stesso modo di visualizzazione di un sito con un qualsiasi browser, ma per il momento e dico "solo" per il momento, non è quello che cerco, quello che cerco è riuscire a modificare con un click il type di un input,sperando di trovare un modo più valido degli altri.

Senza offesa.

Ho trovato una soluzione.

Verifico se trattasi di IE o Chrome (che stavolta danno gli stessi problemi ) oppure di Mozilla.
Nel primo caso creo un campo prima del target e cancello quest'ultimo (con degli aggiustamenti per non creare conflitti di ID.
Nel secondo caso cambio semplicemente l'attributo "type".

[memai]

Cavolo hai ragione! Con Mozilla mi cambia il type utilizzando il metodo del javascript.

Il tuo metodo è giusto, solo se si usa solo un link per cambiare, purtroppo non fa per me, perchè io dovrei creare una specie di "slide";
ovvero devono esserci più link, la quale ognuno se cliccato modificherà il contenuto della "slide" e ciò che cambierà sarà il type dell'input.
Perciò da quanto ho capito, non posso fare quello che hai detto (nel caso che i browser usati sono l'IE e Chrome).

Ho provato col il Jquery facendo il toggle, ma non son ancora riuscito a farlo funzionare a modo su più di due elementi.

Scusate se non si è capito, parlo come un'orca assassina che cerca di mangiare il ghiaccio del polo sud.

La mia soluzione:

nell'head della pagina imposto un paio di funzioni

<script type="text/javascript">
//<![CDATA[
    function isIE() {
        if(document.all){
            return true;
        }else{
            return false;
        }
    }
    
    function isChrome() {
        if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
            return true;
        }else{
            return false;
        }
    }
    
    function cambia(el, form) {
        var campo = document.getElementById(el);
        var attr = campo.getAttribute('type');
        
        if(isIE() || isChrome) {
            switch(attr) {
                case 'text':
                    newInput(el, 'file', form);
                    break;
                case 'file':
                    newInput(el, 'text', form);
                    break;
            }
        }else{
            switch(attr) {
                case 'text':
                    campo.setAttribute('type', 'file');
                    break;
                case 'file':
                    campo.setAttribute('type', 'text');
                    break;
            }
        }
    }
    
    function newInput(id, tipo, form) {
        var myForm = document.getElementById(form);
        var oldElem = document.getElementById(id);
        var newElem = document.createElement('input');
        
        newElem.setAttribute('id', id + '2');
        newElem.setAttribute('name', id);
        newElem.setAttribute('type', tipo);
        
        myForm.insertBefore(newElem, oldElem);
        
        delInput(id, form);
        renInput(id + '2', id);
    }
    
    function delInput(id, form) {
        var myForm = document.getElementById(form);
        var oldElem = document.getElementById(id);
        
        myForm.removeChild(oldElem);
    }
    
    function renInput(id, newId) {
        var elem = document.getElementById(id);
        
        elem.setAttribute('id', newId);
    }
//]]>
</script> 

poi nel body, il form ...

<form name="test" id="test" action="#" method="post" enctype="multipart/form-data">
<input name="campo" id="campo" type="text" />&nbsp;
<input type="submit" id="submit" name="submit" value="Invia" /><br /><br />
<a href="#" onclick="cambia('campo', 'test');">Cambia</a>
</form> 

Dimmi se vuoi altre spiegazioni ...



Un esempio funzionante lo trovi qui.



PS. ma hai poi risolto per i DIV coi CSS?

[memai]

Oddio, non dovevi creare un file di sorgente così completo!
Sei un grande
Molto interesante:

        var campo = document.getElementById(el);
        var attr = campo.getAttribute('type');

Comunque grazie, penso di riuscir a risolvere il problema che ho con quello che mi è stato scritto in questo post!

Grazie tante a tutti!



PS: Più o meno, gli elementi nella pagina sono ordinati molto, molto bene, ma vorrei riuscire a fare di meglio e con più sicurezza.