0

Tengo un select (HTML) y cuando se elige una opción, se carga un formulario vía JS abajo del select.

Luego, envío el formulario para guardar los datos que necesito, se recarga la página y el formulario desaparece.

Lo que necesito es mantener la opción elegida en el select y que el formulario se vea.

Estoy trabajando en laravel por las dudas y también angular.

Gracias.

1
  • 1
    ¿Por qué simplemente no usas AJAX para enviar el formulario? Así mantienes el formulario visible.
    – gugadev
    el 10 feb. 2017 a las 15:23

2 respuestas 2

1

En un lenguaje de servidor como Laravel (framework de PHP) puedes guardar variables en la sesión por ejemplo y a la hora de cargar la página decidir en función de la variable de la sesión si quieres mostrar algo, cargar... Aquí una referencia a StackOverflow en inglés.

También (si usas HTML5) puedes utilizar web storage. Aquí la referencia de la W3C.

Por último mediante una variable en la URL puedes hacerlo. Ejemplo:

http://miweb.com/mipagina.php?opcionSelect=1

Así podrás al momento de cargar tu página establecer en el el valor que trae la variable.

2
  • Esta bien, eso lo entiendo, pero yo tengo un div oculto, y cuando elijo algo del select (envio un post via ajax) , ahí se muestra ese div (formulario). De la forma que vos decís, no se como tomar el evento del select y mostrar el formulario al recargar la página el 10 feb. 2017 a las 15:18
  • Podrías añadir código a la consulta y poder ayudarte mejor? @JuanPabloB el 10 feb. 2017 a las 15:22
1

Envío el formulario para guardar los datos que necesito, se recarga la página y el formulario desaparece. Lo que necesito es mantener la opción elegida en el select y que el formulario se vea.

Hacerlo de esa manera no le brinda una buena UX al usuario. Si usas angular debes aprovechar lo que te brinda para hacer una aplicación rica en UX y funcionalidad. Lo que deseas hacer se puede lograr simplemente usando AJAX. Angular provee el módulo http para ésto.

$scope.crearAlgo = function () {
  $http.post('//localhost/app/controlador/crear', $scope.nuevoAlgo)
    .then(function (response) => {
      alert('Algo creado satisfactoriamente');
      // asignar un objeto vacío a 'nuevoAlgo' para resetear sus valores
      $scope.nuevoAlgo = {};
    });
}

En el formulario HTML ligas cada control con una propiedad de nuevoAlgo.

<input type="text" ng-model="nuevoAlgo.nombre"/>
<input type="text" ng-model="nuevoAlgo.apellidos"/>
<input type="text" ng-model="nuevoAlgo.email"/>

Lo que pasará es lo siguiente:

  1. Conforme escribas en los inputs, el valor será asignado a la propiedad ligada mediante ng-model.
  2. Se envía el formulario mediante AJAX.
  3. Cuando el servidor haya respondido, restablecemos el objeto y por ende, los inputs.

Ejemplo

var app = angular.module('myApp', []);

app.controller('formCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.user = { };
  $scope.option = ''; /* para mostrar/ocultar el formulario */
  $scope.create = function () {
    // lo comento porque no es posible hacer peticiones AJAX en el sitio
    /*$http.post('//localhost/ejemplo/usuarios/crear', $scope.user
    )
    .then(function (response) {
       $scope.user = {};
    });*/
    $scope.user = { };
  }
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

<div ng-app="myApp" ng-controller="formCtrl">
  <select ng-model="option">
    <option value="">Seleccionar</option>
    <option value="show">Mostrar</option>
  </select>
  
  <form ng-show="option == 'show'">
    <input type="text" ng-model="user.name" />
    <input type="text" ng-model="user.lastname" />
    <input type="button" ng-click="create()" value="Registrar"/>
  </form>
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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