Navigate to a New Page post Dropdown Selection

Currently working on developing a website using Github Pages where I need users to be directed to a specific page after choosing the final option. I am extracting data from a JSON file. I attempted to include an anchor tag in the JSON but it does not redirect when clicking on the edited option. You can view the page here: vaidicbooks.cf/test.html

Answer №1

To enhance the functionality, make sure to include an onchange handler for the city selection:

$(document).on('change', '#state', function(){
  var state_id = $(this).val();
  if(state_id != '')
  {
    load_json_data('city', state_id);
  }
  else
  {
    $('#city').html('<option value="">Select city</option>');
  }
}); 

$(document).on('change', '#city', () => {
    var country = $("#country").val();
    var state = $("#state").val();
    var city = $("#city").val();
    window.location.href = `${country}/${state}/${city}.html`;
});

It is recommended to eliminate the HTML onchange handler snippet as below:

<select name="city" id="city" class="form-control input-lg">
  <option value="">Select city</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

NSJSONSerialization will now be implementing a modification in the date separator format, transitioning it from the standard yyyy/MM/dd to the

NSString *dateValue = [userDefaults objectForKey:KEY_FORM7_DECLARATION_DATE]; NSMutableDictionary *dataDictionary = [[NSMutableDictionary alloc]initWithObjectsAndKeys:dateValue, @"DATE",nil] NSData *jsonDataResponse = [NSJSONSerialization dataWithJSONObjec ...

Releasing the mouse button after dragging successfully without the use of any libraries

I have implemented a pure CSS snap scroll feature and now I need to determine the position of an element in relation to the viewport once the user stops dragging. However, I prefer not to rely on any complex libraries as I do not require any actual movemen ...

Tips for streamlining code using switch statements in vue.js

Is there a more efficient way to simplify this switch statement for handling 5 different cases? Can I streamline the process of updating the completion status based on each step? data() { return { stepOneIsCompleted: false, ...

Difficulty encountered while integrating chart.js with Django using npm

Encountering an issue while using Chart.js in my Django project - when utilizing the NPM package, it fails to work. However, switching to the CDN resolves the problem seamlessly. Chart.js version 3.9.1 Below is a snippet from my project's index.html ...

Help needed with PHP, MYSQL, and AJAX! Trying to figure out how to update a form dynamically without triggering a page refresh. Can anyone

Hey there! I'm fairly new to the world of dynamically updating databases without needing a page refresh. My goal is to build something similar to The end result I'm aiming for includes: Dynamically generating fields (Done) Loading existing dat ...

Use jQuery to switch the class of the designated DIV in the showcasing slider

Check out this jQuery slider example where I have two Divs - DIV ONE and DIV TWO. Can you help me figure out how to: 1) Automatically change the class of DIV ONE from "test" to "testc" when Slide 1 is displayed by the slider. 2) Automatically update DIV ...

Frequently refreshing a page to display the most recent information without needing to reload the entire

I am seeking a solution for updating the comments section on my website live or every 30 seconds. The comments are fetched from a MySQL database using PHP: <?php $link = mysql_connect('localhost', 'root', ''); ...

What is the best way to include and transmit multiple records in ASP.NET MVC with the help of jQuery?

Having trouble sending multiple records to the database using JavaScript in ASP.NET MVC? Look no further, as I have the best code that can send data to the controller. However, the file attachment is not being sent along with it. I've tried various m ...

Leverage IBM Worklight to initiate iOS native code execution upon plugin creation

Currently, I am working on integrating iOS Native code into my Worklight application. I have successfully developed a Cordova plug-in with the following code: HelloWorldPlugin.h #import <Foundation/Foundation.h> #import <Cordova/CDV.h; @interf ...

Guide on printing in an Ionic application using print.js without the need to open the printer setup page

Our team is currently working on an Ionic web application that utilizes printer functionality. To enable printing, we have integrated the Print.js npm package. However, when we initiate the print method, a setup page displaying details such as printer na ...

How can I use lodash to iterate through and remove whitespace from array elements?

I am currently working on a project involving demo lodash functionality, and I have encountered some unexpected behavior. Within an array of cars, there are various non-string elements mixed in. My goal is to iterate through each element of the array, rem ...

Manipulate md-select options with Angular using setValue

My goal is to update a select option, but I'm having trouble getting it to work properly. When I use this.eventForm.controls.venue.setValue(event.venue.name);, the value of venue changes to match event.venue.name. However, the select option itself doe ...

Searching for a property in a list using MongoDB Query

Suppose I have a document structured like the following: { _id: "cow", comments: [ {user: "karl", review: "I appreciate cows.", at: /*a certain date*/}, {user: "harry", review: "Cows are truly amazing.", at: /*a certain date*/} ...

The middleware function in my express server is not being identified

Currently, I am tackling server-side rendering in React and have developed a basic server in Express. However, I'm encountering the "TypeError('app.use() requires a middleware function')" error repeatedly. Below is a snippet of my app.js: v ...

"Enable a smooth transition and switch the visibility of a div element when clicked

How to create a dropdown form with a transition effect that triggers on click of an element? Once triggered, the transition works smoothly but clicking again only hides the div element without triggering the transition. See the demo here: Check out the fu ...

Adding Bootstrap modal content to a webpage before it renders is a simple process that involves preloading the

When using Bootstrap modal, is it possible to load a remote URL along with the parent page without needing to click on a button? ...

Is it possible to swap out images using srcset attribute?

Currently, I am facing an issue regarding changing the img on mobile and tablet devices to display different images. As a beginner with jQuery, I couldn't resolve it using that framework, so I am exploring options with html5. I am wondering if there ...

Issue with Jquery's .html() function not functioning properly when trying to select HTML

I am currently working on a piece of code that looks like this: $price = $(element) > $('.main_paket_price').attr('name'); alert($price); Basically, I am trying to select an element inside element which has the class main_paket_pri ...

Converting JSON data into a dataframe yields varying numerical values

Consider the following JSON data: $fraudster [1] FALSE $actionType [1] "LOGIN_FORM" $actionId [1] 10 $eventList [1] "[[1544018118438041139,162.0,38.0,0.023529414,1.0,2131230815,1], [1544018118466235879,162.0,38.0,0.025490198,1.0,2131230815,0], [1544018 ...

Every time I use my NodeJS MySQL Query function, the results I get are never

Working on a new gaming project involving MySQL for multiplayer functionality. Issue arises when requesting specific queries, where the system retrieves incorrect data or results from previous queries. dat("SELECT * FROM server1;"); Misdirected queries r ...