store values and display them in another field

Question

people developed this website and in the indenizometro part there is a fade.js where when the user clicks on one of the buttons it takes him to the next step

when doing this will appear a small form that he will have to enter this information and when clicking next he will take this information and insert it in the next step only that do not know how to do this is possible ?

the input information will be displayed in this step below

NOTE: it will not be stored in bank is only to display at the same time. need to do this via jQuery or JS

Follow my php and js code:

PHP:

 <div class="box-informations">
                                <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                    tempor
                                    incididunt ut labore et dolore magna aliqua</p>
                                <h4 class="subtitle">Selecione a causa: <i class="fa fa-question-circle"
                                                                           aria-hidden="true"></i>
                                </h4>
                                <ul class="list-unstyled list-inline indenizometro-list">
                                    <li class="list"><a class="link -morte">Morte</a></li>
                                    <li class="list"><a class="link -invalidez">Invalidez</a></li>
                                </ul>
                            </div>

                            {{--Event morte--}}
                            <div class="box-informations-morte">
                                <h4 class="title">Causa: <span>Morte</span></h4>
                                <p class="subtitle">Insira os dados do paciente</p>
                                <div class="form-group row">
                                    <div class="col-sm-6 col-xs-6">
                                        <input type="text" name="mail" class="form-control" id="mail"
                                               placeholder="DIGITE A IDADE"/>
                                    </div>

                                    <div class="col-sm-6 col-xs-6">
                                        <input type="phone" name="phone" class="form-control" id="phone"
                                               placeholder="SALARIO ATUAL"/>
                                    </div>
                                </div>
                                <a class="btn-next-morte">Próximo</a>
                            </div>

                            <div class="box-protected-morte">
                                <img src="img/info-segurado.png" class="img-responsive img-segurado"/>
                                <p class="subtitle">Valor da indenização</p>
                                <h3 class="price"><span>R$</span>35.000,00</h3>

                                <a href="{!! route('indenizometro') !!}" class="btn-protected-morte">Proteja-se!<br/><span>Avançe para avaliar seu seguro</span></a>
                            </div>
                            {{--End event morte--}}

                            {{--Evend invalidez--}}
                            <div class="box-informations-invalidez">
                                <h4 class="title">Causa: <span>Invalidez</span></h4>
                                <p class="subtitle">Insira os dados do paciente</p>
                                <div class="form-group row">
                                    <div class="col-sm-6 col-xs-6">
                                        <input type="text" name="mail" class="form-control" id="mail"
                                               placeholder="DIGITE A IDADE"/>
                                    </div>

                                    <div class="col-sm-6 col-xs-6">
                                        <input type="phone" name="phone" class="form-control" id="phone"
                                               placeholder="SALARIO ATUAL"/>
                                    </div>
                                </div>
                                <a class="btn-next-invalidez">Próximo</a>
                            </div>

                            <div class="box-protected-invalidez">
                                <img src="img/info-segurado-2.png" class="img-responsive img-segurado"/>
                                <p class="subtitle">Valor da indenização</p>
                                <h3 class="price"><span>R$</span>25.000,00</h3>

                                <a href="{!! route('indenizometro') !!}" class="btn-protected-invalidez">Proteja-se!<br/>
                                    <span>Avançe para avaliar seu seguro</span>
                                </a>
                            </div>
                            {{--End Event invalidez--}}

JS:

$(document).ready(function(){
    $(".box-informations-morte").hide();
    $(".box-protected-morte").hide();
    $(".box-informations-invalidez").hide();
    $(".box-protected-invalidez").hide();

    //morte
    $(".-morte").click(function(){
        $(".box-informations").hide();
        $(".box-informations-morte").fadeToggle('slow');
    });

    $(".btn-next-morte").click(function(){
        $(".box-informations").hide();
        $(".box-informations-morte").hide();
        $(".box-protected-morte").fadeToggle('slow');
    });
    //end morte

    //invalidez
    $(".-invalidez").click(function(){
        $(".box-informations").hide();
        $(".box-informations-invalidez").fadeToggle('slow');
    });

    $(".btn-next-invalidez").click(function(){
        $(".box-informations").hide();
        $(".box-informations-invalidez").hide();
        $(".box-protected-invalidez").fadeToggle('slow');
    });
    //end invalidez

Answer 1

Opa, you can use Localstorage or Sessionstorage to store this and recover it later. Follow an example

$('.tipo').on('click', function(){
   sessionStorage.setItem('tipo', $(this).attr('data-tipo'));
})
$('.btn').on('click', function(){
    sessionStorage.setItem('nome', $('input[name=nome]').val());
    sessionStorage.setItem('idade', $('input[name=idade]').val())
    $('.result').append('<p>'+sessionStorage.nome +' - '+ sessionStorage.idade +'</p>')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" placeholder="Nome" name="nome">
<input type="text" placeholder="Idade" name="idade">
<a class="tipo" data-tipo="Invalidez">Invalidez</a>
<a class="tipo" data-tipo="Morte">Morte</a>
<button class="btn">VAMOS LÁ</button>
<div class="result"></div>