Form con aggiunta righe

giuppyone · 13 Feb 2014

Buona sera a tutti.
Sto cercando questa soluzione da tempo, ma non la trovo. Premetto che sono un neofita dell'argomento php e html.
Ho creato, modificandolo, un javascript che aggiunge righe in un form.
Ora il problema è questo, aggiungendo righe i "name" diventano per esempio "nome1", "name2", "name3", etc, come posso inviarmi via email, con una pagina php, tutti i dati generati da questo form?
Vi posto il codice:

HTML:

<SCRIPT language="javascript">  
       var num=1
	    function addRow(tableID) {  
  
            var table = document.getElementById(tableID);  
  
            var rowCount = table.rows.length;  
            var row = table.insertRow(rowCount); 
			
            var cell1 = row.insertCell(0);  
            var element1 = document.createElement("input");  
            element1.type = "checkbox";  
            cell1.appendChild(element1);  
  
            var cell2 = row.insertCell(1);  
            cell2.innerHTML = rowCount + 1;  
  
            var cell3 = row.insertCell(2);  
            var element2 = document.createElement("input");  
            element2.type = "text";  
			element2.name = "cod"+num;  
			element2.placeholder = "Codice prodotto";
            cell3.appendChild(element2);  
			
			var cell3 = row.insertCell(3);  
            var element2 = document.createElement("input");  
            element2.type = "text";  
			element2.name = "des"+num;  
			element2.placeholder = "Descrizione";
            cell3.appendChild(element2); 
			
			var cell3 = row.insertCell(4);  
            var element2 = document.createElement("input");  
            element2.type = "text"; 
			element2.name = "forma"+num;  
			element2.placeholder = "Formato"; 
            cell3.appendChild(element2); 
			
			var cell3 = row.insertCell(5);  
            var element2 = document.createElement("input");  
            element2.type = "text";  
			element2.name = "quant"+num;  
			element2.placeholder = "Quantità";
            cell3.appendChild(element2); 
  
        }  
  
        function deleteRow(tableID) {  
            try {  
            var table = document.getElementById(tableID);  
            var rowCount = table.rows.length;  
  
            for(var i=0; i<rowCount; i++) {  
                var row = table.rows[i];  
                var chkbox = row.cells[0].childNodes[0];  
                if(null != chkbox && true == chkbox.checked) {  
                    table.deleteRow(i);  
                    rowCount--;  
                    i--;  
                }  
  
            }  
            }catch(e) {  
                alert(e);  
            }  
        }  
  
    </SCRIPT>  
	</head>
<body>
<h1>Ordine</h1>
<form id="form1" name="form1" method="post" action="invio.php">
<INPUT type="button" value="Aggiungi una Riga" onclick="addRow('dataTable')" />  
  
    <INPUT type="button" value="Cancella una Riga" onclick="deleteRow('dataTable')" />  
  
<TABLE id="dataTable" width="350px" border="1">  
        <TR>  
            <TD><INPUT type="checkbox" name="chk"/></TD>  
            <TD> 1 </TD>  
            <TD> <INPUT type="text" name="cod" id="cod" placeholder="Codice prodotto"> </TD>  
            <TD> <INPUT type="text" name="des" id="des" placeholder="Descrizione"/> </TD> 
            <TD> <INPUT type="text" name="forma" id="for" placeholder="Formato"/> </TD> 
            <TD> <INPUT type="text" name="quant" id="quant" placeholder="Quantità"/> </TD>  
        </TR>  
    </TABLE>
      <input type="submit" name="Invia ordine" id="Invia ordine" value="Invia Ordine" />
    </form>
    <p>&nbsp;</p>
</body>
</html>

mentre il php è questo:

PHP:

<?php
$cod=$_POST[cod];
$des=$_POST[des];
$forma=$_POST[forma];
$quant=$_POST[quant];

$destinatario = "[email protected]";

$oggetto = "Ordine";

$messaggio = "Codice articolo: $cod\n";
$messaggio .= "Descrizione: $des\n";
$messaggio .= "Formato: $forma\n";
$messaggio .= "Quantità: $quant\n";

$da = $email;
$intestazione = "From: $da";

mail($destinatario,$oggetto,$messaggio,$intestazione);

	    
?>

Grazie mille

giuppyone · 14 Feb 2014

Forse è meglio questo:

HTML:

<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 oField=document.createElement("INPUT");
            var oFieldB=document.createElement("INPUT"); 
			var oFieldC=document.createElement("INPUT"); 
			var oFieldD=document.createElement("INPUT"); 
        var oButt=document.createElement("INPUT");

        // setta attributi
        oField.setAttribute("type","text");
        oField.setAttribute("name","codice[]");
		oField.setAttribute("value","");
		oField.setAttribute("placeholder","Codice prodotto");
                oFieldB.setAttribute("type","text");
                oFieldB.setAttribute("name","descizione[]");
				oFieldB.setAttribute("value","");
				oFieldB.setAttribute("placeholder","Descrizione");
				oFieldC.setAttribute("type","text");
                oFieldC.setAttribute("name","formato[]"); 
				oFieldC.setAttribute("value","");
				oFieldC.setAttribute("placeholder","Formato");
				oFieldD.setAttribute("type","text");
                oFieldD.setAttribute("name","quanti[]");
				oFieldD.setAttribute("value",""); 
				oFieldD.setAttribute("placeholder","Quantita'");
        oButt.setAttribute("type","button");
        oButt.setAttribute("value","rimuovi");

        // 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);
            oTd1.appendChild(oFieldB); 
			oTd1.appendChild(oFieldC);
			oTd1.appendChild(oFieldD);
        oTd2.appendChild(oButt);
        oTr.appendChild(oTd1);
        oTr.appendChild(oTd2);
        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);
    }
}
//-->
</script>
</head>
<body>
<form name="modulo" action="invio.php" method="post">
<input type="button" value="Aggiungi riga" onclick="accoda()" />
<table border="1" id="tabella">
<tbody>
<tr>
<td>

<input type="text" name="codice[]" value=""  placeholder="Codice prodotto"/>
<input type="text" name="descrizione[]" value="" placeholder="Descrizione"/> 
<input type="text" name="formato[]" value="" placeholder="Formato"/> 
<input type="text" name="quanti[]" value="" placeholder="Quantita'"/> 
</td><td>
<input type="button" disabled="disabled" value="rimuovi" />
</td>
</tr>
</tbody>
</table>


<input type="submit" name="Submit" value="Invia Ordine"></p>
</form>

</body>
</html>

Longo8 · 17 Feb 2014

Il problema è solo 'inviare una mail con i dati del form'?
Basta fare il submit del form e nella pagina 'di arrivo' prendi i dati dalla variabile $_POST (se usi il metodo post) e invii una mail tramite php_mailer o tramite swift_mailer o roba simile.

giuppyone · 17 Feb 2014

No Longo8, il problema è che aggiungendo le righe creo un numero indefinito di "name", dal quale prendo l'informazione de inviare via mail. Come recupero questi "infiniti" dati con un codice php?

Cerca

Cerca

Form con aggiunta righe

giuppyone

Nuovo Utente

giuppyone

Nuovo Utente

Longo8

Utente Attivo

giuppyone

Nuovo Utente

Discussioni simili