我使用laravel blade和jquery,
我想用几个步骤制作一个表单,
除下一个按钮外,其他所有功能均正常工作,当我在第一个字段集中使用它时可以,但是在第二个字段中不再起作用,我的意思是当我第二次单击时没有任何反应,有人可以检查我的代码或给出提示吗? / p>
@section('content')
<div class="page-content get-a-quote get-a-quote-2">
<div class="container-fluid">
<div class="row p-5 bg-whitesmoke">
{!! Form::open(['route' => '','class'=> 'col-12']) !!}
<!-- start -->
<!-- step-1 -->
<fieldset>
<h3 class="text-capitalize">profil</h3>
<div class="bg-white p-5">
<!-- full name -->
<div class="form-group row ">
<label for="inputEmail3" class="col-sm-4 col-form-label">Nom et prénom</label>
<div class="col-sm-8">
{{ Form::text('nom_et_prenoms', null, ['class' => 'form-control']) }}
</div>
</div>
<!-- next boutton -->
<div class="form-group row">
<div class="col-sm-10">
<button type="button" class="btn btn-primary" id="next_btn">Suivant</button>
</div>
</div>
</div>
</fieldset>
<!-- step-2 -->
<fieldset>
<h3 class="text-capitalize">Coordonnées</h3>
<div class="bg-white p-5">
<div class="form-group row ">
<label for="inputEmail3" class="col-sm-4 col-form-label">email
</label>
<div class="col-sm-8">
{{ Form::email('email', null, ['class' => 'form-control', 'required']) }}
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="button" class="btn btn-primary" id="prev_btn">Précédent</button>
<button type="button" class="btn btn-primary" id="next_btn">Suivant</button>
</div>
</div>
</div>
</fieldset>
<!-- step-2 -->
<fieldset>
<h3 class="text-capitalize">assurance</h3>
<div class="bg-white p-5">
<div class="form-group row ">
<label for="inputEmail3" class="col-sm-4 col-form-label">Date de début
</label>
<div class="col-sm-8">
{{ Form::date('date_de_debut', \Carbon\Carbon::now(), ['class' => 'au-form-control au-form-radius', 'required', 'placeholder'=> 'jj-mm-aaaa']) }}
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="button" class="btn btn-primary" id="prev_btn">
précédent
</button>
<button type="submit" class="btn btn-primary" id="submit_btn">
Lancer le simulateur
</button>
</div>
</div>
</div>
</fieldset>
<!-- end -->
{!! Form::close() !!}
</div>
</div>
</div>
@endsection
我的javascript(jquery):
$(document).ready(function(){
var current_fs, next_fs, previous_fs; //fieldsets
$("#next_btn").click(function() {
current_fs = $(this).parents('fieldset');
next_fs = $(this).parents('fieldset').next();
//show the next fieldset
next_fs.show();
// hide the current fieldset
current_fs.hide();
});
$("#prev_btn").click(function() {
current_fs = $(this).parents('fieldset');
previous_fs = $(this).parents('fieldset').prev();
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.hide();
});
});
答案 0 :(得分:1)
(此处不是laravel用户)
您应避免使用多个#next_btn
这样的ID。
请尝试使用类.next-btn
,当单击第二个字段集中的下一个btn时,它可以修复onclick来检索step3字段集。
注意:同样,将$(this).parents('fieldset')
的第n次使用替换为您创建的current_fs
的变量。