TransWikia.com

javascript formulario autocompletado bugea el campo select

Stack Overflow en español Asked by ELE on December 7, 2021

gracias por leer mi post, tengo un formulario , con dos campos , regiones y países, el cual es dinámico. Es decir, Si seleccionan Europa, en el desplegable de Países solo se muestran los de esa región.

Pero, tengo un problema, y es cuando los usuarios pueden autocompletar el formulario, se les rellena solo, y seleciona Europa, en ese caso, el javascript no detecta que se ha seleccionado Europa y se queda sin mostrar los países de esa región.
Está hecho en woocommerce, y no puedo usar php para hacer estos campos de forma dinámico.

¿ alguna ayuda ? gracias de antemano
introducir la descripción de la imagen aquí

<script type="text/javascript">
  (function($)

{
var paises = new Array()
    paises.push(["Elige país","España","Portugal","Alemania", "Francia","Inglaterra", "Otros Europa"]);
    paises.push(["Elige país","Argentina","Colombia","Perú", "Otros América del Sur y Norte"]);
    paises.push(["Elige país","México"]);
    paises.push(["Elige país","Miami", "Otros de Estados Unidos"]);

$('#region').change(function(){
    var seleccionado = $('#region').val();
  
  switch(seleccionado){
    case "1":
        var opciones = crearOptions(paises[0]);
      $('#pais option').remove();
        $('#pais').html(opciones);
    break;
    case "2":
      var opciones = crearOptions(paises[1]);
      $('#pais option').remove();
        $('#pais').html(opciones);
    break;
    case "3":
      var opciones = crearOptions(paises[2]);
      $('#pais option').remove();
        $('#pais').html(opciones);
    break;
    case "4":
      var opciones = crearOptions(paises[3]);
      $('#pais option').remove();
        $('#pais').html(opciones);
    break;
  }
});
function crearOptions(obj){
    var html = "";
  $.each(obj, function(item,value){
    html += '<option value ="' + value + '">' + value + '</option>'
  });
  return html;
}
  })( jQuery );
  </script>

One Answer

Para "escuchar" los cambios del select tienes una función anónima que no se puede llamar. La opción es crear la función aparte que puedas llamar cuando se realizan cambios, al carga la página o en otro evento definido por ti.

Se definen variables y funciones en contexto global para permitir acceso en caso de que necesites acceder desde otra función o evento.

<script>
/* Definir variables y funciones en contexto global */
var paises = new Array()
paises.push(["Elige país","España","Portugal","Alemania", "Francia","Inglaterra", "Otros Europa"]);
paises.push(["Elige país","Argentina","Colombia","Perú", "Otros América del Sur y Norte"]);
paises.push(["Elige país","México"]);
paises.push(["Elige país","Miami", "Otros de Estados Unidos"]);

// Función que se ejecuta con el evento onchange
// O manualmente
function regionUpdate() {
    // Eliminar países
    $('#pais option').remove();
    let seleccionado = parseInt($('#region').val()) || 0;
    // Se seleccionó una región válida?
    if(seleccionado > 0 && seleccionado <= paises.length) {
        let opciones = crearOptions(paises[seleccionado - 1]);
        $('#pais').html(opciones);
    }
}

function crearOptions(obj){
    var html = "";
    $.each(obj, function(item, value){
        html += '<option value ="' + value + '">' + value + '</option>'
    });
    return html;
}

// Ejecutar hasta que el DOM se haya cargado
(function($){
    // Asignar evento onchange, ejecutando la función definida arriba
    $('#region').change(regionUpdate);
    
    // Actualizar países al cargar la página
    regionUpdate();
})( jQuery );
</script>

Esto te resuelve el problema de mostrar los países cuando tienes un valor predeterminado en región, sin embargo, seguramente también necesitarás que se seleccione un país y se complica porque las opciones no existen hasta que se revisa el valor de región.

Cuando creas el contenido en PHP puedes definir una variable de javascript que será usada para seleccionar el país, por ejemplo:

// Esto es solo un ejemplo de cómo creas los selects
// Solo para ilustrar dónde colocar el código
echo "<select name="region" id="region">... opciones ...</select>";
echo "<select name="pais" id="pais"></select>";

// Aquí creas la variable con el país seleccionado
// Ya sea que lo obtengas de $_POST, $_GET, usuario, sesión, etc.
if($pais != '') {
    echo "<script>let paisActual = '$pais';</script>";

}

En Javascript verificas si existe la variable para asignar el valor al select:

// Ejecutar hasta que el DOM se haya cargado
(function($){
    // Asignar evento onchange, ejecutando la función definida arriba
    $('#region').change(regionUpdate);
    
    // Actualizar países al cargar la página
    regionUpdate();

    // Existe la variable paisActual y no está vacía?
    if(paisActual && paisActual != '') {
        // Asignas el valor
        $('#pais').val(paisActual);
    }
})( jQuery );
</script>

Answered by Triby on December 7, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP