Looking for a way to execute code exclusively when the 'other' option is chosen? Let's tackle this challenge with Javascript and swig

I am looking to utilize swig (my chosen templating engine) for incorporating JavaScript code that will only display when the user selects the 'other' option from the select menu.

<div class="form-group">
 <select class="custom-select">
  <option selected>Select Switch Manufacturer</option>
  <option value="cisco">Cisco</option>
  <option value="netgear">NetGear</option>
  <option value="d-link">D-link</option>
  <option value="tp-link">TP-link</option>
  <option value="hewlett-packard">Hewlett-Packard</option>
  <option value="linksys">Linksys</option>
  <option value="allied">Allied</option>
  <option value="brocade">Brocade</option>
  <option value="other">Other</option>
 </select>

This specific piece of code should only be visible once the user has picked the 'other' choice. How can I achieve this using Javascript / swig?

<div class="form-group">
 <input type="text" class="form-control" id="switch-manufacturer" placeholder="Switch Manufacturer">
</div> <!-- The input field for 'Switch Manufacturer' should only appear if 'other' is selected above -->
javascriptcssnode.jsswig-template

Answer №1

I crafted a special writing tool just for you.

https://codepen.io/anon/pen/XDPLqw

To make use of this tool, simply access the value attribute within the <select> element.

In my design, I implemented a button to trigger the function, but feel free to customize it as needed. You can even incorporate an onclick event directly into the <select> element, similar to the example below.

<div class="form-group">
 <select class="custom-select" id="sel" onclick="foo()">
  <option selected>Choose a Switch Manufacturer</option>
  <option value="cisco">Cisco</option>
  <option value="netgear">NetGear</option>
  <option value="d-link">D-link</option>
  <option value="tp-link">TP-link</option>
  <option value="hewlett-packard">Hewlett-Packard</option>
  <option value="linksys">Linksys</option>
  <option value="allied">Allied</option>
  <option value="brocade">Brocade</option>
  <option value="other">Other</option>
 </select>

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

Adjusting the size of the entire webpage using Bootstrap 5

My webpage is built using Bootstrap 5 and overall, I am pleased with how it looks. However, I'm finding that all the body elements are too large. View Elements too large The elements at the bottom of the page are getting cut off and I want the entir ...

htmlcssasp.net-mvcbootstrap-5

Transmit a set of binary information and efficiently store it on the server's end

In my current project, I am utilizing AJAX to transmit an array of images to a server and save them on the server end seamlessly. My primary goal is to achieve optimal efficiency in this process, and I have come to realize that my present approach may not ...

javascriptc#jqueryajaxbinary

Express.js - display the complete information

Trying to display an array of objects (highcharts points) is giving me some trouble. Instead of the actual data, I'm seeing [object Object]. It seems that JSON.stringify() doesn't play well with HTML. util.inspect also doesn't work as expe ...

javascripthtmlnode.jsexpress

What could be causing me to have to click the button twice in order to view my dropdown list? Any suggestions on how to

I am facing an issue where I have to click twice on the "Action" button in order to see my dropdown list. How can I resolve this? Is there a way to fix it? $(document).ready(function() { $(".actionButton").click(function() { $dropdown = $("#cont ...

javascripthtmljquerybootstrap-4fetch

"Transform the appearance of the datepicker input field with Material 15's dynamic

I am in need of assistance to change the color to white for the input date and add an underline to a datepicker element <mat-form-field class="date-criteria-select " [floatLabel]="'always'"> <mat-label class=" ...

cssangularmaterial-uiangular-materialdatepicker

Determining the height of child elements within a React component

One challenge I'm facing inside a React component is the need to calculate the total height of my child containers, specifically the three h3 elements, in order to accurately determine the height of my parent div during a transition animation. While I ...

javascriptreactjsdom

React Card with Overflowing TableCell Texts

I am facing an issue with a table inside a table card where the TableCell is overflowing horizontally when the word is too long. How can I break it to the next line? Please refer to the "code" section for details. For more information, please visit my cod ...

cssreactjsmaterial-uijss

Executing JavaScript POST Requests Based on User Input Changes

Hey there! I'm working on a feature where the input value is populated based on the selection in a dropdown menu. The idea is that when the user picks a code, the corresponding amount will be displayed. However, I want the select box to retain its or ...

javascriptjquerypost

implementing ng-grid to showcase json information within an angularjs application

Recently I started learning Angularjs and I am looking to showcase the JSON data retrieved from a webservice response in a grid format using ng-grid. Here is my code snippet: function TestController($scope, $http) { alert("test"); $http({ url: &apos ...

javascriptjsonangularjsng-grid

A perfectly organized and justified menu with evenly spaced horizontal list items

I couldn't find a solution to evenly spacing out a series of list items for a menu styled list. After realizing CSS alone wasn't enough, I decided to incorporate some javascript (jQuery). My goal was to have equal padding between each LI without ...

javascriptjquerycssmenucenter

Passing "this" to the context provider value in React

While experimenting with the useContext in a class component, I decided to create a basic React (Next.js) application. The app consists of a single button that invokes a function in the context to update the state and trigger a re-render of the home compon ...

javascriptreactjsreact-hooksnext.js

The issue I am facing involves a 404 not found axios error when attempting to send a post request

I am attempting to send data via a post request from react.js to express.js using axios, but I keep encountering a 404 not found axios error. You can view the error image here. Below is my code: export default function Upload() { const [state, setState ...

javascriptnode.jsreactjsexpressmern

Issues have been reported regarding compatibility between iOS7, jquery.touchSwipe, on click and webkit-touch-callout

I'm in the process of developing a web application, but I've encountered an issue with iOS7 where there seems to be a conflict between jquery.touchSwipe and my "on click" events. Interestingly, the web app functions perfectly on older iOS versio ...

jqueryhtmlcssios7

When redirecting to the same component, Vue.js hooks are not triggered

In my Vuejs project, I have two pages located at the same level with a common component. However, when I redirect from post/new to post/edit/:id, the beforeMount method is not being called. redirect() { this.$router.push({path: `home/post/edit/${this ...

javascriptvue.jsvuejs2vue-componentvue-router

Scroll the content of a div to the bottom using JavaScript

I'm facing a situation with my code: function scrollme(){ dh=document.body.scrollHeight ch=document.body.clientHeight if(dh>ch){ moveme=dh-ch window.scrollTo(0,moveme) } } However, I am looking for a way to make it scroll only within a specific d ...

javascripthtmlscroll

Transitioning server-side rendering to the client-side

I'm currently utilizing the Jade server-side templating engine to render a layout. The initial layout received by the client will remain largely unchanged, with only occasional updates needed for its contents rather than a complete overhaul. Is there ...

templatesnode.jsexpresspug

What is the best way to incorporate items into Redux reducers?

Incorporating Redux with Next JS, I am faced with the challenge of adding an array of objects to it. Within my application, there exists a form containing multiple inputs, and in order to accommodate these inputs, I have structured a form consisting of 10 ...

javascriptreactjsreduxnext.jsreact-redux

leaving code block using Express and Node

My code is displayed below: // Implement the following operations on routes ending with "users" router.route('/users') .post(function(req, res, next) { var user = new User(); user.username = req.body.username; user.p ...

javascriptnode.jsmongodbexpressmongoose

Is there a way to make changes to a pre-uploaded PDF document?

I'm looking to include a footer in a PDF file that is currently stored on the server. For instance, I have uploaded a file to uploads/aaa.pdf and now I need to insert a footer into the same file located at uploads/aaa.pdf Does anyone know how I can ...

javascriptphpjquerypdf

Error: The PDFJS variable is not recognized when trying to load a PDF file

I've been experimenting with pdf.js to load PDFs into a web application in order to extract information in real-time. However, I keep encountering an error even with a simple example. I've attempted enclosing the code in $(document).ready() as a ...

javascripthtmlpdf.js