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>
document.getElementById
. second, its justelement.value
, notelement.display.value
– r3wt