Tengo un problema con el siguiente código de javascript, no conozco mucho sobre javascript pero me me di cuenta que me refresca la página y quisiera saber si hay algun experto en el tema que me pueda ayudar a evitar que esto suceda ya que al refrescar me regresa perdiendo los datos que requiero utilizar.
El problema es que cuando paso a la siguiente sección y quiero utilizar cualquier input o form me al introducir un dato me regresa a la sección principal.
Es un formulario paso a paso en la misma página.
<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>
Intenté agregar la anulación del evento de la siguiente manera.
event.preventDefault();
Pero no me funciona el botón next. Hay forma de solucionar este problema?
EDICIÓN
Código HTML (Si bien está ordenado aquí se hace complicado de leer)
<ul class="progressbar ocultamosEnElCelular">
<li class="active" id="account"><strong>Ubicación</strong></li>
<li id="personal"><strong>Descripción y precio</strong></li>
<li id="payment"><strong>Multimedia</strong></li>
<li id="caracteristicas"><strong>Características</strong></li>
<li id="datos"><strong>Datos Personales</strong></li>
<li id="confirm"><strong>Finalizar</strong></li>
</ul>
<!-- TIPO PROPIEDAD UBICACION -->
<fieldset>
<div class="form-card">
<h2 class="fs-title">Tipo de propiedad y ubicación</h2>
<br>
<div class="form-group">
<label for="tipodepropiedad">Tipo de propiedad</label>
<select wire:model="tipo_de_propiedad" class="form-control" id="tipodepropiedad">
@foreach($propiedades as $propiedad)
<option value="{{$propiedad->id}}">{{ $propiedad->tipo_propiedad }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="provincia">Provincia</label>
<select wire:model="ubicacionSeleccionada" class="form-control" id="ubicacion">
<option value=''>Seleccionar provincia</option>
@foreach($ubicaciones as $ubicacion)
<option value="{{$ubicacion->id}}">{{ $ubicacion->ubicacion }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="tipopropiedad">Localidad</label>
<select wire:model="area" class="form-control" id="localidad
{{ count($this->areas)== 0 ? 'hidden' : '' }} ">
<option value=''>Seleccionar localidad</option>
@foreach($this->areas as $area)
<option value={{ $area->id }}>{{ $area->name }}</option>
@endforeach
</select>
</div>
</div>
<input type="button" name="next" class="next action-button" value="Continuar" />
</fieldset>
<!-- END TIPO PROPIEDAD UBICACION -->
<!-- DESCRIPCION -->
<fieldset>
<div class="form-card">
<h2 class="fs-title">Descripción</h2>
<div class="form-group">
<label for="categoria">¿Que desea hacer?</label>
<select wire:model="categoria" 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>
<div class="form-group">
<label for="nombre">Nombre de la publicación</label>
<input wire:model="nombre_propiedad" class="form-control" type="text" placeholder="Casa en alquiler en Tigre" maxlength="80" id="nombre_propiedad_front">
<small class="float-right text-danger" id="contador-propiedad"></small>
<small>Título descriptivo de la publicación</small>
</div>
</div>
<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>
<!-- DESCRIPCION -->
<fieldset>
<div class="form-card">
<h2 class="fs-title text-center">¡Felicitaciones!</h2>
<div class="row justify-content-center">
<svg width="2em " height="2em " viewBox="0 0 16 16 " class="bi bi-check2-all text-success" fill="currentColor " xmlns="http://www.w3.org/2000/svg ">
<path fill-rule="evenodd " d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z "/>
<path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543-.707.707z "/>
</svg>
</div> <br><br>
<h2 class="fs-title text-center">¿Como te gustaría publicar?</h2>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Anuncio pago</h5>
<p class="card-text">Obtiene mejor visibilidad</p>
<p class="card-text">Llega a un volumen mayor de interesados</p>
<p class="card-text">Recibe más contactos</p>
<a href="#" class="btn btn-primary">Comprar anuncio</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Aviso gratis</h5>
<p class="card-text">Se ubica por debajo de los avisos simples en el listado de resultados</p>
<p class="card-text">Puedes aumentar la exposición cuando lo requieras.</p>
<p class="card-text">Periodo de tiempo determina</p>
<a href="#" type="button" class="btn btn-primary" wire:click="crearPublicacion()">Publicar</a>
<br>
<div>
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
form
que encierra los botones? que tipo de elemento es el boton 'Next' (input button/submit)?return false;
porevent.preventDefault();