es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Javascript para hacer que las cadenas de consulta autocompleten un formulario.

14 Jul, 2023 Programación

Tengo muy poca experiencia en programación, pero generalmente aprendo rápido y he estado buscando cosas pieza por pieza para aprender cómo crear algunas cosas simples que necesito para una página web. Quiero poder completar automáticamente un formulario utilizando cadenas de consulta en mi URL (es decir, para que example.com?color=azul cargue automáticamente el formulario con la opción “azul” ya completada en la sección de formulario llamada “color”).

Aquí está la parte de mi código HTML que crea el formulario:

<form id="wsite-com-product-options">
    <div class="wsite-com-product-option-groups">   
        <div class="wsite-com-product-option wsite-com-product-option-dropdown" data-type="dropdown" data-option-name="Photo">
            <label class="wsite-com-product-label " for="wsite-com-product-option-Photo">
                <b class="wsite-com-product-title">Photo</b>
            </label>
            <select id="wsite-com-product-option-Photo" class="wsite-field " name="Photo">
                <option selected="selected" value="">--</option>
                    <option class="wsite-com-dropdown" value="Pelicans">
                        Pelicans                                
                    </option>
                    <option class="wsite-com-dropdown" value="Dolphins">
                        Dolphins
                    </option>
                    <option class="wsite-com-dropdown" value="Rams">
                        Rams
                    </option>
            </select>
        </div>
    </div>
</form>

Así que pensé que si escribía la URL de mi sitio web, seguida de ?Photo=Pelicans o ?Photo=Dolphins, ese formulario se completaría automáticamente con la respuesta “Pelicans” o “Dolphins”, respectivamente. Obviamente eso no funcionó, y mi comprensión ahora es que necesito algún código javascript para hacer que la cadena de consulta funcione de esa manera. Pero he estado intentando durante un par de semanas descubrir cómo hacerlo, examinando cada ejemplo de código relevante que pude encontrar línea por línea para tratar de entender lo que estaban haciendo, y nada de eso ha funcionado. ¿Hay algún código relativamente sencillo que pueda lograr esta función, o simplemente estoy completamente fuera de mi nivel como novato aquí?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, tienes razón en que necesitas código JavaScript para que funcione la cadena de consulta y se rellene automáticamente el formulario. Aquí tienes un ejemplo de código que puedes utilizar:

    // Obtener los parámetros de la cadena de consulta
const urlParams = new URLSearchParams(window.location.search);

// Obtener el valor del parámetro "Photo"
const photoValue = urlParams.get('Photo');

// Si el parámetro "Photo" existe, establecer el valor del campo del formulario como ese valor
if (photoValue) {
  const photoSelect = document.getElementById('wsite-com-product-option-Photo');
  photoSelect.value = photoValue;
}

    Puedes añadir este código al final de tu archivo HTML, justo antes de la etiqueta de cierre “. Este código primero obtiene los parámetros de la cadena de consulta usando el objeto URLSearchParams. Luego obtiene el valor del parámetro “Photo” utilizando el método get(). Si el parámetro existe, establece el valor del campo del formulario con el ID wsite-com-product-option-Photo como el valor del parámetro.

    Nota: Asegúrate de que el atributo id de tu campo del formulario coincida con el nombre del campo en el parámetro de la cadena de consulta. En este caso, el parámetro de la cadena de consulta es “Photo” y el campo del formulario tiene el nombre “Photo”.

Comments are closed.