[javascript]passaggio valore tra campi

[jspippo]

salve ho un problemino:

ho dei campi testo si generano dinamicamente e che hanno nomi diversi, del tipo testo1,testo2,testo3, etc

Dovrei ora prendere il valore di un input select e inserirlo nel primo campo testo vuoto. Poi la seconda scelta dovrà essere inserita nel secondo e cosi vià.

Quale procedimento dovrei seguire?

dovrei prima contare quanti textbox ci sono? come si fa?

grazie

[Mich_]

Facciamo che fai un esempio di form, con i campi che ci vuoi mettere, poi spieghi il flusso dei dati che vorresti.

Ho letto la domanda due o tre volte, ed ogni volta ho dato un'interprtazione diversa.

Se la cosa viene generata lato server (tipo da ASP o PHP), metti solo il codice che arriva al browser e spiega cosa altro fa / puo` fare il server.

[jspippo]

Si scusa mi sono accorto dopo che la spiegazione era un po confusa...

Allora utilizzo questo codice javascript per generare dinamicamente dei form:

<script language="JavaScript" type="text/javascript">
<!--
var num=1;
function accoda(){
	if(document.createElement && document.getElementById && document.getElementsByTagName) {
		// crea elementi
		var oTr=document.createElement("TR");
		var oTd1=document.createElement("TD");
		var oTd2=document.createElement("TD");
		var oTd3=document.createElement("TD");
		var oTd4=document.createElement("TD");
		var oField=document.createElement("INPUT");
		var oFieldB=document.createElement("INPUT"); 
		var oButt=document.createElement("INPUT");

		// setta attributi
		oField.setAttribute("name","DescrizioneMateriale"+num);
		oField.setAttribute("type","text");
		oFieldB.setAttribute("type","text");
		oFieldB.setAttribute("size","5");
		oFieldB.setAttribute("name","Quantita"+num); 
		oButt.setAttribute("type","button");
		oButt.setAttribute("value","rimuovi");
		oTd1.setAttribute("align","center");
		oTd2.setAttribute("align","center");
		oTd3.setAttribute("align","center");
		oTd4.setAttribute("align","center");
		
		
		// setta gestore evento
		if(oButt.attachEvent) oButt.  attachEvent('onclick',function(e){rimuovi(e);})
		else if(oButt.addEventListener) oButt.  addEventListener('click',function(e){rimuovi(e);},false)

		// appendi al relativo padre
		oTd1.appendChild(oField);
		oTd2.appendChild(oFieldB); 
		oTd3.appendChild(oButt);
		oTr.appendChild(oTd1);
		oTr.appendChild(oTd2);
		oTr.appendChild(oTd3);
		oTr.appendChild(oTd4);
		document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr);

		// incrementa variabile globale
		num++
	}
}


function rimuovi(e){
	if(document.removeChild && document.getElementById && document.getElementsByTagName) {
		if(!e) e=window.event;
		var srg=(e.target)?e.target:e.srcElement;

		// risali al tr del td che contiene l' elemento che ha scatenato l' evento
		while(srg.tagName!="TR"){srg=(srg.parentNode)?srg.parentNode:srg.parentElement}

		// riferimento al tbody
		var tb=document.getElementById('tabella').getElementsByTagName('TBODY')[0];
		
		// rimuovi
		tb.removeChild(srg);
	}
}

Ora:

ho questa select con dei valori:

<select name="DescrizioneMateriale" id="DescrizioneMateriale">
      <option value="1">uno</option>
      <option value="2">due</option>
      <option value="3">tre</option>
    </select>

Vorrei che allaù'evento "onChange" della select, il valore vada a inserirsi nella prima casella di testo vuota.

Ora so come fare quando il nome della casella è fisso, ma dal momento che sono generate dinamicamente e i nomi sono del tipo : text1, text2, etc. non so come far riferimento a loro.

Prima dovrei contarle e poi prenderne il nome giusto?

Spero di esser stato + chiaro ora

Grazie

[Mich_]

Ancora mi manca un anello della catena (forse anche piu`?).

Con quello script tu aggiungi una riga alla tabella, e mi par di capire che in ogni riga ci sono tre campi (due text e l'altro non ho capito).
L'altra funzione rimuove una riga)
(pero` potrei sbagliarmi).

ANELLO1: Chi fa partire quello script? (per aggiungere / rimuovere)


Si puo` far partire una funzione all'onchange della select.
In tale funzione si puo` anche andare a vedere se c'e` qualcosa in un campo o in una serie (di cui si conosce il nome o anceh di cui si conosce una parte di nome fissa, seguita da un numero, e cercare il primo libero).
Questo e` gia` stato affrontato dal forum, e quindi se non vuoi aspettare, ti consiglio una ricerca (pero` devi anche lavorarci su un po').

ANELLO2: Quale e` il criterio (algoritmo) per scegliere il campo in cui inserire?

ANELLO3: Cosa succede se non ci sono campi liberi?

[jspippo]

Allora:

Lo script lo faccio partire con un pulsante, si per aggiungere sia per rimuoverlo.

Infatti io vorrei sapere come fare a scegliere il campo vuoto per inserire il valore. E' l'algoritmo che mi manca.

Se mi dici dove è stato discusso ci do un'occhiata..

In tale funzione si puo` anche andare a vedere se c'e` qualcosa in un campo o in una serie (di cui si conosce il nome o anceh di cui si conosce una parte di nome fissa, seguita da un numero, e cercare il primo libero).

Mi diresti come fare?

Ti ringrazio per la pazienza

[Mich_]

Ti do` una traccia: mi pare che sei in grado di svilupparla.
Pero` non ho capito in quali campi si deve cercare (forse mi sono espresso male nell'"anello2").

Suppongo che quindi ci siano una serie di campi, che per semplificare e per chiarezza metto in una matrice:

Descrizione1 (text) || Quantita1 (text) || altro1 (...)
Descrizione2 (text) || Quantita2 (text) || altro2 (...)
...

Per procedere suppongo: Non si sa quanti ce ne sono, ma si sa che non ci sono buchi.
Suppongo ancora che devo riempire i campi Quantita.

function riempiquan(num) {
  var ff = document.NOMEFORM;  // o altro sistema per individuare il form
  var ind = 0;
  var inser = 0;
  while(inser==0) {            // loop 
    ind++;
    if(!ff.elements['Quantita'+ind]) {
      inser = -1;              // non ci sono campi liberi
      break;
    }
    if(ff.elements['Quantita'+ind].value != '') {
      ff.elements['Quantita'+ind].value = num;
      inser = 1;
      break;
    }
  }
  // spazio per altre operazioni
}

In realta` i break non sarebbero necessari; li ho lasciati perche` il tutto funziona anche con un while(1) (loop indefinito)

[jspippo]

Ciao ho quasi risolto anche con i tuoi consigli..poi ti dirò

Ho un piccolo problema:

xchè questo IF non funziona? la parte in grassetto non me la considera.

Ti ricordo che ho campi dinamici con i nomi DescrizioneMateriale1, DescrizioneMateriale2, etc.

Praticamente con questo codice, gia testato con i nomi dei campi uguali, conta gli elementi del form, verifica quali sono i "text" prende i loro ID( e qua dovrebbe prendere DescrizioneMateriale + i) e poi controlla se è vuoto.

for (var i=0; i<len; i++) { 

if (vEle[i].type == "text") {
	if (vEle[i].id == "DescrizioneMateriale" + i ){
		if (vEle[i].value == ""){
	document.form3.elements[i].value = vDesc;
		}//end if value
	}//end if id
}// end if type

}//end for

Forse ignoro qualche regola..

[Mich_]

Ma il campo con id="DescrizioneMateriale0" esiste?

... forse devi rivedere il flusso del loop ed i vari id.

[jspippo]

Si il campo esiste xchè come aggiungo i campi con un pulsante, poi faccio un copia ed incolla dellatabella dal browser, me li da tutti e con l'id impostato.

Infatti se l'id ha un fisso, cioè senza numeri finali, il tutto funziona.

L'unica cosa che mi fa sorgere il dubbio è questa:

il nome dell'id del campo il codice lo inserisce così: id=DrescrizionaMateriale0 e non id="DrescrizionaMateriale0"

che sia da questo?

ps. il codice per aggiungere e rimuovere campi l'ho leggermente modificato.

[Mich_]

Dipende da DOCTYPE.
Se usi HTML/XHTML Strict, le virgolette sono sintassi obbligatoria, se usi altre DTD piu` vecchie in generale no.

Hai provato a visualizzare il codice HTML in un browser tipo FireFox o Mozilla dopo aver creato qualche campo? Li vedi i campi nuovi? (in IE non si vedono comunque, in Mozilla non so)