Inviare Tutti i Campi di un Form modificabile Dinamicamente con Javascript

[Skull260287]

Ho scritto il codice che vi posto a breve per permettere l'aggiunta/rimozione di campi da un form. Dovrei ora gestire l'invio degli stessi tramite una pagina in asp. Come ho sempre fatto non funziona, ovvero con il semplice submit ad una pagina asp che gestisce la ricezione del form con "Request.Form(""). In questo modo infatti vengono ricevuto solo i campi staticamente presenti nel codice della pagina e non quelli aggiunti dinamicamente aggiunti. Qual è il giusto modo di procedere?


Codice Javascript Inserimento/Cancellazione Dinamico:

<!--
var items=1;  //Varibile di conteggio di tutti gli elementi inseriti
var numrow=1; //Varibile di conteggio per il numero delle righe effettivamente presenti
function insRow(num)
{
	items++;
	numrow++;
	var x=document.getElementById('tabellaordine').insertRow(num);
	var y=x.insertCell(0);
	var z=x.insertCell(1);
	var k=x.insertCell(2);
	var n=x.insertCell(3);
	var del=x.insertCell(4);

	/*Codice da inserire nella pagina*/
	newitemq="<input type=\"text\" name=\"q" + items + "\" id=\"q" + items + "\" size=\"5\" />"
	newitemc="<input type=\"text\" name=\"c" + items + "\" id=\"c" + items + "\" size=\"10\" />"
	newitema="<input type=\"text\" name=\"a" + items + "\" id=\"a" + items + "\" size=\"50\" />"
	newitemp="<input type=\"text\" name=\"p" + items + "\" id=\"p" + items + "\" size=\"5\" />"
	newitemdel="<img src=\"../images/ico_delete.gif\" width=\"17\" height=\"17\" alt=\"Del\" style=\"margin-left:10px; float: right;\" onclick=\"deleteRow(this)\"/>";

	y.innerHTML=newitemq;
	z.innerHTML=newitemc;
	k.innerHTML=newitema;
	n.innerHTML=newitemp;
	del.innerHTML=newitemdel;
}

function deleteRow(r)
{
	var i=r.parentNode.parentNode.rowIndex;
	document.getElementById('tabellaordine').deleteRow(i);
	numrow--;
}
// -->

Codice Javascript invio:

<!--
 function ValidaOrdine() {

	document.ordine.action = "index.asp?P=INVIAORD";
	document.ordine.submit();
 }
// -->

Codice html dove vengono aggiunti i campi dinamicamente:

<table class="tabellaordine" id="tabellaordine">
        <tr>
            <td width="10%"><input type="text" name="q1" id="q1" size="5" /></td>
            <td width="10%"><input type="text" name="c1" id="c1" size="10" /></td>
            <td width="70%"><input type="text" name="a1" id="a1" size="50" /></td>
            <td width="5%"><input type="text" name="p1" id="p1" size="5" /></td>
            <td width="17px">[img]../images/ico_delete.gif[/img]</td>
        </tr>
        </table>

Grazie a tutti dell'aiuto.

[alessio_1976]

...ovviamente il tag "form" che tu hai chiamato "ordine" nel javascript, c'è nell'html della pagina...vero?...perché non lo vedo...

Altrimenti sembrerebbe strana la cosa...

[Skull260287]

Originariamente inviato da alessio_1976
...ovviamente il tag "form" che tu hai chiamato "ordine" nel javascript, c'è nell'html della pagina...vero?...perché non lo vedo...

Altrimenti sembrerebbe strana la cosa...

Si si, certo. Il codice riportato è solo un estratto. Eccolo Completo di form:

<table width="90%" border="0" align="center" cellpadding="3" cellspacing="5" style="font-family:Tahoma; font-size:11px; color:#CC3300;text-align:justify;">
    <form name="ordine" id="ordine" method="post">
    <tr>
      <td colspan="2">
      <table class="tabellaordine">
        <tr>
          <td width="5%">Nome: </td>
          <td width="17%"><input type="text" name="nome" size="10" /></td>
          <td width="7%">Cognome: </td>
          <td width="17%"><input type="text" name="cognome" size="10" /></td>
          <td width="5px" style="text-align:right;">E-mail: </td>
          <td width="39%"><input type="text" name="mail" size="25" /></td>
        </tr>
      </table>
      </td>
    </tr>
    <tr>
      <td colspan="2">
      <table class="tabellaordine">
        <tr>
          <td width="7%">Via:</td>
          <td width="32%"><input type="text" name="via" size="50" /></td>
          <td width="2%">N&deg;: </td>
          <td width="8%"><input type="text" name="numero" size="3" /></td>
          <td width="9%">Cap: </td>
          <td width="42%"><input type="text" name="cap" size="7" /></td>
        </tr>
      </table>
      </td>
    </tr>
    <tr>
      <td colspan="2">
      <table class="tabellaordine">
        <tr>
          <td width="5%">Citt&agrave;: </td>
          <td width="50%"><input type="text" name="citta" size="50" /></td>
          <td width="8%">Provincia:</td>
          <td width="23%"><input type="text" name="provincia" size="3" /></td>
        </tr>
      </table>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        Indicare tutti i dati richiesti per gli oggetti che si desidera acquistare: 
</td>
    </tr>
    <tr>
      <td colspan="2">
      <table class="tabellaordine">
      <tr>
      <td width="73">Quantit&agrave;</td>
      <td width="131">codice</td>
      <td width="596">articolo</td>
      <td width="104">prezzo</td>
      <td width="29"></td>
    </tr>
      <tr>
      <td colspan="5">
      	<table class="tabellaordine" id="tabellaordine">
        <tr>
            <td width="10%"><input type="text" name="q1" id="q1" size="5" /></td>
            <td width="10%"><input type="text" name="c1" id="c1" size="10" /></td>
            <td width="70%"><input type="text" name="a1" id="a1" size="50" /></td>
            <td width="5%"><input type="text" name="p1" id="p1" size="5" /></td>
            <td width="17px">[img]../images/ico_delete.gif[/img]</td>
        </tr>
        </table>
      </td>
      </tr>
      <tr>
        <td colspan="5">
<a id="color1" onclick="javascript: insRow(numrow);" style="float:right; margin-right:38px;cursor:pointer;"><u>Aggiungi un articolo</u></a></td>
      </tr>
      <tr>
        <td colspan="5">



          <input type="radio" name="radio" id="accetto" value="accetto" />
          Il sottoscritto dichiara di aver letto le <u>condizioni di vendita</u> e le accetta.

          <input type="button" value="Invia Ordine" id="send" onClick="javascript: ValidaOrdine()" style="float:right; margin-right:38px;" />
        </p></td>
      </tr>
 	  </table>
      </td>
    </tr>
    <tr>
      <td colspan="2"></td>
    </tr>
    </form>
  </table>

[ale_1976]

così al volo io proverei intanto a togliere il trattino nei due eventi quando richiami il javascript....mettendo java-script dovrebbe darti errore...

[Skull260287]

Originariamente inviato da ale_1976
così al volo io proverei intanto a togliere il trattino nei due eventi quando richiami il javascript....mettendo java-script dovrebbe darti errore...

Guarda non so da cosa dipenda, penso dall'elaborazione su html.it, in quanto nel codice da cui ho fatto copia-incolla e che ho scritto il trattino non è presente.

[ale_1976]

effettivamente, se guardi nell'html della pagina, dopo aver aggiunto campi, non ci sono le nuove input....quindi quando poi la invii, non può trovare il loro contenuto...
Deve proprio fare l'operazione lato server...quindi al click su aggiungi o elimina, eseguire uno script lato server che poi ti ripropone la pagina con i nuovi campi...
Perché anche volendo fare una cosa come fai tu, senza ricaricare la pagina, ma usando Ajax, non risolvi cmq niente...perché devi comunque fare l'innerHTML per poi appendere i nuovi campi, ma la pagina non essendo ricaricata, non vede quei campi...

Mi sa che dovrai arrenderti....e ad ogni aggiunta o eliminazione, ricaricare la pagina...portandoti dietro i valori già inseriti e riproponendoli nelle relative input...

[Skull260287]

Originariamente inviato da ale_1976
effettivamente, se guardi nell'html della pagina, dopo aver aggiunto campi, non ci sono le nuove input....quindi quando poi la invii, non può trovare il loro contenuto...
Deve proprio fare l'operazione lato server...quindi al click su aggiungi o elimina, eseguire uno script lato server che poi ti ripropone la pagina con i nuovi campi...
Perché anche volendo fare una cosa come fai tu, senza ricaricare la pagina, ma usando Ajax, non risolvi cmq niente...perché devi comunque fare l'innerHTML per poi appendere i nuovi campi, ma la pagina non essendo ricaricata, non vede quei campi...

Mi sa che dovrai arrenderti....e ad ogni aggiunta o eliminazione, ricaricare la pagina...portandoti dietro i valori già inseriti e riproponendoli nelle relative input...

Ti ringrazio della risposta, non esiste nulla di fattibile in javascript per l'invio delle informazioni? Il codice javascript è l'unico che "conosce" i campi creati di conseguenza se ci fosse un modo per inviare il tutto ad una pagina asp che elabora le informazioni e restituisce una risposta. Ho trovato qualcosa in php, dovrò vedere di lavorarci su per ricavare lo stesso in asp: http://www.davidonzo.com/post/603/aj...dati-via-post/

[ale_1976]

ma lo vuoi fare in Javascript solo per non dover ricaricare la pagina?
Perché altrimenti sarebbe fattibile con asp, ma ovviamente ricaricando la pagina...

[Skull260287]

Originariamente inviato da ale_1976
ma lo vuoi fare in Javascript solo per non dover ricaricare la pagina?
Perché altrimenti sarebbe fattibile con asp, ma ovviamente ricaricando la pagina...

Si, vorrei evitare di ricaricare la pagina in modo da poter utilizzare il lavoro fatto. So che è possibile realizzare il tutto in asp, anche in maniera più semplice ma si andrebbe ogni volta a dover ricaricare la pagina che per esperienza comporta, almeno su explorer, un effetto di sgranamento su tutto il sito se ad esempio l'header del sito è in flash o vi è contenuto flash. Dato che la soluzione deve essere portabile, sa soluzione javascript/ajax mi pareva opportuna. Anche altre parti del sito mi sono state richieste lato client proprio per evitare ciò.

Ti ringrazio per la collaborazione.

[ale_1976]

beh....facci sapere se riesci...perché è comunque interessante l'aggiunta al volo di campi ad una form.

dai un'occhiata anche qui...che magari serve...
http://www.aspitalia.com/script/493/...avascript.aspx

ciao