[JS]Items toevoegen/verwijderen zonder refresh - Softwareontwikkeling

donderdag 16 februari 2006 12:48

Acties:

Topicstarter

Ik ben op dit moment bezig om een dynamisch formulier in elkaar te zetten.
Met dynamisch bedoel ik dat de gebruiker de mogelijkheid krijgt om meer of minder inputfields te krijgen wanneer nodig is.

nu heb ik een mooi scriptje die dit kan:

code:

<html> 
<head> 
<title></title> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
var aantal=0; 
var line = '<select name="WBDGroupBy[]" class="pulldownIE" style="width:200"><OPTION value="">Field1</OPTION><OPTION value="">Field2</OPTION></select><br />'; 
function add(newdiv) 
{ 
  var thisNew = document.getElementById(newdiv); 
  var msg = ""; 
  aantal++; 
  for(i=0;i<aantal;i++) 
  { 
    msg+=line; 
  } 
  thisNew.innerHTML = msg; 
} 
function remove(newdiv) 
{ 
  var thisNew = document.getElementById(newdiv); 
  var msg = ""; 
  aantal = aantal==0?0:aantal-1; 
  for(i=0;i<aantal;i++) 
  { 
    msg+=line; 
  } 
  thisNew.innerHTML = msg; 
} 
//-->
</script> 
</head> 

<body> 

<a href="javascript:add('new');">Add</a> -- <a href="javascript:remove('new');">Remove</a> 

<div id="new"> 
</div> 

</body> 
</html>

Voorbeeld --> klik

Alleen dit script heeft nadelen:

Het werkt helemaal perfect. Alleen het nadeel van dit scriptje is dat alle waarden verdwijnen wanneer je iets toevoegt/verwijderd

bijv.
combo 1
combo 2
combo 3

ik wijzig combo 2 en voeg daarna nog een 4e combo erbij... dan verdwijnt de waarde in combo 2...

Is er een andere mogelijkheid om comboboxes / textboxes toe te voegen of te verwijderen zonder dat de waardes verloren gaan?

donderdag 16 februari 2006 12:52

Acties:

Sappie

De Parasitaire Capaciteit!

Bijvoorbeeld niet met innerHTML werken maar met DOM scripting om elementen toe te voegen, dan wel te verwijderen. Je overschrijft nu telkens de innerhtml van de div helemaal.. enja dan zijn de selectboxes weer leeg.

Specs | Audioscrobbler

donderdag 16 februari 2006 14:12

Acties:

wizzkizz

smile...tomorrow will be worse

Wat Sappie zegt, je kunt met de DOM functie Element.appendChild( Element ) zo een nieuwe combobox of whatever toevoegen aan je divje, lijkt me een stuk makkelijker

Make it idiot proof and someone will make a better idiot.
Real programmers don't document. If it was hard to write, it should be hard to understand.

dinsdag 21 februari 2006 11:00

Acties:

FunnyDealer

Topicstarter

Ik heb me even flink verdiept in DOM en met appendChild() en removeChild() kan je inderdaad hetzelfde. Met die info heb ik dit script gemaakt:

code:

<html>
    <head>
        <title> Testpagina </title>

        <script type="text/javascript">
                    
            function insertRow()
            {
                var para = document.getElementById("hold");

        var newtextbox1 = document.createElement("input")
        newtextbox1.setAttribute('type', 'text');
        newtextbox1.setAttribute('name', 'vak1');

        var newselectbox1 = document.createElement("input")
        newselectbox1.setAttribute('type', 'checkbox');
        newselectbox1.setAttribute('name', 'vak2');

        var newbrake1 = document.createElement("br")

                para.appendChild(newtextbox1);
        para.appendChild(newselectbox1);
        para.appendChild(newbrake1);

            }

            function removeRow()
            {
                
                var para = document.getElementById("hold");
                var child = para.lastChild; 
                if(para.lastChild)
                    para.removeChild(child);
                else
                    window.alert("No childs!");
            }

        </script>
    </head>
    
    <body id="body">
    
        <div id="hold"></div>
        
        <a href="Javascript: insertRow();">add!</a> | 
        <a href="Javascript: removeRow();">remove!</a>
    </body>
</html>

Voorbeeld

Toevoegen van een rij gaat nu perfect, alleen verwijderen gaat niet zoals ik het graag wil hebben.
Hoe kan ik ervoor zorgen dat een hele rij wordt verwijderd?

[ Voor 14% gewijzigd door FunnyDealer op 21-02-2006 11:04 ]

dinsdag 21 februari 2006 11:05

Acties:

André

Analytics dude

Je kunt de referenties naar aangemaakte objecten opslaan in een array. Op die manier kun je heel makkelijk de laatste 3 elementen ook weer verwijderen

Je haalt nu alleen het laatste element weg

en dat werkt wel, want als je vaker klikt verwdwijnen de elementen 1 voor 1.

[ Voor 17% gewijzigd door André op 21-02-2006 11:05 ]

dinsdag 21 februari 2006 11:05

Acties:

BtM909

Watch out Guys...

Het werkt wel, maar je hebt meer elementen dan alleen degene die je toevoegt (waarschijnlijk whitespaces e.d.). Makkelijkste is om je formelementen te grouperen (bijvoorbeeld met fieldset) zodat je dat element in 1 keer kan weghalen

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 21 februari 2006 11:41

Acties:

FunnyDealer

Topicstarter

BtM909 schreef op dinsdag 21 februari 2006 @ 11:05:
Het werkt wel, maar je hebt meer elementen dan alleen degene die je toevoegt (waarschijnlijk whitespaces e.d.). Makkelijkste is om je formelementen te grouperen (bijvoorbeeld met fieldset) zodat je dat element in 1 keer kan weghalen

Dat klinkt logisch.. maar ik weet niet hoe ik dat moet implementeren.
Hoe krijg je newtextbox1, newselectbox1 & newbrake1 in een fieldset

(sorry.. zit nog niet zo lang op java/dom scripting

)

dinsdag 21 februari 2006 11:43

Acties:

BtM909

Watch out Guys...

2 opties dus, of in een array bijhouden of een fieldset element aanmaken en de items daarin plaatsen

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 21 februari 2006 11:53

Acties:

wizzkizz

smile...tomorrow will be worse

FunnyDealer schreef op dinsdag 21 februari 2006 @ 11:41:
[...]

Dat klinkt logisch.. maar ik weet niet hoe ik dat moet implementeren.
Hoe krijg je newtextbox1, newselectbox1 & newbrake1 in een fieldset

(sorry.. zit nog niet zo lang op java/dom scripting )

op eenzelfde manier als je nu je elementen toevoegd, maar met dat verschil dat je eerst een fieldset aanmaakt (var fieldset = document.createElement( "fieldset" )) en de inputs dan kind maakt van je fieldset met fieldset.appendChild( referenceToInput ). Dan je fieldset aan je document toevoegen et voila.

bij het verwijderen kun je dan je fieldset verwijderen ipv je inputs en dan zijn ze alledrie weg

Make it idiot proof and someone will make a better idiot.
Real programmers don't document. If it was hard to write, it should be hard to understand.

dinsdag 21 februari 2006 12:40

Acties:

cyberstalker

Eersteklas beunhaas

Als ik goed kijk voeg je drie nieuwe elementen toe voor een nieuwe rij. Waarom haal je dan niet bij verwijderen gewoon drie keer het laatste element weg?

Ik ontken het bestaan van IE.

dinsdag 21 februari 2006 13:40

Acties:

FunnyDealer

Topicstarter

Ik heb voor de fieldset methode gekozen, bedankt voor de uitleg wizzkizz

Code nu:

code:

<html>
    <head>
        <title> Testpagina </title>

        <script type="text/javascript">
                    
            function insertrow()
            {
                var para = document.getElementById("hold");

        var newfieldset1 = document.createElement("fieldset")

        var newtextbox1 = document.createElement("input")
        newtextbox1.setAttribute('type', 'text');
        newtextbox1.setAttribute('name', 'vak1');
        newfieldset1.appendChild(newtextbox1)

        var newselectbox1 = document.createElement("input")
        newselectbox1.setAttribute('type', 'checkbox');
        newselectbox1.setAttribute('name', 'vak2');
        newfieldset1.appendChild(newselectbox1)
        
        para.appendChild(newfieldset1);
     
            }

            function removeCrap()
            {
                
                var para = document.getElementById("hold");
                var child = para.lastChild; 
                if(para.lastChild)
                    para.removeChild(child);
                else
                    window.alert("No childs!");
            }

        </script>
    </head>
    
    <body id="body">
    
        <div id="hold"></div>
        
        <a href="Javascript: insertrow();">add!</a> | 
        <a href="Javascript: removeCrap();">remove!</a>
    </body>
</html>

Alles wordt nu netjes per rij toegevoegt en verwijderd
1 ding waar ik me nu aan erger is de border van de fieldset
ik kan die bij een normale fieldset uitzetten met style="border:0"
maar hoe dat moet als element eigenschap, krijg ik niet voor elkaar

hier zijn ze ook met opmaak bezig... maar ik kan dit er niet in krijgen

dinsdag 21 februari 2006 13:45

Acties:

Sappie

De Parasitaire Capaciteit!

Je kunt gewoon gebruik maken van CSS om het een en ander goed op te maken. Ik zie niet in wat dit voor problemen zou hebben. Maak je hier al gebruik van om je fieldset te stylen?

zo nee.. probeer eens iets als

Cascading Stylesheet:

1	#hold fieldset { border: 0; }

[ Voor 21% gewijzigd door Sappie op 21-02-2006 13:47 ]

Specs | Audioscrobbler

dinsdag 21 februari 2006 14:01

Acties:

FunnyDealer

Topicstarter

ow

ik was al veelste moeilijk bezig... Het werkt nu, thnks!

[ Voor 12% gewijzigd door FunnyDealer op 21-02-2006 14:01 ]

donderdag 23 februari 2006 12:45

Acties:

FunnyDealer

Topicstarter

Oke, ik dacht dat ik er was, maar helaas mag het niet zo wezen

Ik heb nu een probleem met de browsers. Ik wil de pagina submitten en met behulp van
een array alles uitlezen.

In IE werkt dat perfect. Alleen FF en Opera sturen de gegevens niet door

Ik pak dit stukje tekst:

code:

    // Generating extra fields        
    var para = document.getElementById("old");
    var newfieldset = document.createElement("fieldset");   

    var newtextbox = document.createElement("input")
    newtextbox.setAttribute("type","text");
    newtextbox.setAttribute("name","FilterValue[]");
    newfieldset.appendChild(newtextbox);
        
    para.appendChild(newfieldset);

FilterValue[] wordt netjes verwerkt in IE, maar bij de andere browsers blijft FilterValue[] leeg
(dit gebeurt niet alleen met input maar ook met select boxen enzo)

Heeft iemand hier een verklaring voor?

donderdag 23 februari 2006 13:05

Acties:

cyberstalker

Eersteklas beunhaas

Wat bedoel je precies met leegblijven? Je geeft geen initiële waarde op voor de tekstbox, dus het lijkt me vrij logisch dat deze leegblijft.

Ik ontken het bestaan van IE.

donderdag 23 februari 2006 13:36

Acties:

ygma!l

cyberstalker schreef op donderdag 23 februari 2006 @ 13:05:
Wat bedoel je precies met leegblijven? Je geeft geen initiële waarde op voor de tekstbox, dus het lijkt me vrij logisch dat deze leegblijft.

Ik denk dat de TS bedoeld, dat wanneer hij de input velden die aangemaakt zijn met het script vuld met waarden en vervolgens deze submit vanuit zijn form. Dat de waarden die hij vervolgens uitleest in PHP bijv. leeg zijn. Ik zou overigens zelf zo niet weten hoe dit komt.

donderdag 23 februari 2006 13:43

Acties:

FunnyDealer

Topicstarter

ygma!l schreef op donderdag 23 februari 2006 @ 13:36:
[...]

Ik denk dat de TS bedoeld, dat wanneer hij de input velden die aangemaakt zijn met het script vuld met waarden en vervolgens deze submit vanuit zijn form. Dat de waarden die hij vervolgens uitleest in PHP bijv. leeg zijn. Ik zou overigens zelf zo niet weten hoe dit komt.

juist... dat bedoel ik...

De textbox wordt automatisch gevult en/of ingevult door de gebruiker
Wanneer ik deze pagina submit, stuurt hij geen variabelen door in FF en Opera
terwijl in IE dit wel gebeurt.. dat maakt dit probleem zo raar.

(sorry voor de onduidelijkheid)

donderdag 23 februari 2006 14:13

Acties:

Sappie

De Parasitaire Capaciteit!

Ik kan me vaag herinneren dat het met setAttribute inderdaad niet lekker werkt.. als ik het me verder goed herinner werkt het wel goed als je dit attribuut op de 'ouderwetse' manier set. dus:

code:

1	newtextbox.name = "FilterValue[]";

Is allemaal al een tijd geleden en ik heb geen tijd om het ff te testen. Bovendien kan het waarschijnlijk met setAttribute net zo goed, maar hierover durf ik nix te zeggen atm.

edit: wellicht heeft cyberstalker ook wel gelijk.. moet echt ff diep graven

Kan me herinneren dat ik iets soortgelijks heb gebruikt om een x aantal files tegelijkertijd te uploaden. Bij dat formulier was het echter zo dat er reeds één file input _altijd_ bestond. De toegevoegde input elementen hadden als name allemaal dezelfde array name als die eerste file input.

[ Voor 45% gewijzigd door Sappie op 23-02-2006 14:25 ]

Specs | Audioscrobbler

donderdag 23 februari 2006 14:16

Acties:

cyberstalker

Eersteklas beunhaas

Ok, ik begrijp je probleem. Wat jij wilt, kan helemaal niet (helaas). Je kunt elementen visueel aan een formulier toevoegen, maar als het formulier al gerendered is, worden ze niet aan de lijst van te versturen elementen toegevoegd.

Er zijn uiteraard wel mogelijkheden om hier omheen te werken. Het makkelijkste is wanneer je een GET request gebruikt. Je doorloopt dan het hele form op zoek naar input elementen, en voegt de namen en waardes hiervan toe, en gebruik dan iets als window.location.href om hiernaartoe te browsen.

Als je liever POST gebruikt, wordt het natuurlijk al wat ingewikkelder. Ik weet niet zeker of het wel mogelijk is om een compleet formulier vanuit niets op te bouwen met DOM, en dat te versturen. Dat zou je allicht even kunnen proberen.

Edit: een compleet nieuw formulier opbouwen lijkt wel te werken. Een klein voorbeeldje vind je op http://www.xs4all.nl/~zeep10/GOT/test.xhtml

[ Voor 9% gewijzigd door cyberstalker op 23-02-2006 14:37 ]

Ik ontken het bestaan van IE.

dinsdag 28 februari 2006 09:44

Acties:

FunnyDealer

Topicstarter

Dankje cyberstalker

ik ben een heel eind gekomen, met het script wat ik nu heb kan ik nu submitten en nog steeds elementen toevoegen.
Alleen er is weer een "probleem"

het verwijderen van elementen gaat niet goed meer. Dit komt omdat een deel van het gecreeerde form buiten de functie staat. Maar goed, ik wil ook geen 10 forms hebben, dus die code moet er buiten blijven.

Wanneer je nu gaan verwijderen dan verwijderd ie alles in plaats van 1 rij, maar wanneer je weer eentje toevoegt staat alles + 1 nieuwe rij er weer

Nu maak ik nog gebruik van de verwijder button onderaan de pagina... maar mijn uiteinderlijke doel is dat achter elke regel een remove link komt die de desbetreffende elementen verwijderd ..

Heeft iemand een idee?

code:

<SCRIPT language="Javascript"> 

// Creating javascript array (Conditionarray) for combo "Conditions"
Conditionarray = new Array(6)
Conditionarray[0] = "="
Conditionarray[1] = "<>"
Conditionarray[2] = ">"
Conditionarray[3] = "<" 
Conditionarray[4] = ">=" 
Conditionarray[5] = "<=" 

// create form
    var testform = document.createElement('form');
    testform.setAttribute('method', 'post');
    testform.setAttribute('action', 'WB.WBDesigner.cls');

    var param = document.createElement('input');
    param.setAttribute('type', 'hidden');
    param.setAttribute('id', 'param1');
    param.setAttribute('name', 'WBDSAVEWB');
    param.setAttribute('value', '1');
    testform.appendChild(param);

 function WBDAdvinsertfield()
 {
    var para = document.getElementById("hold");
    

    var newcombo1 = document.createElement("select");
    newcombo1.setAttribute("name","FilterAndOr");
    newcombo1.className = "pulldownIE"; 
    var newoption1 = document.createElement("option");
    var newoption2 = document.createElement("option");
    var text1 = document.createTextNode("AND");
    var text2 = document.createTextNode("OR");
    newoption1.setAttribute("value",'AND');
    newoption2.setAttribute("value",'OR');
    newoption1.appendChild(text1);
    newoption2.appendChild(text2);
    newcombo1.appendChild(newoption1);
    newcombo1.appendChild(newoption2);
    testform.appendChild(newcombo1);
    
    var newcombo2 = document.createElement("select");
    newcombo2.setAttribute("name","FilterField");
    newcombo2.className = "pulldownIE";
    for (var index = 0; index < WBDFieldsID.length; index++)
    { 
        var newoption = document.createElement("option");
        var text = document.createTextNode(WBDFieldsID[index]); 
        newoption.setAttribute("value",WBDFieldsID[index]);
        newoption.appendChild(text);
        newcombo2.appendChild(newoption);
    }
    testform.appendChild(newcombo2);    
    
    var newcombo3 = document.createElement("select");
    newcombo3.setAttribute("name","FilterCondition");
    newcombo3.className = "pulldownIE";
    for (var index = 0; index < Conditionarray.length; index++)
    { 
        var newoption = document.createElement("option");
        var text = document.createTextNode(Conditionarray[index]);  
        newoption.setAttribute("value",Conditionarray[index]);
        newoption.appendChild(text);
        newcombo3.appendChild(newoption);
    }
    testform.appendChild(newcombo3);
    
    var textbox = document.createElement('input');
    textbox.setAttribute('type', 'text');
    textbox.setAttribute('name', 'FilterValue');
    textbox.setAttribute('value', '');
    testform.appendChild(textbox);
    
    var link = document.createElement("A");
    var linktext = document.createTextNode("Remove");
    link.setAttribute('href', 'javascript:this.parentNode.parentNode.removeChild(this.parentNode);')
    link.appendChild(linktext);
    testform.appendChild(link);
    
    var brake = document.createElement("br");
    testform.appendChild(brake);
                
    document.body.appendChild(testform);
    para.appendChild(testform);
    
  }
  

  
 function WBDSubmit()
 {   
    testform.submit();
 }


function WBDAdvremovefield(){
    // Removing extra fields           
    var para = document.getElementById("hold");
    var child = para.lastChild; 
    window.alert(child); 
    if(para.lastChild)
        para.removeChild(child);
    else
        window.alert("No childs!");
}
</SCRIPT>


<DIV id="hold">
</DIV>



<a href="Javascript: WBDAdvinsertfield();">++</a> | 
<a href="Javascript: WBDAdvremovefield();">--</a></A><BR><BR>

dinsdag 28 februari 2006 09:52

Acties:

crisp

Devver

Pixelated

Ik denk dat je testform moet clonen, daar je andere elementen aan toe moet voegen en die vervolgens moet appenden:

JavaScript:

var newform = testform.cloneNode(true);

// dingen toevoegen aan newform

para.appendChild(newform);

Intentionally left blank

dinsdag 28 februari 2006 11:03

Acties:

FunnyDealer

Topicstarter

crisp schreef op dinsdag 28 februari 2006 @ 09:52:
Ik denk dat je testform moet clonen, daar je andere elementen aan toe moet voegen en die vervolgens moet appenden:
JavaScript:
1
2
3
4
5
var newform = testform.cloneNode(true);

// dingen toevoegen aan newform

para.appendChild(newform);

ik heb wat dingen geprobeerd, maar het lukt me niet.

Is het de bedoeling dat dit stukje weer binnen in de functie komt?

code:

1
2
3

    var testform = document.createElement('form');
    testform.setAttribute('method', 'post');
    testform.setAttribute('action', 'WB.WBDesigner.cls');

en dat dan daaronder deze code komt?:

code:

1	var newform = testform.cloneNode(true);

of moet het anders?

[ Voor 6% gewijzigd door FunnyDealer op 28-02-2006 11:03 ]

dinsdag 28 februari 2006 11:40

Acties:

cyberstalker

Eersteklas beunhaas

Volgens mij doe je veel ingewikkelder dan nodig. Als je nu gewoon dat toevoegen en verwijderen doet zoals je het eerst deed (en het dus werkte), en alleen bij een submit het formulier kloont, en het gekloonde formulier submit.

Gewoon een addEventListener op het formulier doen (dat werkt niet in IE, maar daar ging het sowieso al goed zei jij), en daar een functie aanhangen die door alle <input> <select> etc loopt en dat in een nieuw formulier propt, en dat vervolgens submit.

Ik ontken het bestaan van IE.

dinsdag 28 februari 2006 14:14

Acties:

FunnyDealer

Topicstarter

Met het klonen bij het submitten kom ik al dicht in de buurt. De code die ik nu heb werkt in Opera
Alleen IE en FF willen niet meewerken

Ik heb het volgende gedaan:

ik heb weer fieldsets gemaakt voor het verwijderen per rij, dat werkt

code:

<SCRIPT language="Javascript"> 

// Creating javascript array (Conditionarray) for combo "Conditions"
Conditionarray = new Array(6)
Conditionarray[0] = "="
Conditionarray[1] = "<>"
Conditionarray[2] = ">"
Conditionarray[3] = "<" 
Conditionarray[4] = ">=" 
Conditionarray[5] = "<=" 

// create form
var testform = document.createElement('form');
testform.setAttribute('method', 'get');
testform.setAttribute('action', 'WB.WBDesigner.cls');

var param = document.createElement('input');
param.setAttribute('type', 'hidden');
param.setAttribute('id', 'param1');
param.setAttribute('name', 'WBDSAVEWB');
param.setAttribute('value', '1');
testform.appendChild(param);

 function WBDAdvinsertfield()
 {
    var para = document.getElementById("hold");
    var newfieldset1 = document.createElement("fieldset")

    var newcombo1 = document.createElement("select");
    newcombo1.setAttribute("name","FilterAndOr");
    newcombo1.className = "pulldownIE"; 
    var newoption1 = document.createElement("option");
    var newoption2 = document.createElement("option");
    var text1 = document.createTextNode("AND");
    var text2 = document.createTextNode("OR");
    newoption1.setAttribute("value",'AND');
    newoption2.setAttribute("value",'OR');
    newoption1.appendChild(text1);
    newoption2.appendChild(text2);
    newcombo1.appendChild(newoption1);
    newcombo1.appendChild(newoption2);
    newfieldset1.appendChild(newcombo1);
    
    var newcombo2 = document.createElement("select");
    newcombo2.setAttribute("name","FilterField");
    newcombo2.className = "pulldownIE";
    for (var index = 0; index < WBDFieldsID.length; index++)
    { 
        var newoption = document.createElement("option");
        var text = document.createTextNode(WBDFieldsID[index]); 
        newoption.setAttribute("value",WBDFieldsID[index]);
        newoption.appendChild(text);
        newcombo2.appendChild(newoption);
    }
    newfieldset1.appendChild(newcombo2);    
    
    var newcombo3 = document.createElement("select");
    newcombo3.setAttribute("name","FilterCondition");
    newcombo3.className = "pulldownIE";
    for (var index = 0; index < Conditionarray.length; index++)
    { 
        var newoption = document.createElement("option");
        var text = document.createTextNode(Conditionarray[index]);  
        newoption.setAttribute("value",Conditionarray[index]);
        newoption.appendChild(text);
        newcombo3.appendChild(newoption);
    }
    newfieldset1.appendChild(newcombo3);
    
    var textbox = document.createElement('input');
    textbox.setAttribute('type', 'text');
    textbox.setAttribute('name', 'FilterValue');
    textbox.setAttribute('value', '');
    newfieldset1.appendChild(textbox);
    
    var link = document.createElement("A");
    var linktext = document.createTextNode("Remove");
    link.setAttribute('href', 'javascript:this.parentNode.parentNode.removeChild(this.parentNode);')
    link.appendChild(linktext);
    newfieldset1.appendChild(link);
    
    var brake = document.createElement("br");
    newfieldset1.appendChild(brake);
                
    document.body.appendChild(testform);
    para.appendChild(newfieldset1);
    //testform.appendChild(newfieldset1)
    
  }

Maar goed.. het probleem ligt nu bij het submitten. In Opera gaat het submitten
perfect en kan ik post data opvangen.. bij IE en FF dus niet en crasht de pagina
Javascript console geeft daarbij deze informatie

Waarschuwing: Door ID/NAME in de globale scope gerefereerd element.
Gebruik in plaats daarvan volgens de W3C-standaard document.getElementById().

voor de submit het ik de volgende functie:

code:

 function WBDSubmit()
 {  
    var newform = testform.cloneNode(true);
    newform.appendChild(hold)
    newform.submit();
 }

en de remove werkt weer goed, mbv de fieldset

code:

function WBDAdvremovefield(){
    // Removing extra fields           
    var para = document.getElementById("hold");
    var child = para.lastChild; 
    window.alert(child); 
    if(para.lastChild)
        para.removeChild(child);
    else
        window.alert("No childs!");
}

Ik begin zo onderhand wel gek te worden van al die verschillende browser-eigenschappen

Heeft iemand mssn een oplossing voor IE en FF met deze code?

dinsdag 28 februari 2006 14:46

Acties:

Verwijderd

ik heb nog niet het hele topic gelezen, maar ik zou het doen met document.object.style.visible

Modbreak:Lees dan in het vervolg eerst het hele topic

[ Voor 28% gewijzigd door André op 28-02-2006 15:33 ]

dinsdag 28 februari 2006 15:16

Acties:

FunnyDealer

Topicstarter

lees eerst maar het topic voordat je wat zegt... hier kan ik helemaal nix mee

dinsdag 28 februari 2006 15:29

Acties:

cyberstalker

Eersteklas beunhaas

Ik zie je nergens de variabele hold definiëren. Ik zie je zelfs nergens een waarde opgeven voor deze variabele. Toch probeer je ernaar te refereren in je submit functie. Waarom?

Iets anders, je moet eigenlijk het geclonede form nog toevoegen aan je document, voordat je het mag submitten. Opera staat het wel toe zo, maar Fx bijvoorbeeld niet. Zie hiervoor ook mijn eerder gepost voorbeeld, dat werkt ook niet als je het form niet eerst toevoegt aan de body.

Edit: Die 'foutmelding' van jou is dus een waarschuwing, en duidelijk niet de reden dat je script crasht. Het crasht dus stilletjes vanwege het niet toevoegen van je geclonede formulier.

[ Voor 17% gewijzigd door cyberstalker op 28-02-2006 15:31 ]

Ik ontken het bestaan van IE.

dinsdag 28 februari 2006 16:01

Acties:

FunnyDealer

Topicstarter

woow, dank je wel $_/-\o_$

Het werkt helemaal

alle boxen e.d. verspringen wel bij de submit, maar dan kan ik eigenlijk niet wakker van liggen
Bedankt voor de hulp tot zover.. !!

Nu kan ik weer verder in een voor mij beter "bekende" programmeertaal

[ Voor 18% gewijzigd door FunnyDealer op 28-02-2006 16:03 ]