1

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>
3
  • Puedes incluir el HTML que esta relacionado a este codigo? existe un form que encierra los botones? que tipo de elemento es el boton 'Next' (input button/submit)?
    – F.Igor
    Commented el 24 ago. 2020 a las 17:24
  • En el clic del botón submit cambia return false; por event.preventDefault();
    – Triby
    Commented el 24 ago. 2020 a las 17:29
  • Adicione el código HTML. el form lo tengo pero no lo utilizo. Next es button. Y event.preventDefault(); lo agregué a todos los eventos
    – maraet
    Commented el 24 ago. 2020 a las 17:47

3 respuestas 3

1

El problema no está en el código que publicaste, agregué estilos para mostrar solo el primer fieldset y funciona correctamente.

Avísame cuando veas esto, para eliminar o modificar la respuesta, porque realmente no proporciona solución a tu problema.

$(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;
        })

    });
fieldset { display:none; }
fieldset:first-of-type { display:block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

2
  • Agradezco inmensamente tu dedicación. Si me dí cuenta que el problema es livewire cada wire:model que toma los datos genera un evento que hace reiniciar la pagina. No es Javascript. Estoy luchando con este tema por que llené mi proyecto de livewire y ahora me di cuenta que genera este problema.
    – maraet
    Commented el 24 ago. 2020 a las 22:51
  • Edita la pregunta para poner el HTML que ves en el navegador con "Ver origen de página" o "Ver código fuente de esta página", probablemente se pueda solucionar con un poco de Javascript
    – Triby
    Commented el 24 ago. 2020 a las 23:01
0

Para que event.preventDefault() funcione, debes recibir la variable event en la llamada a la función:

$(".next ").click(function(event){
    event.preventDefault();
    //Resto del código aquí abajo
});

Asegúrate de que el botón donde haces el click tenga type="button", si no le especificas un tipo, por defecto será type="submit", que siempre hace un refresh.

4
  • si bien funciona el continuar el refresh de la página se me dispara igual.
    – maraet
    Commented el 24 ago. 2020 a las 17:06
  • El botón donde haces click es type="button"? Si no es así, prueba a ponérselo, ya que un botón sin type siempre será type="submit" por defecto
    – Benito-B
    Commented el 24 ago. 2020 a las 17:09
  • Si todos los botones son type="button" el problema me sucede mezclado con laravel livewire. ¿Los select tienen la propiedad submit?
    – maraet
    Commented el 24 ago. 2020 a las 17:30
  • No he trabajado nunca con livewire, prueba a añadir un return false al final del método, eso suele funcionar por ejemplo en jQuery para interrumpir el flujo de eventos
    – Benito-B
    Commented el 24 ago. 2020 a las 19:33
0

Si el boton esta contenido en otro elemento clickable que encierre a este boton, puede necesitar event.preventDefault(), para cancelar otros clic:

$(".next").click(function(event) {
    event.preventDefault();
});

De otro modo, si el boton esta en un formulario y el boton es de tipo submit (<button></button> o <input type="submit">) se debe cancelar el evento de submit.

$("form").submit(function(e){
        e.preventDefault();
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.