Opción seleccionada en el menú desplegable del correo electrónico

11 Jun, 2023 Programación 0

Estoy tratando de obtener el valor seleccionado por el usuario en mi formulario desplegable para enviarlo con mi correo electrónico.

Los valores son generados con este código:

function wpb_hook_javascript() {
?>
<script type="text/javascript">
    var myDiv = document.getElementById("myDiv");
    var selectList = document.createElement("select");
    selectList.id = "mySelect";
    myDiv.appendChild(selectList);
    var activite = document.querySelectorAll(".info-box-content h3");
    console.log (activite);
    for (var i = 0; i < activite.length; i++) {
        var array = activite[i].innerText;
        console.log (array);
        var option = document.createElement("option");
        option.value = array;
        option.text = array;
        selectList.appendChild(option);
    }
    console.log ("retour var array : " + array);
</script>
<?php
}
add_action('wpforms_wp_footer', 'wpb_hook_javascript');

Con él, obtengo los distintos valores en mi página en la clase info-box-content como h3 y los convierto en opciones para mi formulario desplegable insertado en el DIV myDiv de mi formulario.

Con el siguiente código, quiero agregar el bloque HTML con el DIV myDiv en mi correo electrónico de notificación:

function wpf_dev_email_display_other_fields( $fields ) {
    return array( 'divider', 'pagebreak', 'html' );
}
add_filter('wpforms_email_display_other_fields', 'wpf_dev_email_display_other_fields', 10, 1 );

Todo funciona bien excepto que el valor seleccionado por el usuario no aparece en el contenido del correo electrónico.

davy.ai

June 11, 2023 at 5:46 am

Para obtener el valor seleccionado por el usuario en el formulario de selección desplegable que se enviará con su correo electrónico, es necesario agregar un script que escuche el evento de cambio en el elemento select y almacene el valor seleccionado en un campo input oculto en el formulario. Luego, en la notificación de correo electrónico, puede incluir el valor de este campo oculto.

Aquí está el código actualizado:

función wpb_hook_javascript() {
?>
    <script type="text/javascript">
        var myDiv = document.getElementById("myDiv");
        var selectList = document.createElement("select");
        selectList.id = "mySelect";
        myDiv.appendChild(selectList);
        var activite = document.querySelectorAll(".info-box-content h3");
        console.log(activite);
        para (var i = 0; i <activite.length; i ++) {
            var matriz = activite [i] .innerText;
            console.log(matriz);
            var opción = document.createElement ("opción");
            opción.value = matriz;
            opción.texto = matriz;
            selectList.appendChild (opción);
        }

        // Agregar listener del evento de cambio en el elemento select
        selectList.addEventListener ('change', function () {
            var hiddenInput = document.getElementById ("selectedOption");
            hiddenInput.value = selectList.value;
        });

        console.log ("retorno var matriz: "+ matriz);
    </script>
<?php
}
add_action ('wpforms_wp_footer', 'wpb_hook_javascript');

// Agregar un campo oculto para almacenar el valor de la opción seleccionada
function wpb_add_hidden_input ($fields) {
    $fields [] = array (
        'input_id' => 'selectedOption',
        'type' => 'hidden',
    );
    return $fields;
}
add_filter ('wpforms_field_properties', 'wpb_add_hidden_input');

// Agregar el campo oculto a la notificación de correo electrónico
function wpf_add_hidden_input_to_email ($fields, $notification) {
    $fields [] = array (
        'nombre' => 'Opción seleccionada',
        'valor' => $POST_ ['selectedOption'],
        'is_visible' => true,
    );
    return $fields;
}
add_filter ('wpforms_email_format_value', 'wpf_add_hidden_input_to_email', 10, 2);

Este código escucha el evento de cambio en el elemento select y almacena el valor seleccionado en un campo input oculto con el ID “selectedOption”. Luego, en la notificación de correo electrónico, agrega el valor de este campo oculto como un nuevo campo llamado “Opción seleccionada”. Esto debería incluir el valor seleccionado en el contenido del correo electrónico.

es.davy.ai

¿Tienes una pregunta?

Opción seleccionada en el menú desplegable del correo electrónico

Answer

davy.ai