Creare campi input al volo

**Harding** · 03-11-2004, 15:44

E' possibile con js creare campi text al volo selezionandone il numero da un menù a tendina?

**Harding** · 03-11-2004, 16:36

ho trovato questo codice che però funziona solo con IE e non con Mozilla. Qualcuno sa come fixare?

codice:

<script>
function addInputElement(num){
inputElements.innerHTML='';
for(x=0;x<num;x++)inputElements.innerHTML=inputElements.inne rHTML +"<input value="+x+">
"
}
</script>



<select name=select1 onchange='addInputElement( select1.value )'>
<option value=0>none</option>
<option value=1>one</option>
<option value=2>two</option>
<option value=3>three</option>
</select>
</P>



<form id=form1 name=form1>
<div id=inputElements></div>
</form>
</p>

**badaze** · 03-11-2004, 16:43

Prova questo....

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var autoTextId = 0;
function createText() {
 a = '<input type="text" size="40" id="autoText'+autoTextId+'">';
 autoTextId++;
 document.write(a);
} // function createText(nbText)
//-->
</script>

</head>
<body>
<table summary="">
<tr>
 <td>
 <script language="JavaScript" type="text/javascript">
 <!--
 createText();
 //-->
 </script>
 </td>
 <td>
  <script language="JavaScript" type="text/javascript">
  <!--
  createText();
  //-->
  </script>
  </td>
</tr>
</table>
</body>
</html>

**Harding** · 03-11-2004, 16:50

Originariamente inviato da badaze
Prova questo....

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var autoTextId = 0;
function createText() {
 a = '<input type="text" size="40" id="autoText'+autoTextId+'">';
 autoTextId++;
 document.write(a);
} // function createText(nbText)
//-->
</script>

</head>
<body>
<table summary="">
<tr>
 <td>
 <script language="JavaScript" type="text/javascript">
 <!--
 createText();
 //-->
 </script>
 </td>
 <td>
  <script language="JavaScript" type="text/javascript">
  <!--
  createText();
  //-->
  </script>
  </td>
</tr>
</table>
</body>
</html>

a che serve?

**Mich_** · 03-11-2004, 16:55

No, badaze, non si possono usare i document.write() dentro un documento chiuso (cioe` in cui la pagina e` completa).

Ma non si possonousare le routine valide in IE per far funzionare una cosa che deve girare in tutti i browser: IE ha un suo linguaggio proprietario che gli altri non capiscono.

Occorre usare la proprieta` .innerHTML degli elementi HTML e scrivere in tale proprieta`, oppure usare createNode() (che non ho mai usato, ma ho visto alcuni thread in questo forum).

Piu` semplice sarebbe abilitare o disabilitare dei campi gia` presenti nel form. E quello si puo` fare con una semplice funzione JS con due loop.
Dato che immagino che il numero massimo sia predefinito (altrimenti non si potrebbe usare una select), forse e` una soluzione da prendere in considerazione.

**Harding** · 03-11-2004, 17:04

Originariamente inviato da Mich_
No, badaze, non si possono usare i document.write() dentro un documento chiuso (cioe` in cui la pagina e` completa).

Ma non si possonousare le routine valide in IE per far funzionare una cosa che deve girare in tutti i browser: IE ha un suo linguaggio proprietario che gli altri non capiscono.

Occorre usare la proprieta` .innerHTML degli elementi HTML e scrivere in tale proprieta`, oppure usare createNode() (che non ho mai usato, ma ho visto alcuni thread in questo forum).

Piu` semplice sarebbe abilitare o disabilitare dei campi gia` presenti nel form. E quello si puo` fare con una semplice funzione JS con due loop.
Dato che immagino che il numero massimo sia predefinito (altrimenti non si potrebbe usare una select), forse e` una soluzione da prendere in considerazione.

nel codice che ho postato cosa è proprietario di IE?

**Mich_** · 03-11-2004, 17:14

Provo a riscrivere tutto con sintassi JS (standard) e XHTML, puo` darsi che funzioni.

codice:

<head>
...
<script type="text/javascript">
function addInputElement(num){
  var inpEl = document.getElementById('inputElements');
  inpEl.innerHTML = '';
  for(var x=0; x<num; x++)
    inpEl.innerHTML += "<input value="+x+">
"
}
</script>
<head>

<body>
<div>
  


    <select name="select1" onchange="addInputElement( this.options[this.selectedIndex].value);">
      <option value="0">none</option>
      <option value="1">one</option>
      <option value="2">two</option>
      <option value="3">three</option>
    </select>
  </p>
  


    <form id="form1" name="form1">
      <div id="inputElements"> </div>
    </form>
  </p>
</div>
</body>

Non sono comunque sicuro che aggiungere elementi al div, li aggiunga automaticamente al form.

**Harding** · 03-11-2004, 17:25

Funziona con Mozilla e con IE ma effettivamente non crea altri campi input. Non effettua parsing.

Dove trovo lo script per abilitare i campi tramite menù a tendina?

Grazie

**Mich_** · 03-11-2004, 17:36

Non lo trovi in giro, te lo faccio al volo:

codice:

<head>
...
<script type="text/javascript">
function addInputElement(ss){
  var i=0;
  var num = parseInt(ss.options.[ss.selectedIndex].value,10);
  for (i=1; i<=num; i++) {
    ss.form.elements['campo'+i].disabled = false;
  }
  for (; i<=6; i++) {
    ss.form.elements['campo'+i].disabled = true;
  }
}
</script>
<head>

<body>
<div>
  


    <select name="select1" onchange="addInputElement(this);">
      <option value="0">none</option>
      <option value="1">one</option>
      <option value="2">two</option>
      <option value="3">three</option>
    </select>
  </p>
  


    <form id="form1" name="form1">
      <input type="text" value="1" name="campo1" disabled="true">
      <input type="text" value="2" name="campo2" disabled="true">
      <input type="text" value="3" name="campo3" disabled="true">
      <input type="text" value="4" name="campo4" disabled="true">
      <input type="text" value="5" name="campo5" disabled="true">
      <input type="text" value="6" name="campo6" disabled="true">
    </form>
  </p>
</div>
</body>

Provalo: potrebbero esserci errori di sintassi.

**Harding** · 03-11-2004, 18:03

Originariamente inviato da Mich_
Non lo trovi in giro, te lo faccio al volo:
.......
Provalo: potrebbero esserci errori di sintassi.

Grazie controllerò

Discussione: Creare campi input al volo

Strumenti discussione

Ricerca discussione

Visualizza

Creare campi input al volo

Permessi di invio