0
105
VistasFormulario de contacto de Wordpress 7 campo desplegable de selección automática dinámica en función de la URL de referencia
He estado trabajando con estas dos respuestas:
El formulario de contacto de Wordpress 7 selecciona dinámicamente el campo desplegable según la URL
Campos de selección automática en el formulario de contacto 7 según el enlace de referencia
Actualmente, el siguiente código está pegado en el bloque CSS en la página /contacto:
(function($){ $(document).ready(function() { //determine the previous page, let page = document.referrer, opt=''; switch(true){ case page.indexOf('douglas-h-flint')>0: opt='douglashflint'; break; case page.indexOf('john-f-connolly')>0: opt='johnfconnolly'; break; case page.indexOf('david-l-walker-jr')>0: opt='davidlwalkerjr'; break; } $('select[name=“select-recipient”]').find('option[value="'+opt+'"]').prop('selected', 'selected'); }) })(jQuery); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="select-recipient”> <option value="">General Inquiry</option> <option value=“douglashflint”>Douglas H. Flint</option> <option value=“johnfconnolly”>John F. Connolly</option> <option value=“davidlwalkerjr”>David L. Walker, Jr.</option> </select>Mi sitio web es: https://c7n.f22.myftpupload.com/
Mi objetivo es que cuando alguien navegue a la página /contacto directamente desde una de las páginas individuales de estas personas: (/abogados/douglas-h-flint) o (/abogados/john-f-connolly) o (/abogados/david-l -walker-jr): que el campo desplegable "Consultar con:" en el formulario de contacto seleccionaría automáticamente su nombre respectivo y que cuando alguien navega a la página /contacto desde cualquier otra página del sitio, el campo desplegable "Consultar con:" permanecería por defecto en la opción "Consulta general".
¿Qué me estoy perdiendo? O que estoy haciendo mal?
¡Gracias de antemano por cualquier ayuda!
2 Respuestas
Responde la pregunta0
Mire las citas con estilo divertidas ( ' , ' , “ y ” ) que tiene. Esos romperán JS. Elimínelos del marcado HTML y CSS también.
Más allá de eso, el valor esperado para el segundo argumento del método .prop() es un valor booleano ( true o false ), por lo que sería:
$('select[name="select-recipient"]').find('option[value="'+opt+'"]').prop('selected', true); Finalmente, da bastante miedo leer el siguiente código pegado en el bloque CSS... Coloque este código dentro de la etiqueta <head> de la página:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { //determine the previous page, let page = document.referrer, opt = ''; switch(true){ case page.indexOf('douglas-h-flint') > -1: opt = 'douglashflint'; break; case page.indexOf('john-f-connolly') > -1: opt = 'johnfconnolly'; break; case page.indexOf('david-l-walker-jr') > -1: opt = 'davidlwalkerjr'; break; } $('select[name="select-recipient"]').find('option[value="'+opt+'"]').prop('selected', true); }) </script>0
Si bien la otra respuesta es una buena respuesta, no se puede usar WordPress tal como está. Dado que este es el formulario de contacto 7 y WordPress, hay algunos problemas con él.
- No vuelva a agregar jQuery de esta manera
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>la biblioteca jQuery ya está incluido con WordPress. - jQuery se carga en modo
no conflict, por lo que debe inicializar primero conjQueryy no con$ - Puede agregar su script a su formulario de contacto 7 como este
aunque esta no es la mejor manera absoluta de hacerlo. Funcionará sin agregar un montón de javascript a otro archivo. También hay formas fáciles de usar wp_add_inline_scriptpara poner en cola correctamente su secuencia de comandos de forma condicional.
Entonces, si agrega lo siguiente a su formulario de contacto... funcionará.
<script type="text/javascript"> jQuery(function($) { //determine the previous page, let page = document.referrer, opt = ''; switch(true){ case page.indexOf('douglas-h-flint') > -1: opt = 'douglashflint'; break; case page.indexOf('john-f-connolly') > -1: opt = 'johnfconnolly'; break; case page.indexOf('david-l-walker-jr') > -1: opt = 'davidlwalkerjr'; break; } $('select[name="select-recipient"]').find('option[value="'+opt+'"]').prop('selected', true); }); </script>