Element verwijderen zonder zijn content

[ZeroXT]

Beste tweakers,

code:

<form action="" method="post">
    <input type="text" name="naam" />
</form>

Hoe zorg ik ervoor dat ik met JavaScript de form tag compleet weghaal en dat alleen de input overblijft.
Met de functie remove van javascript haal ik de content ook weg uit de form.

Nu kan ik een loop maken en alle elementen in een variable stoppen en die later weer terugzetten maar dit leek mij niet de beste oplossing omdat er bijvoorbeeld al tekst in de input is gezet die dan niet word opgeslagen. Ook leek het mij niet de beste oplossing omdat de content behoorlijk groot is in mijn form en om dat nu allemaal in één variable te stoppen leek mij een beetje te.

Dus mijn vraag: hoe kan ik dit beter aanpakken?

[Niemand_Anders]

???

Je bent bekend dat input elementen in een form moeten staan volgens de HTML specificaties? Waarom zou je uberhaupt het form element willen verwijderen. Je zou een div element aan de parent van het form kunnen toevoegen en vervolgens de children van het form kunnen toewijzen aan de nieuwe div.

Maar ik ben erg benieuwd waarom je dit zou willen..

[crisp]

Niemand_Anders schreef op vrijdag 23 april 2010 @ 12:18:
???

Je bent bekend dat input elementen in een form moeten staan volgens de HTML specificaties?

Da's niet waar...

Maar ik ben erg benieuwd waarom je dit zou willen..

Dat ben ik echter ook

Technisch kan het overigens wel: maak een documentFragment object, stop daar alle children van je element in en vervang dat element vervolgens door je fragment

[Bosmonster]

In Jquery heb je daar unwrap voor.

Niet dat ik dat ooit gebruikt heb, maar het kan

[ZeroXT]

De reden dat ik dit wil is dat ik een 'ajax' file upload maak en ik meedere bestanden wil uploaden in dezelfde form. Maar omdat je al kan beginnen met uploaden voordat je de volgende bestand in een andere input heb geselecteerd moet er dus een tijdelijke form om de input komen:

code:

<form action="" method="post">
    <input type="file" name="naam" />
    <input type="file" name="naam2" />
</form>

Op moment dat je op de tweede input klikt moet het er zo uit komen te zien:

code:

<input type="file" name="naam" />
<form action="" method="post" target="frame">
    <input type="file" name="naam2" />
    <iframe name="frame"></iframe>
</form>

Dit omdat een form in een form niet mag.


Zou je een voorbeeldje kunnen geven wat je bedoeld met:
'Je zou een div element aan de parent van het form kunnen toevoegen en vervolgens de children van het form kunnen toewijzen aan de nieuwe div'

Overigens gebruik ik geen JQuery.

[ Voor 30% gewijzigd door ZeroXT op 23-04-2010 12:40 ]

[storeman]

code:

var sourceForm = document.body.getElementById('myForm');
var formContent = sourceForm.innerHTML;

// Eerst leegmaken en dan vullen ivm id's
sourceForm.innerHTML = '';
myTempForm.innerHTML = formContent

[ Voor 24% gewijzigd door storeman op 23-04-2010 12:36 ]

[crisp]

Doe dat nou niet met innerHTML want daarmee reset je de formelementen juist...

[ZeroXT]

@Crisp:
Zoals ik op internet lees is documentFragment voor het toevoegen van elementen aan een bestaande element. Ik moet juist een element zonder content verwijderen.

@Storeman:
Ik maak geen gebruik van innerHTML. Overigens is dit ong. de oplossing die ik probeerde te ontwijken zoals je in de eerste post kan lezen

[RobIII]

ZeroXT schreef op vrijdag 23 april 2010 @ 12:40:
@Crisp:
Zoals ik op internet lees is documentFragment voor het toevoegen van elementen aan een bestaande element. Ik moet juist een element zonder content verwijderen.

Dan moet je crisp's reactie nog eens goed lezen

crisp schreef op vrijdag 23 april 2010 @ 12:28:
Technisch kan het overigens wel: maak een documentFragment object, stop daar alle children van je element in en vervang dat element vervolgens door je fragment

[ Voor 29% gewijzigd door RobIII op 23-04-2010 12:45 ]

[Noxious]

Kun je het niet in een divje hangen en die display: none; doen?

[ZeroXT]

Hmm maar die <form> maak ik niet met javascript.

code:

<form action="" method="post" enctype="multipart/form-data" id="upload_form">
    <label for="bestand0">Bestand 1:</label><input type="file" id="bestand0" name="bestand0" />
    <label for="tekst">Tekst:</label><input type="text" id="tekst" name="tekst" />
    <label for="bestand1">Bestand 2:</label><input type="file" id="bestand1" name="bestand1" />
    <input type="submit" value="Opslaan" />
</form>

Vervolgens loop ik door de form heen opzoek naar alle input types die de attribuut file hebben. Die geef ik een onchange mee dat wanneer er een bestand word geselecteerd er een form tag om die input komt te staan. En vervolgens moet ik de huidige form tijdelijk verwijderen.

Hoe kan ik dit oplossen met een documentFragment object of anders?

[MueR]

Wat heb je ondertussen gedaan met de tips die je krijgt dan? Wat lukt er niet aan? We gaan namelijk geen kant en klare code voor je schrijven.

[ZeroXT]

Dat verwacht ik ook niet MueR. Ik heb natuurlijk zelf een hoop op internet proberen op te zoeken en nu vooral met betrekking tot documentFragment. Maar zie ik helaas niet in hoe ik een element kan verwijderen zonder zijn content dat niet is gemaakt door javascript.

[moozzuzz]

innerHTML = broncode kopieren = niet jouw oplossing
documentfragment = dom kopieren = wel jouw oplossing. Je kopieert dus al je gewenste inputs (~children van form) naar een nieuw element (vb div of whatever) en vervangt dan het formelement door het nieuwe element. Of wat crisp zei dus We gaan er hier van uit dat je al van DOM elementen hebt gehoord natuurlijk.

[ZeroXT]

Dus moet ik alsnog alles kopiëren en in één variabel zetten?

[storeman]

Wat is het probleem van alles in één variabele zetten. Je moet het vrij gek maken wil je tegen die grens aanlopen. Na de actie je var even unsetten, en het lijkt me geen probleem.

Ik kan wel een andere oplossing aandragen, met MooTools. Ik gebruik het vaak zoals jij dat nu ook doet:

code:

var myForm = $('orignalForm');

var targetEl = $('myTarget');

myForm.getElements().each(function(el){
   targetEl.grab( el );
});

[ZeroXT]

En heb je ook een voorbeeld zonder libary? Dit was mijn poging:

code:

document.getElementById('test').appendChild(this.form.childNodes);

Maar hiermee krijg ik de raarste error in firebug.

[moozzuzz]

JavaScript:

var contentframe = document.createElement('div');
var form = document.getElementById( 'uploadform' );
var inputs2move = form.childNodes();
contentframe.appendChild(inputs2move);
}

[ZeroXT]

form.childNodes() is not a function krijg ik als error te zien met jouw code moozzuzz.

code:

var test = document.createElement('div');

for (var i = 0; i < this.form.childNodes.length;i++)
{
test.appendChild(this.form.childNodes[i]);
}

document.getElementById('divje').appendChild(test);

Hiermee krijg ik geen fout maar word alleen de spaties gekopieerd en dus niet alle elementen

[storeman]

Gebruik eens children ipv childnodes

[ Voor 173% gewijzigd door storeman op 23-04-2010 15:41 ]

[ZeroXT]

Het is me gelukt met deze code:

code:

while(child = this.form.firstChild)
{
    document.getElementById('divje').appendChild(child);
}

Bedankt voor de hulp allen.

[ Voor 111% gewijzigd door ZeroXT op 23-04-2010 16:13 ]

[Verwijderd]

Dat gat in feite niet. Wat wel kan (denk ik mooiste manier) is de inhoud van je container (form in dit geval) kopieren en dat de content maken van de parent van het te verwijderen element.
[code]
<a>
<b>
<c>bla</c>
</b>
<a>

delContainer(b){
helpvar = b.InnerHTML;
b.parent.InnerHTML = helpvar;
}
[/code]

zoiets, geen nette JS, maar het principe is er... Nevermind

[ZeroXT]

Verwijderd schreef op vrijdag 23 april 2010 @ 16:12:
Dat gat in feite niet. Wat wel kan (denk ik mooiste manier) is de inhoud van je container (form in dit geval) kopieren en dat de content maken van de parent van het te verwijderen element.

code:

<a>
  <b>
    <c>bla</c>
  </b>
<a>

delContainer(b){
  helpvar = b.InnerHTML;
  b.parent.InnerHTML = helpvar;
}

zoiets, geen nette JS, maar het principe is er...

Bedankt voor je reactie maar had het al opgelost. Zie mijn vorige reactie

[ Voor 11% gewijzigd door ZeroXT op 23-04-2010 16:14 ]