HTML - Geneste vorm omslachtig?

Om mezelf te bewijzen aan iemand die niet veel weet over PHP, moet ik werken met een onhandig gehackt systeem dat is ontworpen en gebouwd door mensen die waarschijnlijk niet meer mogen programmeren. Kortom, er is besloten dat gebruikers de mogelijkheid moeten krijgen om een ​​afbeelding te uploaden voor hun profiel, voordat ze daadwerkelijk worden geregistreerd. Gewoon, precies daar, in het midden van het registratieformulier, een volledig aparte vorm (functioneel, het moet er hetzelfde uitzien) met een veld voor het uploaden van bestanden, een afzonderlijke verzendknop en een beeldweergavegebied. Blijkbaar zag de klant AJAX-afbeelding uploaden op een andere site en besloot hij: "Dat is goed, dat willen we!" zonder echt te weten hoe formulieren werken of rekening te houden met waarom een ​​niet-geregistreerde gebruiker dingen moet uploaden om mee te beginnen

Mijn eerste idee was om elders een onzichtbare vorm te maken en de waarde van de bestandsbox te kopiëren wanneer op de knop wordt geklikt, gevolgd door de AJAX-inzending. Dat werkt niet omdat JavaScript de waarde van een bestandsbox niet kan bewerken. Begrijpelijk.

De tweede poging was om geneste formulieren te maken. Met sommige hacks , kon ik FireFox twee formulieren laten zien , maar door de innerlijke in te dienen wordt de uiterlijke onderworpen. "Ongedefinieerd gedrag", denk ik, is de term. Logisch, je hoort geen formulieren te nesten.

Dus - negerend het feit dat dit absoluut geen zin heeft, en de cliënt moet dat echt worden verteld - is er nog een mogelijkheid over om een ​​bestandsuploadformulier op een pagina te maken, dat kan worden ingediend via AJAX, en zichtbaar is binnen een andere het formulier? Ik hoop te voorkomen dat ik het formulier ergens anders op de pagina maak en het op zijn plaats zet met afschuwelijke CSS-hacks.

4
Laat ze de informatie twee keer, de helft of wat dan ook voordien omgooien met de afbeelding, alles na om te finaliseren. Dat is wat er gebeurde. Met andere woorden, POSTBACKs om een ​​select veld met steden te "updaten" voor een staat of wat dan ook. Als je het inzenden van het formulier voor beide transparant kunt maken, dan heb je op alle punten gewonnen en niemand is wijzer.
toegevoegd de auteur Jared Farrish, de bron

2 antwoord

Ik weet niet of dit geniaal genoeg voor je is of niet, maar hoe zit het met het insluiten van een iframe in het midden van het formulier en het doen van de bestandsupload binnen dat venster? Het is misschien niet puur kwaad genoeg om echt zo slim en sluw te zijn, maar het kan werken.

Het enige neveneffect dat ik kan zien als dat wanneer de bovenliggende is ingediend, zo is de ingesloten iframe . Als je voorzichtig genoeg bent en het iframe verwijdert wanneer het niet wordt gebruikt voor het uploaden van het bestand, vind ik dat het goed is.

Parent

<!DOCTYPE HTML>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form submit="http://www.google.com/search" method="get">
    <div>
        <input type="text" name="q" value="[ Search Google Here ]"/>
    </div>
    <iframe src="http://jfcoder.com/test/embed.php" style="width: 200px; height: 200px;"></iframe>
    <div>
        <button type="submit">Submit this Page's Form</button>
    </div>
</form>
</body>
</html>

Embedded

<!DOCTYPE HTML>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<?php

if ($_GET['q']) {
    echo "

GET SUBMITTED

"; } ?> <form submit="embed.php" method="get"> <div> <input type="text" name="q" value="Type whatever"/> <button type="submit">Submit this Page's Form</button> </div> </form> </body> </html>

http://jfcoder.com/test/parentform.php

1
toegevoegd
Dat is wat ik zei in de comments ...
toegevoegd de auteur C0deH4cker, de bron
Denk het wel. Het lijkt een betere methode dan een geneste vorm, zelfs als dat niet is toegestaan, omdat de bovenliggende pagina ongewijzigd zou blijven en de gebruiker zijn avitar zou kunnen uploaden zonder later zijn/haar gebruikersnaam/wachtwoord opnieuw in te voeren .
toegevoegd de auteur C0deH4cker, de bron
Ja, dat zag ik niet. Grote geesten denken hetzelfde?
toegevoegd de auteur Jared Farrish, de bron
Met de juiste aanpak denk ik dat het een redelijke manier is om het te benaderen. Het is zeker minder nerveus en oh-lordy dan sommige van de andere opties.
toegevoegd de auteur Jared Farrish, de bron

BEWERK:

Please read this: nested html FORM is inaccessible - multiple forms problem

Dat antwoord zegt dat formulierelementen geen andere formulierelementen kunnen bevatten, dus ook al werkt kan een browser werken, betekent dit niet dat u deze techniek zou moeten gebruiken. Probeer het allemaal in één vorm te zetten zoals:

<form action="register.php" method="POST" enctype="multipart/formdata">
 <input name="username" type="text" />
 <input name="password" type="password" />
 <input name="avitar" type="file" />
 <input name="image" type="submit" value="Upload" />
 <input name="register" type="submit" value="Register" />
</form>

Of nog beter, gebruik jQuery/AJAX om de avitar te uploaden zonder de pagina te verlaten.

ORIGINEEL ANTWOORD:

U kunt dit omzeilen met behulp van een javascript. Dit is een snel, niet-getest voorbeeld:

<head>
 <script>
  var submitted = false;

  function canSubmit() {
   if(submitted) return false;
   submitted = true;
   return true;
  }
 </script>
</head>
<body>
 <form action="register.php" method="POST" onsubmit="return canSubmit();">
  <input name="username" type="text" />
  <input name="password" type="password" />
  <form action="upload.php" method="POST" onsubmit="return canSubmit();" enctype="multipart/formdata">
   <input name="avatar" type="file" />
   <input type="submit" value="Upload" />
  </form>
  <input type="submit" value="Register" />
 </form>
</body>

Een andere methode is om de formulieren dezelfde actie te geven en de namen van de submitknoppen te geven, zodat u kunt zien welke is ingezonden. Dit werkt alleen als de gebruiker op de knop Verzenden klikt en niet op Enter tikt wanneer een van de tekstvakken is geselecteerd, maar voor het bestanduploadformulier moet de gebruiker op de knop Verzenden klikken.

0
toegevoegd
Goed punt, zal antwoord bewerken. Voor de invoer van bestanden moet een gebruiker echter op de knop Verzenden klikken ...
toegevoegd de auteur C0deH4cker, de bron
Bewerkte het bericht om dit weer te geven. Hoe dan ook, aangezien alle gegevens van de gebruiker worden verzonden (die u nooit zou moeten vertrouwen), moet u dit eerst controleren.
toegevoegd de auteur C0deH4cker, de bron
Probeer een iframe te gebruiken in plaats van een formulier. Hiermee kunt u de afbeelding uploaden zonder de pagina te verlaten. Zorg dat de bron van het iframe een ander php-script is dat een formulier maakt.
toegevoegd de auteur C0deH4cker, de bron
Het gebruik van verschillende namen voor de submmit-knoppen werkt alleen als de gebruiker op de knop klikt. Als de gebruiker op de ENTER-toets van een veld drukt, wordt het formulier verzonden zonder de waarde van de knop.
toegevoegd de auteur rcdmk, de bron
Natuurlijk kan het in dit geval worden gebruikt.
toegevoegd de auteur rcdmk, de bron
Helaas is dit meer dan alleen een geval van verschillende dingen doen met dezelfde gegevens. De hoofdvorm, dat de nieuwe in het midden moet klitten, heeft allerlei validatie en andere scripts die eraan vast zitten, waar ik niet mee kan rotzooien.
toegevoegd de auteur DigitalMan, de bron