Javascript

[DarkSun84]

Salve, volevo sapere come si potevano mettere dei form html all'interno di celle di una tabella che mi creo con javascript. grazie.

[valse]

Salve, volevo sapere come si potevano mettere dei form html all'interno di celle di una tabella che mi creo con javascript. grazie.

Cerca di essere più chiaro... magari con lo scopo che devi raggiungere...

[DarkSun84]

tramite questo bottone:
<button onClick="addTestHttp()">http</button>
voglio aggiungere dinamicamente in una tabella html delle righe in cui in ogni cella avrà dei dati da inserire tramite dei form, ho trovato il seguente modo:

var numRow=-1;
mycurrent_row=new Array();

function addTestHttp(){
numRow++;
mycurrent_row[numRow] = document.createElement("tr");
for(var i = 0; i < 6; i++) {

if(i==0){
mycurrent_cell0= document.createElement("td");
mycurrent_cell0.innerHTML=numRow;
/ /appends the cell<td> into the row<tr> mycurrent_row[numRow].appendChild(mycurrent_cell0);
}



if(i==1){
mycurrent_cell1= document.createElement("td");
mycurrent_cell1.innerHTML="<SELECT name=list onchange=AddRow1(mycurrent_cell1,numRow)><option>www.esa.it</option><option>www.google.com</option><optionwww.nasa.gov</option><option>manual</option></SELECT>";
// appends the cell <td> into the row <tr>
mycurrent_row[numRow].appendChild(mycurrent_cell1);
}
}
}


function AddRow1(cell,num)
{
cell.innerHTML="<input type=text name=textField>";
alert(num);
}
Ho il seguente problema che non riesco a prendere i dati inseriti nel form della cella, tramite il php con la variabile $_POST[...] se qualcuno mi può aiutare.

[valse]

...mi manca un punto... io ho una tabella... aggiungo una riga o colonna con dentro un campo di testo via javascript e questo è ok... poi voglio mandare tramite submit della pagina il contenuto di tutte le righe/colone create giusto?

Io farei un unico form e quando creo dinamicamente la input textbox devo anche assegnargli un id (es. text_01, text_02) che richiamo in post nella pagina seguente...

...se così nn funzia vai di query string ;-)

[DarkSun84]

posto le modifiche fatte:

var numberRow=0;
tr= new Array();


function addHtmlTest() { ////// HTTP TEST //////

numberRow++;
tr[numberRow]=document.createElement('tr'); // - now create the tr and td elements
var td0=document.createElement('td');
var td1=document.createElement('td');
var td2=document.createElement('td');
var td3=document.createElement('td');
var td4=document.createElement('td');
var td5=document.createElement('td');

td0.style.textAlign='center'; td0.style.padding='3px';
td1.style.textAlign='center'; td1.style.padding='3px';
td2.style.textAlign='center'; td2.style.padding='3px';
td3.style.textAlign='center'; td3.style.padding='3px';
td4.style.textAlign='center'; td4.style.padding='3px';
td5.style.textAlign='center'; td5.style.padding='3px';



var tdText0=document.createTextNode('HTTP-test'+numberRow); // create the text that will go in the table cell

var address = document.createElement('select');

//select form address http

address.setAttribute("id","addressHttp");
//address.setAttribute("name","addressHttp");

//first option

//create an option

theOption=document.createElement("OPTION");

//make text

theText=document.createTextNode("www.esa.it");

//add the text to the option

theOption.setAttribute("value","http://www.esa.int/esaCP/Italy.html");

theOption.appendChild(theText);

//add the option to the select

address.appendChild(theOption);

//second option

theOption=document.createElement("OPTION");

theText=document.createTextNode("www.nasa.gov");

theOption.appendChild(theText);

theOption.setAttribute("value","www.nasa.gov");

address.appendChild(theOption);

//third option

theOption=document.createElement("OPTION");

theText=document.createTextNode("others");

theOption.appendChild(theText);

theOption.setAttribute("value","others");

address.appendChild(theOption);


var start= document.createElement('input');
start.setAttribute('type','text');
start.setAttribute('id','START');
start.setAttribute('name','start');
start.setAttribute('value','0');


var end= document.createElement('input');
end.setAttribute('type','text');
end.setAttribute('name','end');
end.setAttribute('value','5');




// source

td4.innerHTML="<select name=st><?php for($i=0;$i<$_SESSION['st'];$i++){for( $e=0;$e<$_SESSION["numberUser[$i]"];$e++ ){$t=$i+1;$u=$e+1;echo '<option>'."ST$t".'-'."UT$u".'</option>';}}?></select>";


// destionation


td5.innerHTML="<select name=st><?php for($i=0;$i<$_SESSION['st'];$i++){for( $e=0;$e<$_SESSION["numberUser[$i]"];$e++ ){$t=$i+1;$u=$e+1;echo '<option>'."ST$t".'-'."UT$u".'</option>';}}?></select>";



// - Now start building the table. It's like filling a big container with successively smaller ones, just in reverse

td0.appendChild(tdText0); // - put the text node in the table cell
td1.appendChild(address);
td2.appendChild(start);
td3.appendChild(end);

tr[numberRow].appendChild(td0); // - put the cell into the row
tr[numberRow].appendChild(td1);
tr[numberRow].appendChild(td2);
tr[numberRow].appendChild(td3);
tr[numberRow].appendChild(td4);
tr[numberRow].appendChild(td5);


tb.appendChild(tr[numberRow]); // - put the row into the tbody
t.appendChild(tb); // - put the tbody into the table
ourDiv.appendChild(t); // - put the table into the div
}


creazione dell'unico form come mi hai suggerito
create the form element and it's attributes
var f=document.createElement('form');
// f.setAttribute('name','myForm');
f.setAttribute('action','configTest.php');
//f.setAttribute('target','_blank');
f.setAttribute('method','post');
f.setAttribute("id","formTable");

creazione tabella iniziale:
var ourDiv=document.getElementById('tableTest');
var t=document.createElement('table'); // - start by creating the table element
f.appendChild(t);
var tb=document.createElement('tbody'); // - create a tbody element

// sets the border attribute of mytable to 2;
t.setAttribute("border","2");
t.setAttribute("width","100%");
t.setAttribute("cellspacing","2");
t.setAttribute("cellpadding","2");

var tr=document.createElement('tr'); // - now create the tr and td elements
var td0=document.createElement('td');
var td1=document.createElement('td');
var td2=document.createElement('td');
var td3=document.createElement('td');
var td4=document.createElement('td');
var td5=document.createElement('td');

td0.style.textAlign='center'; td0.style.padding='3px';
td1.style.textAlign='center'; td1.style.padding='3px';
td2.style.textAlign='center'; td2.style.padding='3px';
td3.style.textAlign='center'; td3.style.padding='3px';
td4.style.textAlign='center'; td4.style.padding='3px';
td5.style.textAlign='center'; td5.style.padding='3px';

var tdText0=document.createTextNode('Name-Test'); // - create the text that will go in the table cell
var tdText1=document.createTextNode('Details of test');
var tdText2=document.createTextNode('Start');
var tdText3=document.createTextNode('End');
var tdText4=document.createTextNode('Source');
var tdText5=document.createTextNode('Destination');


// - Now start building the table. It's like filling a big container with successively smaller ones, just in reverse

td0.appendChild(tdText0); // - put the text node in the table cell
td1.appendChild(tdText1);
td2.appendChild(tdText2);
td3.appendChild(tdText3);
td4.appendChild(tdText4);
td5.appendChild(tdText5);


tr.appendChild(td0); // - put the cell into the row
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);


tb.appendChild(tr); // - put the row into the tbody
t.appendChild(tb); // - put the tbody into the table
ourDiv.appendChild(t);



var b= document.createElement('input');
b.setAttribute('type','submit');
//b.setAttribute('name','start');
b.setAttribute('value','Save');
f.appendChild(b);
document.getElementById('formTest').appendChild(f);

parte del body:

<button onClick="addHtmlTest()">http</button>
Ho il problema che non riesco a far passare i valori che inserisco nel form tramite post nella variabili $_POST[...].