KoggenMedlem sedan juni 2002169 inlägg Hej allihop
Jag skulle behöva ett javascript att använda i ett formulär. Formuläret har X antal rader med fyra fält i var rad som upprepas enligt nedan.
ANTAL ARTNR BENÄMNING PRIS
Det skulle funka så att efter hand som man fyllde i fälten så visas en ny rad med fält längst ner, så att det alltid fanns en ny rad med tomma fält. T ex när man klickar in i första fältet på nedersta raden så visas en ny rad under.
Vet någon var jag kan hitta koden till ett sånt script?
Jag hoppas ni förstår hur jag menar.
Tack på förhand
<html>
<head>
<script>
function formElementAdder(tableid){
var table = document.getElementById(tableid);
var inputs = table.getElementsByTagName("INPUT");
var inputNames = ["antal","artnr","name","price"];
var checkAddFormElems=function(){
var emptyelems = 0;
var inputs = table.getElementsByTagName("INPUT");
for (var i=0; i<inputs.length; i++){
if (0==inputs[i].value.length)
emptyelems++;
}
if (emptyelems<5){
var lasttr = table.getElementsByTagName("TR");
var newid = parseInt(lasttr[lasttr.length-1].id.replace("row","")) + 1;
var newtr = document.createElement("TR");
newtr.id = "row" + newid;
for (var i=0; i<inputNames.length; i++){
var newtd = document.createElement("TD"),
newinput = document.createElement("INPUT");
newinput.onchange = checkAddFormElems;
newinput.title = newinput.id = inputNames[i] + newid;
newtd.appendChild(newinput);
newtr.appendChild(newtd);
}
table.appendChild(newtr);
}
}
for (var i=0; i<inputs.length; i++){
inputs[i].onchange = checkAddFormElems;
}
}
window.onload = function(){
new formElementAdder('productform');
}
</script>
</head>
<body>
<form>
<table id="productform">
<tr>
<td>ANTAL</td><td>ARTNR</td><td>BENÄMNING</td><td>PRIS</td>
</tr>
<tr id="row0">
<td><input name="antal0" /></td><td><input name="artnr0" /></td><td><input name="name0" /></td><td><input name="price0" /></td>
</tr>
<tr id="row1">
<td><input name="antal1" /></td><td><input name="artnr1" /></td><td><input name="name1" /></td><td><input name="price1" /></td>
</tr>
</table>
</form>
</body>
</html>
Vissa saker kan finputsas, men ungefär så kan koden se ut. Om du visar lite av din "riktiga" kod så kan jag göra en helt anpassad lösning.
KoggenMedlem sedan juni 2002169 inlägg Tack för hjälpen.
Jag kopierade in hela din kod i ett nytt dokument, men det fungerar inte.
Är det något jag missat att göra?
fungera för mig... kan du ladda upp din kod på nätet så kan man se vad som bli fel för dig.
KoggenMedlem sedan juni 2002169 inlägg Jag gjorde som jag skrev: klistrade in hela koden i ett nytt HTML-dokument, och för mig händer inget - vare sig vid testkörning lokalt eller på nätet.
<html>
<head>
<script>
function formElementAdder(tableid){
var table = document.getElementById(tableid);
var inputs = table.getElementsByTagName("INPUT");
var inputNames = ["antal","artnr","name","price"];
var checkAddFormElems=function(){
var emptyelems = 0;
var inputs = table.getElementsByTagName("INPUT");
for (var i=0; i<inputs.length; i++){
if (0==inputs[i].value.length)
emptyelems++;
}
if (emptyelems<5){
var lasttr = table.getElementsByTagName("TR");
var newid = parseInt(lasttr[lasttr.length-1].id.replace("row","")) + 1;
var newtr = document.createElement("TR");
newtr.id = "row" + newid;
for (var i=0; i<inputNames.length; i++){
var newtd = document.createElement("TD"),
newinput = document.createElement("INPUT");
newinput.onchange = checkAddFormElems;
newinput.title = newinput.id = inputNames[i] + newid;
newtd.appendChild(newinput);
newtr.appendChild(newtd);
}
lasttr[lasttr.length-1].parentNode.appendChild(newtr);
}
}
for (var i=0; i<inputs.length; i++){
inputs[i].onchange = checkAddFormElems;
}
}
window.onload = function(){
new formElementAdder('productform');
}
</script>
</head>
<body>
<form>
<table id="productform">
<tr>
<td>ANTAL</td><td>ARTNR</td><td>BENÄMNING</td><td>PRIS</td>
</tr>
<tr id="row0">
<td><input name="antal0" /></td><td><input name="artnr0" /></td><td><input name="name0" /></td><td><input name="price0" /></td>
</tr>
<tr id="row1">
<td><input name="antal1" /></td><td><input name="artnr1" /></td><td><input name="name1" /></td><td><input name="price1" /></td>
</tr>
</table>
</form>
</body>
</html>
Nu kanske?
Skriptet har dock fortfarande en liten bugg. Det räknar antalet tomma fält pch skapar en ny rad om det finns färre än 5 tomma fält. Dock innebär det att raderna inte kommer fyllas på efter behov om fältet för benämning är tomt i flera rader, då kravet att minst fyra fält måste vara tomma är uppfyllt by default.
Är detta ett problem?
KoggenMedlem sedan juni 2002169 inlägg Sorry för det sena svaret r/l kommer emellan ibland :-)
Nu funkar det för mig med. Tack nitro! Jag skall testa och fundera på om den lilla buggen kommer att bli något problem. Man skulle ju t ex automatisk kunna lägga in ett streck i benämningsfältet om art.nr är ifyllt - om jag fattade dig rätt. Det är hur som helst bra att slippa tomma fält i databasen det sparas i. Tack igen!
SlanterMedlem sedan juni 20091 inlägg Har samma fråga och har fått denna att fungera. Tack! :-)
Men jag skulle vilja ha olika storlek på de olika fälten. Hur löser man det??
Tack!
HåkanDMedlem sedan sep. 20101 inlägg Hej, Tack för scriptet! E ganska ny på att försöka få ihop scrip.
Så jag har ett litet problem med att jag har 2 vanliga textfields och 2 Select listor i det formulär jag önskar få en ny rad i. Är det någon som vet om det går att lösa.... Som det ser ut nu så kommer 4 textfields upp istället för 2 textfields o 2 selectlistor. Tacksam för all hjälp jag kan få.
Tack på förhand
