[javascript] "Form in form"

[Verwijderd]

Ik heb een vrij lastig probleem waar ik nu al meer dan een jaar tegen aan loop.

Ik heb een bestelformulier, wat één grote <form> is. Form wordt gesubmit en gegevens worden verwerkt.

Op deze pagina moet de klant zijn logo kunnen uploaden. Deze wil ik via een autosubmit <input type="file"> uploaden, ik gebruikte daarvoor een hidden iframe.

Omdat je forms niet kan/mag nesten, moest ik het uploadform buiten het bestelformulier plaatsen. Middels javascript berekende ik dan de afstand vanaf het begin van het bestelformulier waar de upload-control moest komen en met marginTop verplaatste ik het dan naar de gewenste positie. Vrij omslachtig, maar het werkte.

Nu moest ik echter de layout van het bestelformulier veranderen, en daarmee moest de openings <form> een stuk naar boven verplaatst worden. Het gevolg is dat ik nu geen manier meer heb om te bepalen hoe ver het upload form moest zakken.

Nu heb ik twee oplossingspaden
1) Alsnog een manier verzinnen om een div te alignen op de locatie (op de pagina) van een andere div
2) Een andere oplossing verzinnen voor een autosubmit <input type="file"> upload, zodat ik de bewuste input gewoon in het hoofdbestelformulier kan plaatsen en er niet perse een extra <form> omheen hoeft. Ik heb hiervoor al wel jquery oplossingen gevonden die flash gebruiken, maar de flash penetratie van mijn bezoekers vind ik niet voldoende om voor deze oplossing te kiezen.

Omdat ik hier al ontzettend veel tijd aan kwijt ben geweest wilde ik graag een paar frisse meningen over mijn probleem. Wat lijkt jullie het beste, of hebben jullie misschien een nettere oplossing voor mijn probleem?

[ Voor 3% gewijzigd door Verwijderd op 23-12-2009 17:49 ]

[NMe]

Ik begrijp je reden voor het nesten van formulieren niet? Als je twee formulieren hebt die elk bij een submit iets anders moet doen, zet ze dan gewoon apart neer, die hoef je dan toch niet te nesten? En als de functionaliteit niet per formulier anders ik, dan heb je überhaupt geen twee forms nodig.

Leg eens uit wat je precies bedoelt en laat het desnoods zien aan de hand van een beknopt stukje code?

[ahbruinsma]

Of zet een hidden input met een bepaald id, of een fake.gif image desnoods. Je kan met jquery dan de positie bepalen, of is dat niet genoeg?

[Verwijderd]

NMe schreef op woensdag 23 december 2009 @ 17:51:
Ik begrijp je reden voor het nesten van formulieren niet? Als je twee formulieren hebt die elk bij een submit iets anders moet doen, zet ze dan gewoon apart neer, die hoef je dan toch niet te nesten? En als de functionaliteit niet per formulier anders ik, dan heb je überhaupt geen twee forms nodig.

Leg eens uit wat je precies bedoelt en laat het desnoods zien aan de hand van een beknopt stukje code?

Wat ik wil is dit:

HTML:

<form method="post" action="" id="bestelformulier">
<input type="text" name="artikel_omschrijving">
<input type="radio" name="artikel_bedrukken" value="Ja"><input type="radio" name="artikel_bedrukken" value="Nee">
            <form id="logo_upload" action="/upload.php5" method="post" enctype="multipart/form-data" target="upload_target">
                Upload uw logo: <input name="bijlage" id="bijlage" type="file" onChange="startUpload(); this.form.submit();"/><a class="meer_drukkleuren_link" href="/logo-aanleveren" target="_blank"> &nbsp;&nbsp;Lees de richtlijnen <img class="inline_img" src="/images/vh-uitleg.png"></a>
            </form>
        <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>

<div id="logo_overzicht">
<img src="/uploads/logo_1.jpg"><input type="radio" name="logo_keuze" value="logo_1">
<img src="/uploads/logo_2.jpg"><input type="radio" name="logo_keuze" value="logo_2">
</div>
<input type="text" name="besteller_naam">
<input type="text" name="besteller_adres">
<input type="submit" name="verstuur_bestelling">
</form>

De besteller kan meerdere logo's uploaden, en moet één logo kiezen welke hij bedrukt wil hebben op het bestelde artikel. Het uploaden van het logo en het selecteren van het logo gebeurt ergens halverwege het bestelproces/formulier. Zodra een besteller een logo selecteert wordt deze dmv Ajax geupload en als keuze in het bestelformulier aangeboden.

Omdat form in form niet kan/mag zette ik het form "logo_upload" boven form#bestelformulier, en verplaatste ik het met javascript 50 pixels naar beneden, zodat het grafisch op de gewenste plek stond.

Wat ik nu zoek is of er een manier is
a) om de <input type="file"> toch in het bestelformulier te hebben
b) een dummy element "#uploadform_positie" te hebben, daarvan de positie te bepalen, en vervolgens weer grafisch #logo_upload te verplaatsen naar die positie.

[crisp]

Je kan ipv een genest formulier en een hidden iframe toch gewoon de file-upload in z'n geheel via een (wel zichtbaar) iframe doen?

[Verwijderd]

ahbruinsma schreef op woensdag 23 december 2009 @ 17:55:
Of zet een hidden input met een bepaald id, of een fake.gif image desnoods. Je kan met jquery dan de positie bepalen, of is dat niet genoeg?

Hmm, jawel, heb het nu inderdaad voor elkaar met absolute positioning.

[Verwijderd]

crisp schreef op donderdag 24 december 2009 @ 09:19:
Je kan ipv een genest formulier en een hidden iframe toch gewoon de file-upload in z'n geheel via een (wel zichtbaar) iframe doen?

Dat is ook wel een helder inzicht...

Soms heb je gewoon even simpele feedback nodig van anderen...