Modify the WordPress ContactForm7 DropDown Menu option using programming techniques

  1. Item in a List

I want to create a highly functional ContactForm7 section on my WordPress website. To enhance its functionality, I am looking to dynamically change the value of certain drop-down menus using JavaScript.

Despite searching for a solution over the past few days, I haven't found one that suits my needs yet. However, I have tried various approaches including;

It is simple to target the selector using JS:

var contactForm = document.querySelector('.wpcf7-form')
var selectedMenu    = contactForm.querySelector('select[name="DropDown_Menu-1"]')

I can even display the default values of the drop-down menu that I initially set up in the CF7 edit block:

var firstValue = selectedMenu[0].value 
var thirdValue = selectedMenu[2].value

However, I am facing challenges in assigning new values to individual items in the drop-down menu. Despite successfully updating their values within the code snippet, the changes are not reflected on the live website!

selectedMenu[0].value = "new Value"
var updatedValue    = selectedMenu[0].value    //the value is now >new Value<, but on the website, the 2nd element of the menu retains the old value

Any suggestions on how to programmatically modify these values?

javascriptwordpressdrop-down-menuhtml-selectcontact-form-7

Answer №1

If you wish to alter the <option> visible text, separate from the option attribute value which remains hidden (not shown):

<option value="String 1 (hidden)">String 1 (visible)</option>

Therefore, you must also modify this displayed option text value by utilizing the text property, as shown below:

var myItem      = wpcf7Form.querySelector('select[name="menu-1"]');
var secondValue = myItem[1].value;
var secondText  = myItem[1].text;

myItem[1].value = "new Value"; // Modify hidden value
myItem[1].text  = "new Value"; // Update the visible text (value)

var NewValue    = myItem[1].value // (hidden actual value) 
var NewText     = myItem[1].text // (visible text value)

This adjustment will ensure the expected functionality.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the classname of two element class i

I am trying to change the class on click within an <i> element that has 2 classes. The first class is always "fa" and the second class can be either "fa-minus" or "fa-plus". I need to toggle between "minus" and "plus" based on the current class. Ca ...

javascriptjquerytoggleclass

Adjust the navigation text and logo color as you scroll on the page

I am new to HTML and CSS and I am working on a website with PagePiling.js scrolling feature. I want to change the color of my logo image and navigation text dynamically as I scroll to the next section. Specifically, I only want the part of the logo and tex ...

javascriptjqueryhtmlcsspagepiling.js

elevate the div with a floating effect

My goal is to create a chat feature for users that will only be visible for a limited time period. I was thinking of using PHP and timestamp to achieve this functionality, but I also want to make the chat visually disappear by having the message div float ...

javascriptjquery

Triggering an event just once upon sending an Ajax request with jQuery

I've implemented a feature where I have dropdown menus populated from SharePoint using SPServices, and it's working well. However, when I click on a button to load data from SharePoint and use the dropdown selections as filters for populating a t ...

javascriptjqueryajaxsharepointspservices

Guide to choosing an option from an HTML select dropdown without an ID attribute using Python and Selenium

I need help selecting a value from a dropdown menu using Selenium's Select method. I'm having trouble locating the right element because my element doesn't have an ID like in other examples on Stack Overflow. I've tried using Xpath, Cla ...

pythonseleniumxpathcss-selectorshtml-select

Converting the keys to lowercase in JSON using Node.js

I am looking to convert the keys in a JSON array from uppercase letters to lowercase keys, as shown below: [ { "_id": "581f2749fb9b6f22308f5063", "WorkshopId": "1", "WorkshopTitle": "workshop1", "WorkshopPrice": "200", ...

javascriptjsonnode.jsmongodb

I'm attempting to save JSON data values in an array through the servlet, but I keep encountering the error "posts.map is not a function"

import React, { Component } from "react" import axios from "axios" import { List } from "@material-ui/core" class PostList extends Component { constructor(props) { super(props) this.state = { posts: [] ...

javascriptjsonreactjs

Assign the variable of one function to another function

I have a collection of buttons with usernames as values (such as jason, chan, brad, etc.). When a user clicks on a button, it is moved to a specific div. For example: <input type="button" onClick="nano();" id="name1" class="names" name="jason" value=" ...

javascriptphpjquerymysqlajax

Tips for displaying a map of items only when they are present

I am facing an issue where I need to iterate over an object in my React app to display some data. Everything works well when the object contains items, but when it's empty (undefined) before fetching data from the server, it breaks the component. I am ...

javascriptreactjsimmutable.js

Exploring Concealed Data and Corresponding in jquery, javascript, and html

A unique template contains 2 hidden fields and 1 checkbox. Using the function addProductImage(), the template is rendered and added to the HTML page. To retrieve the values of the hidden fields (thisFile and mainImage) from a dynamically generated div wit ...

javascriptjqueryhtml

Do we need to use parseInt for the '*' operator in JavaScript?

I have an array where I am mapping it at some point to calculate the sum and percentages. However, when I tried implementing the logic, I noticed that using '*' directly works fine but using '+' adds the two strings together. For exampl ...

javascript

Error: No route found at this location

I've been following a tutorial on integrating Evernote with IBM's DOORS Next Generation and I added the code highlighted below. // app.js app.get("/notebooks", function(req, res) { var client = new Evernote.Client({ token: req.session.oauth ...

javascriptnode.jsexpressroutesevernote

Issue with Scrollspy Functionality in Bootstrap 4

Scrollspy feature isn't working in my code. <nav class="navbar navbar-expand-lg fixed-top navbar-dark" role="navigation"> <div class="container"> <a class="navbar-brand" href="#featured"><h1></h1></a> < ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

jQuery: Remove the class if it exists, and then assign it to a different element. The power of jQuery

Currently, I am working on a video section that is designed in an accordion style. My main goal right now is to check if a class exists when a user clicks on a specific element. The requirement for this project is to allow only one section to be open at a ...

javascriptjqueryhtmlcss

Create a seamless transition between point X,Y and point X1,Y1 through animated movements

Is there a way to smoothly move an image (or element) from its current X, Y position to X1, Y1? If the difference between X and X1 is equal to the difference between Y and Y1, it's straightforward. But what if the X difference is 100px and the Y diff ...

javascriptimageanimationsmoothing

Changing JSON names to display on a webpage

I am looking to modify the name displayed in a json file for presentation on a page using ion-select. mycodehtml ion-select [(ngModel)]="refine" (ionChange)="optionsFn(item, i);" > <ion-option [value]="item" *ngFor="let item of totalfilter ...

javascripthtmljsontypescriptionic2

Manipulating variables from the main Node.js file within exported Express routes

Currently, I am working on the backend of a home automation program in Node.js with express as my router. The frontend communicates with the backend through about 50 routes that cover various aspects of the program such as querying device states, updating ...

javascriptnode.jsexpressmoduleroutes

Is it possible to generate a star rating system from an image using a decimal value?

Recently, I have been eager to convert a number into a star rating and stumbled upon this helpful post here: . The post perfectly explains what I am looking to achieve. Despite following the instructions provided, I am facing difficulties getting it to fun ...

javascriptjqueryhtmlcss

React: Struggling to render values within {} of a multidimensional object

I'm facing a challenge that I can't seem to overcome and haven't found a solution for. The values between curly braces are not displaying in the Content and Total components. I've double-checked the JSX rules, but it seems like I might ...

javascriptreactjsjsx

Proper method for incorporating a single database pool across an Express application

Disclaimer: This issue pertains to singleton objects in Node.js and not DB pools. While developing an Express.js application with the mysqljs node module for DB connections, I am interested in creating a single pool object that can be reused across differ ...

javascriptnode.jsexpressconnection-poolingmysqljs