[Javascript] FireFox post formulier niet naar iframe

[wboard]

Ik heb een klein probleempje, in IE werkt het perfect, echter in firefox wil het niet lukken!.
In IE wordt het resultaat van de form post prima in de iframe gepost, echter firefox opent een nieuwe venster met daarin het post resultaat.

Situatie:
Ik heb een formulier die aangeroepen wordt d.m.v. AJAX, ik heb een form en een iframe:

code:

<form name="domain_nl" action="" method="post">
<iframe name="post_result" action="" style="width:0px;height:0px;display:none;" frameborder="0" onload="IFrameDiv('post_result','body');"></iframe>

Wanneer er op submitform wordt geklikt wordt een javascript functie aangeroepen:

code:

<input type="submit" value="Verzend formulier" target="post_result" onclick="postData('contact/contact','compute','post_result');" />

Bijbehorende javascript is:

code:

    function postData(parameters,flags,destination_iframe)
    {
        document.forms[0].action = '<? print BASE_URL; ?>'+parameters+'.php?'+flags;
        document.forms[0].target = destination_iframe;
        document.forms[0].submit();
}

Ik snap er niets van, waarom zou dit in firefox niet werken en in IE wel? Ik heb al rondgezocht maar vondt niets relevants!

[TeeDee]

ipv van document.forms getElementById gebruiken?

[remcotolsma]

Maak je niet gebruik van een XMLHttpRequest object?

[wboard]

Nee, het zijn groter formulieren die verzonden moeten worden, dat werkt niet goed met AJAX

[Borizz]

gebruik i.p.v.:

JavaScript:

document.forms[0].attribuut = 'value';

eens:

JavaScript:

document.fomrs[0].setAttribute('attribuut','value');

wboard schreef op zaterdag 20 mei 2006 @ 14:56:
Nee, het zijn groter formulieren die verzonden moeten worden, dat werkt niet goed met AJAX

Dus je maakt helemaal geen gebruik van AJAX, zoals je wel in je TS vermeld ...
Tevens is het echt geen probleem om een groot formulier met AJAX te versturen hoor, of het persé via AJAX moet is dan een tweede.

[ Voor 58% gewijzigd door Borizz op 20-05-2006 15:00 ]

[wboard]

TeeDee schreef op zaterdag 20 mei 2006 @ 14:43:
ipv van document.forms getElementById gebruiken?

je bedoelt document.getElementById? nee dat werkt ook niet dan krijg je hetzelfde resultaat

[wboard]

Borizz schreef op zaterdag 20 mei 2006 @ 14:58:
gebruik i.p.v.:

JavaScript:

document.forms[0].attribuut = 'value';

eens:

JavaScript:

document.fomrs[0].setAttribute('attribuut','value');

[...]

Dus je maakt helemaal geen gebruik van AJAX, zoals je wel in je TS vermeld ...
Tevens is het echt geen probleem om een groot formulier met AJAX te versturen hoor, of het persé via AJAX moet is dan een tweede.

dan begrijp je me verkeerd;) ik gebruik ajax om het formulier ZELF (dus de xhtml) op te halen, om het formulier te posten gebruik ik dus GEEN ajax

[wboard]

Borizz schreef op zaterdag 20 mei 2006 @ 14:58:
Tevens is het echt geen probleem om een groot formulier met AJAX te versturen hoor, of het persé via AJAX moet is dan een tweede.

Je moet dan met javascript alle form elementen uitlezen, dat is meer werk dan even posten naar een iframe! (of heb jij een andere methode?)

Als ik

code:

document.forms[0].setAttribute('attribuut','value');

gebruik, verandert er niets

[ Voor 29% gewijzigd door wboard op 20-05-2006 15:08 ]

[remcotolsma]

wboard schreef op zaterdag 20 mei 2006 @ 15:03:
Je moet dan met javascript alle form elementen uitlezen, dat is meer werk dan even posten naar een iframe! (of heb jij een andere methode?)

Er bestaan wel handige JavaScript frameworks waarmee dat helemaal niet veel werk is. Kijk maar eens naar Prototype JavaScript Framework (http://prototype.conio.net/). Volgens mij bevat dit framework wel een functie (Form.serialize) waarmee in één keer een formulier omgezet kan worden naar een URL-encoded string.

Verder bevat het framework sowieso wel handige functies voor het hele AJAX gebeuren.

[Borizz]

wboard schreef op zaterdag 20 mei 2006 @ 15:03:
[...]


Je moet dan met javascript alle form elementen uitlezen, dat is meer werk dan even posten naar een iframe! (of heb jij een andere methode?)

Daar zijn genoeg standaard functies voor te vinden die dat doen, ik heb er zelf ook eens eentje geschreven en zo moeilijk is dat nu ook weer niet.

[crisp]

Waarom niet gewoon:

HTML:

<form action="contact/contact.php" target="post_result" method="POST">
<input type="hidden" name="compute" value="1">
<input type="submit" value="Submit">
</form>

en als je dynamisch de formaction en/of target wilt aanpassen doe dat dan vanuit een onsubmit handler en niet vanuit een onclick op je submitbutton:

HTML:

<form ... onsubmit="functie(this)">

'this' is een referentie naar je form; scheelt weer lookups in je functie

[Borizz]

wboard schreef op zaterdag 20 mei 2006 @ 15:03:

Als ik

code:

document.forms[0].setAttribute('attribuut','value');

gebruik, verandert er niets

Bij mij werkt de volgende (gestripte) code anders prima in firefox hoor, maar zoals crisp ook al aangeeft, kan je ook gelijk het target in je form zetten en de onsubmit handler van je form gebruiken ipv een onclick op een button.

HTML:

<html>
    <head>
        <title>FOrm test</title>
        <script type="text/javascript">
            function postData(destination_iframe) {
                document.forms[0].setAttribute('action','#');
                document.forms[0].setAttribute('target', destination_iframe);
                document.forms[0].submit();
            }
            </script>
    </head>
    <body>
        <form name="domain_nl" action="" method="post">
            <input type="text" name="test" value="test" >
            <input type="submit" value="Submit" name="submitButton" onclick="postData('post_result');">
        </form>
        <iframe name="post_result"></iframe>
    </body>
</html>

[ Voor 18% gewijzigd door Borizz op 20-05-2006 15:35 ]

[wboard]

dat heb ik idd gedaan om 1 form te gebruiken, maar onsubmit is idd wel een betere oplossing!

p.s. 2 BORIZZ, ik heb exact de code gecopyt, maar hij post in een nieuw venster bij mij (Firefox 1.5.0.3)

[ Voor 38% gewijzigd door wboard op 20-05-2006 19:16 ]

[Borizz]

Dat is vreemd want ik draai ook versie 1.5.0.3 van Firefox.. misschien ligt het aan je instellingen.

[wboard]

ik heb een id meegegeven aan mij iframe en nu wordt er in m'n iframe gepost

code:

ipv: <iframe name="post_result"></iframe> 
dit: <iframe name="post_result" id="post_result"></iframe>

echter, in IE copyt hij de data vanuit het iframe prima naar een div, in FF doet hij wel iets alleen lijkt het alsof hij geen data copyt, waardoor de div leeg is.

code:

    function IFrameDiv(source_iframe,destination_div)
    {
        var source = parent.frames[source_iframe].document.body.innerHTML;
        var target = document.getElementById(destination_div);
        target.innerHTML = source;
    }

ik heb geprobeerd om op een andere manier de data uit m'n iframe te pikken alleen dit lukt vooralsnog niet.

[ Voor 67% gewijzigd door wboard op 21-05-2006 12:54 ]

[funkwurm]

Jongens, lees de reactie van crisp even, een target hoor je op het formulier-element te zetten, niet de submit-knop.

[Borizz]

funkwurm schreef op zondag 21 mei 2006 @ 18:02:
Jongens, lees de reactie van crisp even, een target hoor je op het formulier-element te zetten, niet de submit-knop.

Misschien moet jij de andere reacties even doorlezen, want dat is namelijk precies wat er gedaan wordt...

[funkwurm]

oeps, maar waarom ook alweer niet gewoon <form target="iframe_naam">?

[ Voor 190% gewijzigd door funkwurm op 21-05-2006 20:43 ]

[wboard]

Ik ben toch maar even aan de gang gegaan met het posten van de form d.m.v. AJAX, uiteindelijk wel netter denk ik.

Onderstaande code werkt opzich wel, is goed uit te bouwen, naar het uitlezen van selectboxjes enzo, echter hoe zorg ik er voor dat de input buttons NIET uitgelezen worden, want nu leest hij ieder element uit, hoe had jij dit aangepakt Borizz?

code:

    function getPostedData() 
    {

        var form = document.getElementById('main_form').elements;
        for (var i=0;i<form.length;i++)
        {
            if(form[i].nodeName == 'INPUT')
            {
                returnString = '&' + form[i].value + '-' + form[i].value;
            }
        }
        alert(returnString);
    }

[ Voor 15% gewijzigd door wboard op 21-05-2006 21:43 ]

[crisp]

2 manieren: checken op het type-attribuut in je script of gewoon input elementen die geen relevante data bevatten gewoon geen name-attribuut geven en daarop checken in je script.
Ik snap echter nog steeds niet waarom je het formulier zelf niet gewoon een target kan geven en waarom je je document minder accessible gaat maken door functionaliteit die standaard in HTML beschikbaar is nu te gaan simuleren met javascript.

Wat dit verder met Ajax te maken heeft snap ik ook niet helemaal; ik zie je wel ranzigheden uitvoeren met de inhoud van je iframe (een compleet HTML document) en die weer uitlezen en ergens inproppen (wat dus uiteindelijk een invalid document oplevert), maar ik zie daar niets in terug van wat ik beschouw als Ajax

[ Voor 28% gewijzigd door crisp op 21-05-2006 21:54 ]

[wboard]

het formulier kan ik zelf wel een target geven, echter is het dan naar mijn mening lastig om steeds het target te wijzigen d.m.v onsubmit.
Ik heb nl. een contactformulier die d.m.v. AJAX BINNEN de form tags wordt geplaatst (dat is op dit moment het enig ajax-achtige hieraan ), de formtags worden dus niet meegenomen.

Wat vindt jij dan de beste manier? 1) Werken met een I-frame en de data uit het iframpje copyen naar de juiste div of 2) uitlezen van formdata en een post request uitvoeren?

[funkwurm]

wboard, waarom wil je dan het target steeds veranderen? Je hebt toch maar 1 iframe waarin de formulieren gepost moeten worden?

Daarbij, na het topic dit keer goed doorgelezen te hebben (), volgens mij kun je beter niet vanuit je moeder-frame het iframe gaan lezen. Maar andersom, je geeft de pagina die in het iframe geladen wordt een onload=function() mee die de benodigde gegevens naar parent.document.getElementById('jouwdiv').innerHTML stuurt.

En als ik nou weer dingen zeg waaruit blijkt dat ik de rode draad van het topic maar niet op weet te pikken, dan hou ik me er verder ook buiten

[crisp]

wboard schreef op zondag 21 mei 2006 @ 22:05:
het formulier kan ik zelf wel een target geven, echter is het dan naar mijn mening lastig om steeds het target te wijzigen d.m.v onsubmit.
Ik heb nl. een contactformulier die d.m.v. AJAX BINNEN de form tags wordt geplaatst (dat is op dit moment het enig ajax-achtige hieraan ), de formtags worden dus niet meegenomen.

De X in AJAX zou imo moeten staan voor XMLHttpRequest, de A zou eigenlijk A/S moeten zijn (asynchroon of synchroon), de naam AJAX is eigenlijk altijd al verkeerd geweest, maar de oldfashioned way van 'onderhuidse' datatransport mbv (i)frames is in mijn ogen geen AJAX.

Verder bevat de innerHTML van je iframe document geen HTML fragment maar een compleet HTML document; elementen als HTML, HEAD en BODY zijn immers implied en krijg je dus ook terug via innerHTML; dat als fragment behandelen is fout en invalid.

Wat vindt jij dan de beste manier? 1) Werken met een I-frame en de data uit het iframpje copyen naar de juiste div of 2) uitlezen van formdata en een post request uitvoeren?

In de eerste plaats moet je je afvragen of je hier ueberhaupt wel voor een Ajax(achtige) techniek moet gaan. Wat biedt het aan voordelen en wegen die op tegenover de nadelen?

Als je al besluit om voor iets Ajax-achtigs te gaan dan moet je gaan nadenken over de te gebruiken techniek. Wat zijn de voor- en nadelen van de oldfashioned techniek mbv (i)frames ten opzichte van echt Ajax mbv XMLHttpRequest (dat op dit moment door alle moderne browsers ondersteund wordt)?

En als je al voor de oldfashioned techniek gaat dan moet je je gaan afvragen hoe je het probleem van de asynchrone nature van HTTP requests gaat ondervangen. Ga je werken met timers? Laat je het document in je iframe zelf de vervolgactie initieren?
Daarnaast is dus ook van belang hoe je je data gaat aanbieden (dat geldt ook voor Ajax overigens); gezien het feit dat een iframe document niet enkel een fragment kan bevatten zal je daar - indien je met fragments wilt werken - iets meer omheen gaan bouwen. Je HTML fragment in een javascript variabele stoppen is ook nog een mogelijke oplossing.

Kortom: ga niet zomaar blind een bepaalde techniek gebruiken voordat je alles goed overdacht hebt, en als je dan al besluit een bepaalde techniek te gebruiken verdiep je daar dan ook goed in om het ook goed toe te kunnen passen.
Dit soort 'experimenten' zonder gedegen (voor)kennis gaan doen is een recept voor failure; dat iets werkt in browser A wil niet zeggen dat het ook de juiste manier is en *dus* zou moeten werken in browser B of C, hooguit dat browser A nogal een zachte heelmeester is (en stinkende wonden maakt)

[wboard]

Er wordt WEL ajax gebruikt om het formulier op te halen (dit gaat dus zonder iframe!) Daarom heb ik het steeds over ajax. Enkel het SUBMITTEN van het formulier is in dit geval het probleem. De mensen waarvoor deze website gemaakt wordt, willen graag een soort applicatie achtige omgeving, oftwel geen refreshes. Dit is dus een eis.
Verder heb ik al diversen applicaties gemaakt volledig gebaseerd op ajax, dus de kennis van de techniek is er wel.

Ik zit nu alleen te twijfelen wat netter is om te gebruiken, ik vindt het werken met een iframe zelf wat ranzig, zoals jij ook al zegt je krijgt niet-valide documenten (wat wel weer op te lossen is, maar goed). Je blijft toch data verplaatsen, wat dubbel werk is in mijn ogen.


2 Borizz: ik gebruik die onload functie al 'onload="IFrameDiv('post_result','body');"' alleen moet ik misschien 'this' meegeven waardoor de iframe data simpeler te catchen is.

[ Voor 47% gewijzigd door wboard op 22-05-2006 09:09 ]

[SchizoDuckie]

ik heb deze problemen er allemaal al een keer uitgefilterd en er een standaard jsje van gemaakt in style van moo.ajax.js

check http://beta.zapguide.nl/iframe/

hth

[wboard]

dat ziet er goed uit, zal er eens naar kijken! tnx

[Verwijderd]

ik heb hetzelfde probleem,
ik moet een form via een iframe submitten, dit werkt vlekkeloos in IE, maar in FF doet hij niks.

voorbeeld:
window.frames["mijniframe"].document.getElementsByTagName("form")[0].submit()

ik moet dit effect in FF zien te krijgen.