store values and display them in another field

0

People have developed this site and in the indemnity part has a fade.js where when the user clicks on one of the buttons leads it to next step

Whendoingthiswillappearasmallformthathewillhavetoenterthisinformationandwhenclickingnexthewillgetthisinformationandinserttheminthenextstepbutdonotknowhowtodoitispossible?

inputinformationwillbedisplayedinthisstepbelow

NOTE:Itwillnotbestoredinabankisjusttodisplayatthesametime.IneedtodothisviajQueryorJS

Followmyphpandjscode:

PHP:

<divclass="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
    
asked by anonymous 11.07.2017 / 20:05

1 answer

1

Now, you can use LocalStorage or SessionStorage to store this and recover later. Here is 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><inputtype="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>
    
11.07.2017 / 20:11