jQuery Other Input box to Select dropdown

Webflow has few limitations as high-spec Web Builder and CMS, but one right now is Conditional Form fields and this extends to other form builders or HTML forms. Conditional form fields are inputs, selects, radios etc that are conditional on a pre-selected option(s). One common use is to add an ‘Other’ input box to a Select dropdown. This jQuery snippet fills that gap and also gives options for extensive modification to hide/show a multitude of form components, divs, images and any other HTML element.

‘Other’ Input box for Select dropdown. Great for Conditional Webflow Forms.

Add the following jQuery before </body> tag on your page.

<script>
// Use jquery .change() to bind change event of an element
// Give your form ID of #form
// Add your select with option of 'Other' and add input with class of .inputvis with initial CSS display of none
jQuery( document ).ready(function($) {
var Select = '#form select';
$(Select).change(function(){
if($('Select option:selected').text() == "Other"){
$('.inputvis').show();
}
else{
$('.inputvis').hide();
}
});
});
</script>

Dependencies

1. Ensure that you include jQuery: –

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
view raw Add jQuery from CDN hosted with ❤ by GitHub

2. Add a form with ID #form (if you change the form id then update the ID in the jQuery code)

3. Add a select with an option with text ‘Other’

4. Add the ‘Other’ text input and give it class .inputvis (again if you change the class then make sure you change the jQuery code). Give the initial .inputvis a CSS style of none (display: none;).

That’s all you need to do for a conditional select so what when the user selects ‘Other’ in the dropdown the new text input field will display to capture the additional info not covered by your original list of options.

A bit about Webflow

If you don’t know Webflow then it’s highly recommended as a ground-up web design and development tool that features a fully-fledged CMS. We rate Webflow well above WordPress as the go-to tool for creating high-end brochure based websites on an enterprise-grade platform.

About the Author
jQuery Other Input box to Select dropdown 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.