WastedMedlem sedan okt. 20067 inlägg Hej,
Jag skulle behöva lite hjälp med ett formulär som jag håller på att bygga. Så här är tanken att slutprodukten ska se ut:
http://img269.imageshack.us/img269/5268/pictureli.jpg
Jag tror ni förstår hur scriptet är tänkt att fungera, när man trycker på "Add person" så läggs dyker en ny textinput upp och samma sak med "Add children". Här är koden:
<html>
<head>
<script language="javascript">
var counter = 0;
var person1counter = 0;
var person2counter = 0;
var person3counter = 0;
function addperson() {
counter++;
document.getElementById('divq').innerHTML += "Person: " + counter + " <br><input type='text' name='q" + counter + "' value='' /> <br><div id='divaq" + counter + "'></div><input type='button' onclick='addchild" + counter + "()' value='Add child'> <br><br>";
}
function addchild1() {
person1counter++;
document.getElementById('divaq1').innerHTML += "Child: " + person1counter + " <input type='text' name='q1alt" + person1counter + "'><br>";
}
function addchild2() {
person2counter++;
document.getElementById('divaq2').innerHTML += "Child: " + person2counter + " <input type='text' name='q2alt" + person2counter + "'><br>";
}
function addchild3() {
person3counter++;
document.getElementById('divaq3').innerHTML += "Child: " + person3counter + " <input type='text' name='q3alt" + person3counter + "'><br>";
}
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="addperson()" value="Add person" />
</form>
<div id="divq">
</div>
</body>
</html>
Det jag behöver hjälp med är följande:
1. När jag lägger till en ny person så resetas/töms informationen som jag har knappat in i dom tidigare inputsen. Hur ska jag göra för att förhindra det?
2. Hur ska jag göra för att radera senast tillagda input?
Kan tillägga att jag är nybörjare på Javascript.
/Wasted
WastedMedlem sedan okt. 20067 inlägg Problem nummer 2 är nu löst. Däremot så har jag inte en aning om hur jag ska lyckas lösa det första. Någon som har några idéer?
The_HulkMedlem sedan juni 20031 837 inlägg Det beror nog på att du skriver om html-koden för fälten när du gör
document.getElementById('divq').innerHTML += .....
WastedMedlem sedan okt. 20067 inlägg
The_Hulk skrev:
Det beror nog på att du skriver om html-koden för fälten när du gör
document.getElementById('divq').innerHTML += .....
Okej, kan jag undvika det på något sätt eller måste jag börja om från början och göra på något helt annat sätt? :(
The_HulkMedlem sedan juni 20031 837 inlägg Du får skapa html-elementen dynamiskt med hjälp av document.createElement och sedan lägga till dem på rätt ställe med obj.appendChild(newObj)
du kan läsa lite mer om det här: http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/
<html>
<head>
<script language="javascript">
var counter = 0;
function format(str) {
for(i = 1; i < arguments.length; i++) {
var n = new RegExp("\\{" + (i-1) + "\\}","img");
str = str.replace(n, arguments[i]);
}
return str;
}
function addperson() {
counter++;
var Design = "<label for='q{0}'>Person #{0}:</label><input type='text' name='q{0}' id='q{0}' /><div id='child_q_{0}'></div><input type='button' onclick='addchild(this)' value='Add child' />";
var childElement = document.createElement("div");
childElement.id = "q_"+counter;
childElement.innerHTML = format(Design, counter);
document.getElementById('divq').appendChild(childElement);
}
function addchild(el) {
var childDesign = "Child: {0} <input type='text' name='{1}_alt_{0}'>";
var div = el.parentNode;
var childDiv = document.getElementById("child_" + div.id);
var childElement = document.createElement("div");
var length = childDiv.children.length+1;
childElement.id = "item_" + (+childDiv.children.length)+1;
childElement.innerHTML = format(childDesign, length, div.id);
childDiv.appendChild(childElement);
}
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="addperson()" value="Add person" />
<div id="divq"></div>
</form>
</body>
</html>
Eller så skriver du det med jquery.
The_HulkMedlem sedan juni 20031 837 inlägg
voigtann1 skrev:
Eller så skriver du det med jquery.
Vad är det för skillnad mot mitt svar förutom att du orkade skriva hela lösningen?
The_Hulk skrev:
Vad är det för skillnad mot mitt svar förutom att du orkade skriva hela lösningen?
absolut inget, jag har suttit på lunchen och gjorde detta, sen att jag inte uppdaterat sidan är en bara en lathet av mig.
Dock med jquery så kan slipper du appendChild() metoderna då de inte är de snabbaste att jobba mot DOM:en på en del webbläsare.
The_HulkMedlem sedan juni 20031 837 inlägg Ahh, trodde du menade att ditt exempel var skrivet med jQuery men nu förstår jag hur du menade. Det var därför jag inte riktigt fick ihop det :)
hehe, nej jquery koden hade nog varit ännu mindre (min kod är ett snabbt exempel) men den fungera på ett ungefär och har inga begränsningar på hur många "parents" som kommer i formuläret.
WastedMedlem sedan okt. 20067 inlägg Tack så mycket för hjälpen, fungerar alldeles utmärkt! :)
Jag förstår dock inte riktigt hur koden fungerar (jag är nybörjare på JavaScript), framförallt inte första delen och alla {0}:
function format(str) {
for(i = 1; i < arguments.length; i++) {
var n = new RegExp("\\{" + (i-1) + "\\}","img");
str = str.replace(n, arguments[i]);
}
return str;
}
Jag antar att det är någon form av räknare?
str = format("Hej {0}! Välkommen till {1}", "Wasted", "webForum");
str kommer då bli: "Hej Wasted! Välkommen till webForum"
Det är bara en funktion för att enklare kunna skriva texter utan att bryta strängen för att infoga texter.
WastedMedlem sedan okt. 20067 inlägg Okej, tack!
Jag har ytterligare en fråga (förhoppningsvis den sista... ;)), jag skulle under varje person vilja lägga till en knapp som tar bort senast tillagda barn. Jag har lagt till en knapp som tar bort senast tillagda person med följande kod:
function removePerson() {
var r = document.getElementById("q_" + counter + "");
r.parentNode.removeChild(r);
counter--;
}
Jag plockar alltså bort hela "person-div:en" eller vad man ska kalla den. Med barnen så är jag inte alls lika säker på hur jag ska gå tillväga. Några idéer? :)
