Save input data without submitting

2

My problem is that I am doing a business registration, in this register I have the field Activity branch that has a combo with the branches of activities registered in the database, the problem is when we have to include a new branch of activities. In this case, I have a button that opens a new window to perform this registration, after the registration has been completed it gives a reload (refresh) on the main register page and it is at this moment that I lose the information.

I wanted to know if it is possible to keep the form information somehow after I registered the new activity branch, that when I returned to the main register page I would return with the values that were filled in before.

    
asked by anonymous 14.11.2018 / 12:25

1 answer

2

Hello, you can.

I made a simple code with comments that will help you understand how to do this:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>window.onload=function(){//UsodelocalStorage//varname=localStorage.getItem("name");
        //var email = localStorage.getItem("email");
        //var phone = localStorage.getItem("phone");
        var name = sessionStorage.getItem("name");
        var email = sessionStorage.getItem("email");
        var phone = sessionStorage.getItem("phone");
        if (name !== null) $('#inputName').val(name);
        if (email !== null) $('#inputEmail').val(email);
        if (phone !== null) $('#inputPhone').val(phone);

}

function myFunction() {
    //Uso de localStorage
    //window.localStorage.setItem("name", $('#inputName').val());
    //window.localStorage.setItem("email", $('#inputEmail').val());
    //window.localStorage.setItem("phone", $('#inputPhone').val());
    sessionStorage.setItem("name", $('#inputName').val());
    sessionStorage.setItem("email", $('#inputEmail').val());
    sessionStorage.setItem("phone", $('#inputPhone').val());
    location.reload(true);
}

</script>

</head>
<body>

<div class="form-actions">
        <form>
            <table cellpadding = "5" cellspacing ="10">
                <tr class="control-group">
                    <td style="width: 100px;">
                        <div>Name:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input type="text" id="inputName" placeholder="Nome" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Email:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input class="span3" placeholder="Email" id= "inputEmail" type="email" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Phone:&nbsp;</div>
                    </td>
                    <td>
                        <input type="text" id="inputPhone" placeholder="Telefone">
                    </td>
                </tr>

                <tr>
                    <td colspan="2">
                        <div align="center">
                            <button id="btnConfirm" class="btn btn-primary" onclick="myFunction();">Carregar a página</button>
                            <input type="reset" value="Limpar" id="btnReset" class="btn"/>
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>


</body>
</html> 

Note: Just copy this paste code into a .html file to test locally.

Good studies and hope to have helped!

    
14.11.2018 / 15:49