Is there a way to deactivate the onClick event when the dropdown placeholder is chosen?

I have experimented with different methods to prevent the onClick event when selecting either placeholder, but I have not been successful. Here is my current code:

    <div class="choosesign">
  <div class="zodiacs">
    <select id="zodiac-me" class="zodiac-me" name="zodiac1">
        <option value="none"&>Your Sign</option>
        <option value="1">Aries</option>
        <option value="2">Aquarius</option>
        <option value="3">Cancer</option>
        <option value="4">Capricorn</option>
        <option value="5">Gemini</option>
        <option value="6">Leo</option>
        <option value="7">Libra</option>
        <option value="8">Pisces</option>
        <option value="9">Sagittarius</option>
        <option value="10">Scorpio</option>
        <option value="11">Taurus</option>
        <option value="12">Virgo</option>
    </select>
</div>
<div class="zodiacs">
    <select id="zodiac-them" class="zodiac-them" name="zodiac2">
        <option value="none"&>Their Sign</option>
        <option value="1"&>Aries</option>
        <option value="2"&>Aquarius</option>
        <option value="3"&>Cancer</option>
        <option value="4"&>Capricorn</option>
        <option value="5"&>Gemini</option>
        <option value="6"&>Leo</option>
        <option value="7"&>Libra</option>
        <option value="8"&>Pisces</option>
        <option value="9"&>Sagittarius</option>
        <option value="10"&>Scorpio</option>
        <option value="11"&>Taurus</option>
        <option value="12"&>Virgo</option>
    </select>
</div>
<div class="zodiacs" id="gobutton">
<a id="zodiacchoice" href="#" onclick='GotoLink()'> <h1>
  GO</h1> </a>
</div>
</div>

<script>function GotoLink(){
  var sel = $('.zodiac-me option:selected').text();
    var sel2 = $('.zodiac-them option:selected').text();
    if (sel=='Your Sign') {
    document.getElementById("zodiacchoice").disabled = true;
  } else {
    document.getElementById("zodiacchoice").href = '/' + sel + '/' + sel + '-vs-' + sel2;
  }
}</script>

I attempted to use an if statement to disable the onClick, but it did not work as intended. The link still functions correctly.

javascriptonclickdropdown

Answer №1

To retrieve the selected value, utilize .val().

When dealing with the value attribute within the <option> tags, remember it is of string type and compare using sel === 'none'.

To inactive the <a> tag, you can use javascript:void(0).

function GotoLink() {
  var sel = $('#zodiac-me').val();
  var sel2 = $('#zodiac-them').val();
  if (sel === 'none' || sel2 === 'none') {
    document.getElementById("zodiacchoice").href = 'javascript:void(0)';
  } else {
    document.getElementById("zodiacchoice").href = '/' + sel + '/' + sel + '-vs-' + sel2;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="choosesign">
  <div class="zodiacs">
    <select id="zodiac-me" class="zodiac-me" name="zodiac1">
      <option value="none">Your Sign</option>
      <option value="Aries">Aries</option>
      <option value="Aquarius">Aquarius</option>
      <option value="Cancer">Cancer</option>
      <option value="Capricorn">Capricorn</option>
      <option value="Gemini">Gemini</option>
      <option value="Leo">Leo</option>
      <option value="Libra">Libra</option>
      <option value="Pisces">Pisces</option>
      <option value="Sagittarius">Sagittarius</option>
      <option value="Scorpio">Scorpio</option>
      <option value="Taurus">Taurus</option>
      <option value="Virgo">Virgo</option>
    </select>
  </div>
  <div class="zodiacs">
    <select id="zodiac-them" class="zodiac-them" name="zodiac2">
      <option value="none">Their Sign</option>
      <option value="Aries">Aries</option>
      <option value="Aquarius">Aquarius</option>
      <option value="Cancer">Cancer</option>
      <option value="Capricorn">Capricorn</option>
      <option value="Gemini">Gemini</option>
      <option value="Leo">Leo</option>
      <option value="Libra">Libra</option>
      <option value="Pisces">Pisces</option>
      <option value="Sagittarius">Sagittarius</option>
      <option value="Scorpio">Scorpio</option>
      <option value="Taurus">Taurus</option>
      <option value="Virgo">Virgo</option>
    </select>
  </div>
  <div class="zodiacs" id="gobutton">
    <a id="zodiacchoice" href="#" onclick='GotoLink()'>
      <h1>GO</h1>
    </a>
  </div>
</div>

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

Scrolling seamlessly within a container that is fixed in position

For hours, I've been attempting to incorporate smooth scrolling into my project with no success. The issue lies in the container where the anchor tags are located. If it's set to fixed position or absolute, none of my attempts seem to work. In ...

javascriptjqueryhtmlcss

Problem with memory management in ThreeJS

After developing a ThreeJS app using the canvas renderer to meet project requirements, I encountered a memory and garbage collection issue. As part of the application logic, numerous meshes are created for animations on sections of a flat 2D donut or ring ...

javascriptgarbage-collectionthree.js

Error: Material-UI prop type validation failed - Please specify either `children`, `image`, `src`, or `component` prop

Despite having an image prop in CardMedia, I kept encountering this error. Here is a snippet of the code: Error description: const Post = ({ post, setter }) => { const classes = useStyles(); return( <Card className={classes.card} ...

javascripthtmlcssreactjsmaterial-ui

Restart animation following a scroll occurrence

My experiment involves using the anime.js framework to create a simulation of leaves falling from a tree. The animation triggers when the user scrolls to the top of the page. However, I am facing an issue where the animation only plays once; if the user sc ...

javascriptanime.js

Is it possible to use async/await together with forEach in JavaScript?

Within my array of objects containing user information and emails, I aim to send emails using AWS SES. To accomplish this, I must decide between utilizing await or normal .then. Preferably, I would like to use await within a forEach loop. Is it feasible to ...

javascriptnode.jsgoogle-cloud-functions

The straightforward use of XMLHttpRequest to retrieve the response xhttp.responseText is not functioning properly

I am facing an issue where this.responseText is not returning the content of the file. Can someone assist me in solving this problem? Thank you. Console.log also does not return the content of the file. function loadMegaContent() { var xhttp = new XMLHtt ...

javascripthtmlajax

React JS: You must define 'Message' in order to avoid the react/jsx-no-undef error

As a novice learner in React JS, I am currently working on developing a messaging web application. However, as I was writing my code, I encountered the following error: Failed to compile. ./src/App.js Line 41:17: 'Message' is not defined react/j ...

javascriptreactjs

An unusual phenomenon in the controller hierarchy causing issues with accessing the parent scope in AngularJS

Recently delving into the world of angularjs, I encountered something perplexing that seemed like a glitch in the controller hierarchy when it comes to accessing the parent scope. Here are two code snippets that I believed should both function properly bas ...

javascriptangularjsangularjs-scopeangularjs-controller

AngularJS does not support the use of $(this) syntax

I have encountered an issue while developing a Chrome extension using AngularJS. I would like to add buttons to my popup page, and I want the ancestor node to disappear when a button is clicked. Here is the code snippet: in popup.html <div class="dea ...

javascriptjqueryangularjs

Compilation of Angular 6 project is failing due to error TS1005: Expected ',' instead of the symbol used

I keep encountering an error message whenever I try to compile my code. ERROR in src/app/form/form.component.ts(22,39): error TS1005: ',' expected. Below is the snippet of code where the error is pointing: import { Component, OnInit } from &ap ...

javascriptangulartypescript

Shade the entire td column in different colors depending on the characteristics of th

I am working with a table and here is the code for it: <table> <thead> <tr> <th style="width: 40%; text-align: center; vertical-align: center;">Nr.<br> crt.</th> <th style="font-weight: bold; wi ...

javascripthtmljquerycsslaravel

Refresh the custom JavaScript dropdown list without having to reload the page

I implemented this code to customize a drop-down list Selector. Is there a way to reset this code without reloading the page, maybe by triggering a function with a button click? <button onclick="reset();">Reset</button> For example, if "Jagu ...

javascriptjqueryhtml

Persistent column menu in ag-grid

Is there a way to include a menu for each row within a sticky column in Ag-grid? I couldn't find any information about this feature in the official documentation, so I'm unsure if it's even possible. I've attempted several methods, but ...

javascripthtmlcssag-grid

The options in the dropdown menu vanish when interacting with a jQuery feature that relies on

Recently, I have found AJAX, JSON, and jQuery to be indispensable tools in my coding endeavors. The application I am working on is a replacement for a flawed one, and it is coming along nicely. Despite making progress with the AJAX method, I have encounte ...

javascriptphpjqueryajaxjson

Guide to profiling resources in Node.js applications

When developing Node.js applications, it's important to keep track of how your code is performing in terms of memory and IO. By monitoring these metrics, you can identify which parts of your code are causing delays or consuming excessive resources. Th ...

javascriptnode.jsperformanceexpresssails.js

Styling a textbox within a gridview using JavaScript

Looking for a way to format a textbox within a gridview using JavaScript? Take a look at how the gridview columns are set up: <Columns> <asp:TemplateField> <ItemTemplate><asp:ImageButton runat="server" id="imgbtnEnterAmt" ...

javascriptc#asp.net

Challenges with JavaScript calculations on dynamic HTML forms

Currently, I am immersed in a project focused on creating invoices. My progress so far involves a dynamic form where users can add and remove rows (as shown in the snippet below). I'm encountering an issue with my JavaScript and I could use some ass ...

javascripthtmlforms

Editing the content of a div in real-time by dynamically updating the innerHTML

Looking for a way to dynamically change the innerHTML of a contentEditable div using pure JavaScript, without relying on the Rangy library. I want the change to occur on keyup without losing cursor position or focus. Here is an example setup: <div id=" ...

javascripthtmlcontenteditable

Is there a way for me to receive notifications about errors while piping to gulp browserify?

I am leveraging browserify to utilize npm modules in my front end code, and I use gulp for my build tasks. The setup is functioning smoothly: const browserify = require('gulp-browserify'); gulp.task('js', ['clean'], function ...

javascriptgulpbrowserifygulp-notify

Is there a way to transfer PHP user information (session) to a Node.js server?

Currently, I have two separate pages set up for my website. One is the Chat page, which operates on Node.js and Socket.io using WebSockets. The other is the main page where users login and access various features. I am looking to implement a system where, ...

javascriptphpmysqlnode.js