Form új sor beszúrása!

cszlak · 2014. Jan. 29. (Sze), 21.58

Sziasztok.

Az lenne a problémám, hogy egy ártábla formot csináltam, sikerült gomb nyomársa új sort beszúrnom, de nem tudom hogy kellene neki megadni a name="" értéket Javascripptel, hogy el tudjam menteni php-val adatbázisba.

Kód:

<html>
<head>
<?php
if(isset($_POST)){
echo '<p style="font-size:16px; color:#000;">'; print_r($_POST); echo "</p>";
}
?>
<script type="text/javascript">
function insertRow(tableID,form_id) {
var tabla = document.getElementById(tableID);
var utolsosor = document.getElementById(tableID).lastChild;
var szam = 0;
var inputs = document.getElementsByTagName("input");
for (var i=0; i < inputs.length; i++)
{
if (inputs[i].getAttribute('type') == 'text')
{
szamszam = szam+1;
}
}
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var text1 = document.createTextNode('');
var text2 = document.createTextNode('');
var id_szam = utolsosor; var szam = utolsosor + 1;
td1.appendChild(text1);
td2.appendChild(text2);
szamszam = szam+1;
td1.innerHTML = '<input type="text" value="name" name ="name' + szam + '" />';
szamszam = szam+1;
td2.innerHTML = '<input type="text" value="price" name ="price' + szam + '" />';
tr.appendChild(td1);
tr.appendChild(td2);
tabla.insertBefore(tr,utolsosor);
}
</script>
</head>
<body>
<input type="button" onclick="insertRow('tableToModify','form_id')" value="Create Row" />
<form action="" method="post" id="form_id">
<table id="tableToModify">
<tbody >
<tr id="rowToClone">
<td><input type="text" id="1" value="text" name ="name0"/></td>
<td><input type="text" id="1" value="price" name ="price0"/></td>
</tr>
</tbody>
</table>
<input type="submit" value="Mentes" />
</form>
</body></html>


<html>
<head>
<?php 
if(isset($_POST)){
	echo '<p style="font-size:16px; color:#000;">'; print_r($_POST); echo "</p>";
	}
?>
	<script type="text/javascript">
		function insertRow(tableID,form_id) {
        var tabla = document.getElementById(tableID);
        var utolsosor = document.getElementById(tableID).lastChild;
		var szam = 0;
		var inputs = document.getElementsByTagName("input");
for (var i=0; i < inputs.length; i++)
{ 
   if (inputs[i].getAttribute('type') == 'text')
   {
	  szam = szam+1;
   }
}
        var tr = document.createElement('tr');   
        var td1 = document.createElement('td');
        var td2 = document.createElement('td');
        var text1 = document.createTextNode('');
        var text2 = document.createTextNode(''); 
        var id_szam = utolsosor; var szam = utolsosor + 1;
        td1.appendChild(text1);
        td2.appendChild(text2);
		szam = szam+1;
		td1.innerHTML = '<input type="text"   value="name"  name ="name' + szam + '" />';
		szam = szam+1; 
		td2.innerHTML = '<input type="text"   value="price" name ="price' + szam + '" />'; 
        tr.appendChild(td1);
        tr.appendChild(td2);
        tabla.insertBefore(tr,utolsosor);
        }
	</script>
</head>
<body>
	<input type="button" onclick="insertRow('tableToModify','form_id')" value="Create Row" />
    <form action="" method="post" id="form_id">
	<table id="tableToModify">
		<tbody >
			<tr id="rowToClone">
            <td><input type="text" id="1"  value="text" name ="name0"/></td>
            <td><input type="text" id="1"  value="price" name ="price0"/></td>
            </tr>
		</tbody>
	</table>
    <input type="submit"  value="Mentes" />
    </form>
</body></html>

A print_r($_POST) :

Array ( [name0] => text [price0] => price [name] => Array ( [object Text] => name ) [price] => Array ( [object Text] => price ) )

A name értéket így akartam: name0, name1, name2 ...
A price értéket meg ugyanagy: price0, price1, price2 ....

■

HTML, CSS, JavaScript, Ajax

csirip

Tördeld újra

Poetro · 2014. Jan. 29. (Sze), 22.37

Szerintem először tördeld újra a kódot, mert nem látom hogy hol kezdődnek a függvények, a ciklusok, hol vannak deklarálva a változók.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

ID attribútum nem kezdődhet számmal

pkadam · 2014. Jan. 30. (Cs), 07.48

Figyelj arra, hogy a HTML specifikáció szerint az ID attribútum nem kezdődhet számmal, és egyedinek kell lennie. A mellékelt kódrészletben mindkettőt megszeged.

Ha könnyedén szeretnéd a POST változókat feldolgozni, adhatsz nekik tömbszerű neveket (name attribútumokat), így tudsz rájuk szerveroldalon is ekként hivatkozni (vagy épp iterálni egy ciklusban). Például name="elem[0]['name']" és name="elem[0]['price']". Hátha hasznos.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

index nélkül []

szabo.b.gabor · 2014. Jan. 30. (Cs), 09.29

használd így

<table id="tableToModify">
<tbody >
<tr id="rowToClone">
<td><input type="text" id="1" value="text" name ="name[]"/></td>
<td><input type="text" id="1" value="price" name ="price[]"/></td>
</tr>
</tbody>
</table>

    <table id="tableToModify">  
        <tbody >  
            <tr id="rowToClone">  
            <td><input type="text" id="1"  value="text" name ="name[]"/></td>  
            <td><input type="text" id="1"  value="price" name ="price[]"/></td>  
            </tr>  
        </tbody>  
    </table>

ebből másolhatsz akármennyit, nem fognak összeakadni és szerver oldalon lesz két darab tömböd.

id és egyéb dolgokra tényleg oda kellene figyelni..

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Tökéletes, köszi.

cszlak · 2014. Jan. 30. (Cs), 18.37

Igazatok van, annyit kavartam hogy elfelejtettem a szabályokat.
A legegyszerűbb meg nem jutott az eszembe.

Még egyszer köszi mindenkinek.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés