I have the problem that wire: model and Javascript reload me at the beginning of the section and I can’t find how to solve it.
I would be very grateful if someone can give me some guidance.
The site has several sections in the same HTML. It’s a form step by step.
<fieldset>
<div class="form-card">
<h2 class="fs-title">Descripción</h2>
<div wire:model="categoria" class="form-group">
<label for="categoria">¿Que desea hacer?</label>
<select class="form-control" id="categoria">
<option value=''>Seleccionar categoria</option>
@foreach($categorias as $categoria)
<option value="{{$categoria->id}}">{{ $categoria->nombre_categoria }}</option>
@endforeach
</select>
</div>
@error('categoria') <span style="color:red"> {{ $message }} </span> @enderror
<input type="button" name="previous" class="previous action-button-previous" value="Atrás" />
<input type="button" name="next" class="next action-button" value="Continuar" />
</fieldset>
JAVASCRIPT
<script>
$(document).ready(function() {
var current_fs, next_fs, previous_fs; //fieldsets
var opacity;
$(".next ").click(function() {
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//Add Class Active
$(".progressbar li ").eq($("fieldset ").index(next_fs)).addClass("active ");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
next_fs.css({
'opacity': opacity
});
},
duration: 600
});
});
$(".previous ").click(function() {
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//Remove class active
$(".progressbar li ").eq($("fieldset ").index(current_fs)).removeClass("active ");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
previous_fs.css({
'opacity': opacity
});
},
duration: 600
});
});
$('.radio-group .radio').click(function() {
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
});
$(".submit ").click(function() {
return false;
})
});
</script>