[PHP] Preservare i campi del form solo se l'invio non ha successo

  • Creatore Discussione Creatore Discussione Cosina
  • Data di inizio Data di inizio

Cosina

Utente Attivo
27 Dic 2016
101
0
16
Buongiorno a tutti e Buon Fine Anno. Espongo il mio problema e premetto che non sono un'esperta di php che uso solo per i form di contatto. Parlo, infatti, di un form creato in html, php e javascript. In questo form, uso Javascript anche per preservare i campi già compilati nel caso in cui la pagina venga riaggiornata (per esempio a causa del captcha errato), in modo che non si debba ricompilare tutto quanto. Vorrei, però, che i campi venissero preservati solo quando la pagina viene riaggiornata perchè l'invio non avviene a causa di un errore e venissero invece cancellati quando l'invio avviene in modo corretto. C'è un modo per ottenere questo? Grazie mille per l'aiuto.
Questo è un esempio base del form con i due file principali:

HTML:
<form class="form-contact" action="contact3.php" method="post" enctype="multipart/form-data" onsubmit="return checkEmail(this)">
        <p><span class="star">*</span> <span style="font-size:0.8em">Campi obbligatori</span></p> 
        <p><label>Nome:<span class="star">*</span><br></label><input id="name" class="field" type="text" name="name" required /></p>   
        <p><label>E-mail:<span class="star">*</span><br></label><input id="email" class="field" type="email" name="email" required /></p>  
        <p><label>Messaggio: <span class="star">*</span><br></label><textarea id="message" class="form-text" rows="15" cols="40" name="message" required ></textarea></p>
        <p style="width: 158px; border: 1px solid #cccccc; padding: 4px">Antispam: <br><img style="vertical-align: middle" id="captcha" src="./captcha.php" />
            <a onclick="reload()" style="cursor: pointer; cursor: pointer; font-size: 2.0rem; vertical-align: middle; color: green; font-weight: bold;"> &orarr;</a><br>
            <label><span style="font-size: 0.8rem">Type the numbers</span></label><br>
            <input type="text" name="captcha" /></p>
        <div class="button-container">
        <input class="button" type="reset" value="Reset">&nbsp;
        <input class="button" type="submit" value="Send">
        </div>
    </form>
    </div>

    <script>
function checkEmail(theForm) {
   if (theForm.email.value != theForm.remail.value)
   {
       alert('Le email non corrispondono/The emails don\'t match!');
       return false;
   } else {
       return true;
   }
}
</script>
    <script>
            function reload(){
            document.getElementById("captcha").src= './captcha.php?t=' + (new Date()).getTime();
            }
        </script>
        <!-- script per campi persistenti se pagina aggiornata -->
        <script
         src="https://code.jquery.com/jquery-3.3.1.min.js"
         integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
         crossorigin="anonymous">
       </script>
        <script>
    // Run on page load
    window.onload = function() {
        // If sessionStorage is storing default values (ex. name), exit the function and do not restore data
        if (sessionStorage.getItem('name') == "name") {
            return;
        }
        // If values are not blank, restore them to the fields
        var name = sessionStorage.getItem('name');
        if (name !== null) $('#name').val(name);
        var email = sessionStorage.getItem('email');
        if (email !== null) $('#email').val(email);
        var message= sessionStorage.getItem('message');
        if (message!== null) $('#message').val(message);
    }
    // Before refreshing the page, save the form data to sessionStorage
    window.onbeforeunload = function() {
        sessionStorage.setItem("name", $('#name').val());
        sessionStorage.setItem("email", $('#email').val());
        sessionStorage.setItem("message", $('#message').val());
    }
</script>


PHP:
<?php
session_start();
if ($_POST['captcha'] != $_SESSION['captcha']) {
    header("Location: ./error");
    die();
}
//impostazioni email
else {
    if(isset($_POST['name'])) {

        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = ($_POST['message']);
        $emailmessage = "Hai ricevuto una richiesta dal tuo modulo di contatto.
       
Name: $name
Email: $email
Message: $message
        ";  

        //Defining mail settings admin

        $to = "mail@mail";
        $subject = "Form submission sent";
        $headers = "From: $email";
        $confirm = "./thankyou";

            if(isset($name)) {
                mail($to,$subject,$emailmessage,$headers);
                echo "<META HTTP-EQUIV=\"refresh\" content=\"0;URL=".$confirm."\">";
            }
}
}
?>
 
Ciao, puoi provare direttamente con php
PHP:
<input id="name" class="field" type="text" name="name" required value="<?php isset($_REQUEST['name']) ? $_REQUEST['name'] : ""; ?>"/>
: se è stato inviato il nome lo scrive nel value altrimenti non scrive niente.
Devi però togliere le funzioni che hai scritto per la session storage
 
Utilizzando localStorage.... ma credo tu abbia sbagliato sezione, dovresti postare su JS e non in PHP
 
Ultima modifica:
potresti definire nel form un campo "hidden" che,
quando il form é caricato allo stato iniziale (senza errori) abbia valore zero,
mentre se caricato dopo un errore abbia valore 1,
in questo modo puoi gestire la valorizzazione dei campi

probabilmente puoi anche gestire la valorizzazione con una variabile trattata nella "function reload" (invece del campo "hidden")

non riesco a produrre un esempio perché non vedo in che modo viene attivata la pagina con il form
 
Prova questo... Senza PHP!

(per esempio a causa del captcha errato),
dovresti effettuare il controllo del captcha prima di inviare il form!!


Codice:
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>TEST localStorage</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" rel="stylesheet" type="text/css" />
</head>
<body>


<div class="container">
    <form method="post" id="send_data">
        <div class="field">
            <label class="label">Name</label>
            <div class="control">
                <input class="input set_from_local" data-connect="name" name="name" type="text" placeholder="Text input">
            </div>
        </div>
        <div class="field">
            <label class="label">Username</label>
            <div class="control has-icons-left has-icons-right">
                <input class="input is-success set_from_local" data-connect="username" name="username" type="text" placeholder="Text input" value="">

            </div>
        </div>
        <div class="field">
            <label class="label">Email</label>
            <div class="control has-icons-left has-icons-right">
                <input class="input is-danger set_from_local" data-connect="email" name="email" type="email" placeholder="Email input" value="">
            </div>
        </div>
        <div class="field is-grouped">
            <div class="control">
                <button class="button is-link">Submit</button>
            </div>

        </div>
    </form>

</div>
<script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script>

    $(document).ready(function(){
        var data={};
        var inputs=$('.set_from_local');
        var form=$('#send_data');
        //nome da assegnare al local storage
        var key_name='key_name',
            max_time=30000;
        /**
         *
         * @param storage Chiave local storage
         * @param max_time Tempo massimo della localStorage per la chiave selezionata
         */
        function find_storage(storage,max_time){
            var data=get_local(storage);
            if(data!==null && data.time+max_time>=$.now()){
                load_data(data);
            }else{
                window.localStorage.removeItem(storage);
            }
        }
        //attivatore
        find_storage(key_name,max_time);
        function load_data(data){
            for(var i in data.data){
                $('input[name="'+data.data[i].name+'"]').val(data.data[i].value);
            }
        }
        //invio del form
        // vengono memorizzati i dati in local e viene inviato il form
        form.on('submit',function(e){
           e.preventDefault();
            data=$('#send_data').serializeArray();
           var LocalStoragedata={data:data,time:$.now()};
           store_local(JSON.stringify(LocalStoragedata),key_name);
           form[0].submit();
           e.stopImmediatePropagation();
        });
        //setta la local
        function store_local(data,key_name){
            window.localStorage.setItem(key_name,data);
        }
        //ottiene la local
        function get_local(key_name){
            var local=window.localStorage.getItem(key_name);
            if(local===null)return null;
            else return $.parseJSON(local);
        }
    });
</script>
</body>
</html>
 
Ultima modifica:

Discussioni simili