Skip to main content
se añadieron 9536 caracteres en el cuerpo
Origen Enlace
maraet
  • 211
  • 5
  • 23

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>

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>
Origen Enlace
maraet
  • 211
  • 5
  • 23

Anular recarga de página Javascript

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?