Save input data without Submit

Asked

Viewed 357 times

1

My problem is that I am making a register of companies, in this register I have the field Branch of activities 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 registration page and it is at this point that I lose the information.

I was wondering if it’s possible to keep form somehow after I registered the new activity branch, when I returned to the main registration page return with the values that were filled before.

php javascript

  • Can use sessionStorage or localStorage for this.

  • Can you help me with an example of how to do it with one of the two ?

  • The ideal is to use Ajax in the new window and dynamically add a new item in the combo without refreshing the page.

  • @Kevin. F managed to use the example I created to help him ?

1 answer

1


Hello, is it possible yes.

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() {
        //Uso de localStorage
        //var name = 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 I hope I’ve helped!

  • It only stores locally if I click refresh button ?

  • In the example I did, for ease of understanding added in refresh button to capture the event "onClick" and perform the recording of values, you can adapt to your project.

  • But the idea is you understand what javascript is doing in this example.

  • Can you implement one more thing ? For example, can you store the data until you leave the page ? Because in this example it is stored even going back and forth of the page, I just need you to be saved when giving refresh.

  • When you leave the page you want to reset these values, that’s it?

  • That is, if you have the way after the rest I can already adapt in my project.

  • @Kevin. F, I made a change with what you want using sessionStorage, there is a small difference between localStorage and sessionStorage that you can better understand here: https://answall.com/questions/19384/diferen%C3%A7as-entre-localstorage-vs-sessionstorage? noredirect=1&lq=1 .

  • I tested here, I left the page I went to another I came back with the values loaded in the inputs, zeroed only at the time I closed the browser.

  • @Kevin. F hope I helped! If you think that the answer actually answers/solves the question, you have the option to accept it: see here (https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-accepta response) how and why to do so. Of course you are not obliged to accept any answer (only if you think you really answered the question), but this serves to indicate to future visitors that the answer solves/answers to what was asked. And good studies !

  • If you want to help me and keep me encouraged to help the stackoverflow community you could add this answer as useful, in addition more information about here: https://pt.meta.stackoverflow.com/questions/6139/votar-em-uma-boa-questiona-ou-uma-boa-resposta-%C3%A9-a-form-of-incentive.

Show 5 more comments

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.