How change Contact 7 form field value depending on another field value with javascript

Question

I would like to make a requirement from the user to enter their website if the user chooses in the dropdown field anything else but a Visitor profile.

Default Url field value is empty. If the user profile dropdown selection is "Visitor", a listener sets the url field to "https://example.com" else url is set to empty to require user enter a url before the form is sent.

Help with the code below please:

Whatever the user profile chosen it always defaults to not-Visitor in the listener function.
If user chooses not-Visitor, I tested to set the url to some dummy https but url field value doesn't change, which means my code also fails to set the url to a particular value.

FYI - You will notice the use of [group] to hide/show Url input field as per Contact Form 7 Conditional Fields which cosmetically hides/shows.

Thank you for your help

[EDIT] - working code below. Ended up removing and use id: to assign and use variables.

Contact 7 Form -> Form Tab code:

<div class="wpcf7-inline-wrapper">
<p class="wpcf7-inline-field">[text* your-firstname watermark "First Name"]</p>
<p class="wpcf7-inline-field">[text* your-lastname placeholder "Last Name"]</p>
</div>

<div class="wpcf7-inline-wrapper">
<p class="wpcf7-inline-field">[email* your-email "Email"] </p>
</div>

<div class="wpcf7-inline-wrapper">
<p class="wpcf7-inline-field">
<label id="dropDownProfile">
[select* your-profile id:dropDownProfile first_as_label "-- Choose Profile Type --" "Visitor" "Engineer"]
</label>
</p></div>

[group PortfolioWebsite]
<p class="wpcf7-inline-field">[url* your-url id:userWebsite] </p>
[/group]

<p>[textarea your-message "Message"] </p>

[submit class:btn class:btn-accent "Contact"]

<script>
document.getElementById("dropDownProfile").addEventListener("change", displayUrl);
function displayUrl() 
{
var currProfile=document.getElementById("dropDownProfile").value;
console.log(currProfile);
if (currProfile == "Visitor") 
    {
        document.getElementById("userWebsite").value = "https://dummyplaceholder.com";
} 
else 
    {
        console.log("at Exhibt");
        document.getElementById("userWebsite").value = "";
    }
}
</script>

your code contains multiple obvious errors, which leads me to believe you simply copy and pasted much of it and don't actually understand javascript DOM. first of all, you need to use the same id in your form code as what you use in document.getElementById. second, its just element.value , not element.display.value — r3wt

Sergio Solorzano Sergio Solorzano · Accepted Answer · 2020-10-27T15:11:30

FYI I found this link a good starting point https://www.codecanal.com/conditionally-display-fields-in-contact-form-7-with-simple-javascript/

ended up not using to assign/use variables instead use id: assignment at listener with getElementById("hereTheID").value

The working code is edited in the question

cheers

How change Contact 7 form field value depending on another field value with javascript

1 Answers