invio anteprima form a popup

**asch** · 11-02-2021, 16:05

Ciao, ho una form dove si compilano vari campi. Prima di cliccare "Salva dati" vorrei vedere un'antepria di quello inserito.
Quando clicco il bottone anteprima si apre il popup ma non recupera nessun dato dalla form.
Forse c'è un errore nello script, qualche suggerimento?

codice:

<script>
    function inviaform(){
        window.open('_popup_anteprima.asp', 'popupname', 'scrollbars=yes,width=700,height=750');
        document.getElementById('frmEmailEditor');
       }
</script>

<form action="salva_dati_inseriti.asp" method="post" name="frmEmailEditor" id="frmEmailEditor">
.....
<input type="button" name="Preview" value="Anteprima" onClick="inviaform()">
<input type="submit" name="Submit" value="Salva dati">
</form>

**ciro78** · 11-02-2021, 19:30

Originariamente inviata da asch

Ciao, ho una form dove si compilano vari campi. Prima di cliccare "Salva dati" vorrei vedere un'antepria di quello inserito.
Quando clicco il bottone anteprima si apre il popup ma non recupera nessun dato dalla form.
Forse c'è un errore nello script, qualche suggerimento?

codice:

<script>
    function inviaform(){
        window.open('_popup_anteprima.asp', 'popupname', 'scrollbars=yes,width=700,height=750');
        document.getElementById('frmEmailEditor');
       }
</script>

<form action="salva_dati_inseriti.asp" method="post" name="frmEmailEditor" id="frmEmailEditor">
.....
<input type="button" name="Preview" value="Anteprima" onClick="inviaform()">
<input type="submit" name="Submit" value="Salva dati">
</form>

Ciao,
utilizza sempre il tag code per il codice.
Inoltre apri la popup ma non passi i valori alla pagina.....

**asch** · 11-02-2021, 19:38

Si infatti, quindi

codice:

document.getElementById('frmEmailEditor');

non è corretto?
MI sai indicare il codice giusto da usare?

**ninja72** · 11-02-2021, 20:59

Questo è un piccolo esempio, facilmente adattabile.

codice:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #container {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #form {
            display: flex;
            flex-direction: column;
        }
        #form>input,
        button {
            margin-top: 10px;
            padding: 5px;
        }
        #anteprimaView {
            padding: 20px;
            color: white;
            display: none;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.9);
            width: 400px;
            height: 400px;
            overflow: auto;
        }
        .view {
            display: block !important;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="form-container">
            <form action="salva_dati_inseriti.asp" id="form" method="POST">
                <label for="nome">Nome</label>
                <input type="text" name="nome" id="nome">
                <label for="cognome">Cognome</label>
                <input type="text" name="cognome" id="cognome">
                <button type="button" id="anteprima">anteprima</button>
                <input type="submit" value="Salva dati">
            </form>
        </div>
        <div id="anteprimaView" class="">
            <button id="close">Close</button>
        </div>
    </div>
    <script src="main.js"></script>
</body>

</html>

questo è il main.js

codice:

const form = document.getElementById('form')
const anteprima = document.getElementById('anteprima')
const anteprimaView = document.getElementById('anteprimaView')
const anteprimaClose = document.getElementById('close')
const label = ['Nome', 'Cognome']

anteprima.addEventListener('click', () => {
    anteprimaView.classList.toggle('view')
    for (let i = 0; i < form.length - 2; i++) {
        let p = document.createElement("p")
        let text = document.createTextNode(`${label[i]}: ${form[i].value}`)
        p.append(text)
        anteprimaView.append(p)
    }
})
anteprimaClose.addEventListener('click', () => {
    anteprimaView.classList.toggle('view')
    for (let i = 0; i < form.length - 2; i++) {
        anteprimaView.removeChild(anteprimaView.lastChild)
    }
})

**ciro78** · 11-02-2021, 21:00

ma sei pratico di js?

**asch** · 12-02-2021, 18:17

non conosco a sufficenza js.
Cmq ho trovato questo ed ho risolto così,
Grazie

Codice PHP:


function InviaPop(ff){
window.open('','popup','width=450,height=300');
ff.target='popup'
ff.action='paginaAnteprima.asp'
ff.submit()
}


<input type="button" value="ANTEPRIMA" onclick="InviaPop(this.form)">

function Invia(ff){
ff.target=''
ff.action='pagina.asp'
ff.submit()
}

<input type="button" value="INVIA" onclick="Invia(this.form)">

Discussione: invio anteprima form a popup

Strumenti discussione

Ricerca discussione

Visualizza

invio anteprima form a popup

Permessi di invio