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