[js+html] action del form in nuovo pop-up

**DarthSandr** · 25-11-2013, 12:50

Salve a tutti.
Sto avendo un problema relativo all'apertura dell'action di un form in un pop-up nuovo e non nella stessa pagina o in un altro tab.

Utilizzando questo codice:

html:

codice HTML:

<form action="action.php" name="myForm" method="post">    <input type="hidden" name="param1" id="param1">    <input type="hidden" name="param2" id="param2"></form>

js:

codice:

window.open("", "actionPoUp", "widht=400,height=400,menubar=no,titlebar=no,toolbaro=no,status=no,location=no,resizable=yes");document.myForm.target="actionPoUp";
document.myForm.submit();

il tutto funziona utilizzando IE9 in configurazione a più processi.
Nella configurazione monoprocesso, invece, capita che viene aperto il pop-up (che rimane bianco) e l'action del form viene ridiretta in un altro tab.

Per ovviare a questo problema ho provato a modificare il codice nel seguente modo:

html

codice HTML:

<form action="action.php" name="myForm" method="post" target="actionPoUp" onsubmit="openPopUp();">    <input type="hidden" name="param1" id="param1">    <input type="hidden" name="param2" id="param2"></form>

js

codice:

function openPopUp() {
   alert('openPopUp');
   window.console && console.log("openPopUp() -> sono dentro..."); 
   window.open('', 'actionPoUp', 'widht=400,height=400,menubar=no,titlebar=no,toolbaro=no,status=no,location=no,resizable=yes');
   return true;
}

document.myForm.submit();

In questo caso la funzione openPopUp() viene bellamente ignorata (non visualizza nè l'alert nè il log sulla console) e l'action della form viene rediretta in un altro tab.

La document.myForm.submit(); (in entrambi i casi) è contenuta in un'altra funzione js che viene richiamata quando premo un bottone nella pagina web.

Perchè viene ignorata la funzione presente nella onsubmit()? Come posso fare per risolvere il problema e aprire il pop-up correttamente?

Ciao e grazie
Sandro

**DarthSandr** · 25-11-2013, 13:40

Cercando un pò ho scoperto che la seconda soluzione non può funzionare perchè se chiamo la submit in un js associato al click di un bottone non viene eseguita la onsubmit specificata nel form.

Quindi, per risolvere il mio problema, vorrei capire perchè questa soluzione:

html:
codice HTML:
<formaction="action.php"name="myForm"method="post"><inputtype="hidden"name="param1"id="param1"><inputtype="hidden"name="param2"id="param2"></form>
js:
codice:
window.open("","actionPoUp","widht=400,height=400,menubar=no,titlebar=no,toolb aro=no,status=no,location=no,resizable=yes");document.myForm.target="actionPoUp";
document.myForm.submit()

Che funziona su IE9 in configurazione multiprocesso non funziona invece in quella monoprocesso e se c'è un modo per farlo funzionare in entrambi i modi?
Qualcuno ha qualche idea?

**carlomarx** · 25-11-2013, 18:01

Se ti accontenti di usare il metodo GET puoi serializzare il form a mano. Metodo robusto e sicuro:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Invio form in popup</title>
<script type="text/javascript">
function PopUpSubmit (oFormElement) {
    if (!oFormElement.action) { return; }
    if (oFormElement.method.toLowerCase() === "post") {
        alert("Metodo post non supportato!");
        return;
    }
    var oField, sFieldType, nFile, sSearch = "";
    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
        oField = oFormElement.elements[nItem];
        if (!oField.hasAttribute("name")) { continue; }
        sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
        if (sFieldType === "FILE") {
            for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
        } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
            sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
        }
    }
    open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), "actionPoUp", "widht=400,height=400,menubar=no,titlebar=no,toolb aro=no,status=no,location=no,resizable=yes");
}
</script>
</head>
<body>

<h1>Invio form in popup</h1>

<form action="action.php" name="myForm"" method="get" onsubmit="PopUpSubmit(this); return false;">
    <fieldset>
        <legend>Registration example</legend>
        <p>
            First name: <input type="text" name="firstname" /><br />
            Last name: <input type="text" name="lastname" />
        </p>
        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>
</form>

</body>
</html>

**DarthSandr** · 25-11-2013, 18:38

La get mi andrebbe anche bene solo se su IE si potesse nascondere la barra dell'indirizzo, cosa che finora non sono riuscito a fare.
Farei banalmente una window.open mettendo come primo parametro l'url con i parametri messi nel solito modo:
?param1=pippo&param2=pluto&........

Usavo il form perchè mi parmette di passare parametri via post che non sono visibili nella barra degli indirizzi nella nuova finestra

**carlomarx** · 26-11-2013, 01:32

Originariamente inviata da DarthSandr

Usavo il form perchè mi parmette di passare parametri via post che non sono visibili nella barra degli indirizzi nella nuova finestra

Se il problema è nasconderli al colpo d'occhio, criptali e il gioco è fatto.

Discussione: [js+html] action del form in nuovo pop-up

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

[js+html] action del form in nuovo pop-up

Permessi di invio