Printable View
é 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'
Codice HTML:<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!
Sai che errato? Hai provato?
È corretto. Però, sarebbe più preciso in questo modo:Codice HTML:<!-- 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.
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?Citazione:
Originalmente inviato da memai
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 ...
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".
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
poi nel body, il form ...Codice PHP:<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>
Dimmi se vuoi altre spiegazioni ...Codice PHP:<form name="test" id="test" action="#" method="post" enctype="multipart/form-data">
<input name="campo" id="campo" type="text" />
<input type="submit" id="submit" name="submit" value="Invia" /><br /><br />
<a href="#" onclick="cambia('campo', 'test');">Cambia</a>
</form>
Un esempio funzionante lo trovi qui.
PS. ma hai poi risolto per i DIV coi CSS?
Oddio, non dovevi creare un file di sorgente così completo!
Sei un grande
Molto interesante:
Comunque grazie, penso di riuscir a risolvere il problema che ho con quello che mi è stato scritto in questo post!Codice HTML:var campo = document.getElementById(el);
var attr = campo.getAttribute('type');
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.