Choosing an option from the dropdown menu with the help of the incredible HTMX framework

I attempted the provided solution but unfortunately, it did not yield the desired outcome. Upon checking the HTMX log, it appears that everything is set up correctly. Can anyone point out what mistake I might be making in this scenario?

document.getElementById('plan-id').addEventListener('change', function () {
      const selectedPlan = this.value;
      const selectedDuration = document.getElementById('duration-id').value;
      const url = `change.html?planCode=` + encodeURIComponent(selectedPlan) + `&durationCode=` + encodeURIComponent(selectedDuration);
      this.setAttribute('hx-get', url);
      htmx.logAll();
      htmx.trigger('#plan-id', 'get', { url: url });
    });
javascriptbootstrap-5htmxhyperscript

Answer №1

Ensure to enclose the select boxes within a form tag and add hx-get to it. This way, HTMX will capture all values from the form as parameters.

For instance:

<form>
    <select id="plan-id" name="planCode" hx-get="change.html" hx-trigger="change" hx-target='#rental-id' hx-indicator=".htmx-indicator" hx-include="[name='durationCode']">

        <option value=“A">Plan A</option>
        <option value=“B”>Plan B</option>
        <option value=“C”>Plan C</option>
    </select>


    <select id="duration-id" name="durationCode" hx-get="change.html" hx-trigger="change" hx-target="#rental-id" hx-indicator=".htmx-indicator" hx-include="[name='planCode']">

        <option value="1">1 Years</option>
        <option value="2">2 Years</option>
        <option value="3">3 Years</option>
    </select>
</form>

If you want both select change and button submit to trigger the request:

<form hx-get="change.html" hx-trigger="submit, change">
    <select id="plan-id" name="planCode" hx-target='#rental-id' hx-indicator=".htmx-indicator">
        <option value="A">Plan A</option>
        <option value=“B”>Plan B</option>
        <option value=“C”>Plan C</option>
    </select>

    <select id="duration-id" name="durationCode" hx-target="#rental-id" hx-indicator=".htmx-indicator">
        <option value="1">1 Years</option>
        <option value="2">2 Years</option>
        <option value="3">3 Years</option>
    </select>

    <button type="submit">Submit</button>
</form>

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

Ways to retrieve the chosen option from a dropdown menu within an AngularJS controller

I have a drop down (combo box) in my application that is populated with values from a JSON array object. Can someone please explain how to retrieve the selected value from the drop down in an AngularJS controller? Appreciate the help. ...

javascriptangularjs

Exploring the Power of Jasmine Testing with Ternary Conditions

Imagine a scenario where we are working with the following snippet of JavaScript code. object = _.isUndefined(object) ? '' : aDifferentObject.property; Is it possible to write a Jasmine test that covers both scenarios? Do we need to use two se ...

javascripttestingjasmineistanbul

Issue with Sequential Drop Down List Functionality in ASP.Net MVC View Page

I am currently in the process of migrating code from one project to another. Although the code works fine in the original project, it is not functioning properly in the new one. I’m uncertain if something was overlooked on my end. Within this code, ther ...

javascriptc#asp.net-mvc

Accessing data attributes using AngularJS

Trying to extract the data attribute from the following code: <button ng-click="EditPlayer(name, position, number, age)" id="btnEdit" class="btn btn-successes" data-playerid="{{player.id}}">Save</button> Within my angular controller: $scope. ...

javascriptjqueryangularjs

NextJS hot reload with Docker is a powerful combination for seamless development environments

I've encountered issues trying to configure hot reload with Docker and NextJS. When I make changes and save a file, the server does not reload. Below is the contents of the docker-compose.yml: version: '3' services: mainapp: build: ./ ...

javascriptdockernext.js

Is there a way to obtain an array after subscribing to an RxJS method?

I am struggling with the following code snippet: Rx.Observable.from([1,2,3,4,5,6]) .subscribe(x=>console.log(x)); Is there a way to modify this code so that instead of iterating through the array elements from the .from() method, I can return the enti ...

javascriptangularrxjs

Zod: ensure at least one field meets the necessary criteria

Currently, I am in the process of developing a form that allows users to input either their email address or phone number. While they have the option to provide both, they are required to enter both before proceeding. For this project, I am utilizing Zod a ...

javascriptreactjstypescriptreact-hook-formzod

In the process of creating my initial discord bot, struggling to incorporate advanced functionalities beyond basic commands

I am currently using discord.js and JavaScript to code. I have created a test bot and followed step-by-step guides meticulously, but the bot only responds to basic "ping pong" commands. Whenever I try to add more complex commands, the bot stops functioning ...

javascriptnode.jsdiscorddiscord.js

Unable to set the active tab using $rootScope

Is there anyone who can assist me with the issue I am currently facing? I have a NavCtrl to manage my active tags, and although I was able to change the active tab when clicking on the menu item, it does not update when clicking on links in the body views. ...

javascriptangularjsangularjs-scopeangular-ui-router

Saving the output of mySQL queries on the client side for later use in subsequent requests

While logging a user in, I transfer attributes through a response object. In the javascript, I store specific attributes to a variable for future usage. For example, onresponse - currentUser = req.body.user currentID = req.body.id etc. Later, if I need t ...

javascriptmysqlnode.jsexpress

Jquery cascading menu

I'm currently experiencing difficulties in creating dropdown menus using jquery and css. Below is my HTML code: <nav class="topNav"> <ul> <li> <a href="#menu" class="menu-toggle"><img src ...

javascriptjquerycsshtmluser-interface

Oops! It seems like there is an issue with reading the property 'filter' of an undefined object. Any ideas on how to resolve this error

Having an issue with a custom filter that is causing an error "ERROR TypeError: Cannot read property 'filter' of undefined". I need help fixing this as it's preventing anything from rendering on the page. Any suggestions on what changes I sh ...

javascriptangulartypescriptundefined

Avoid inputting numbers and special characters

In my coding work, I have crafted a function that detects the key pressed by the user through an event. NameValidation(e){ if(!e.key.match(/^[a-zA-Z]*$/)) { e.key = ''; console.log(e.key); } }, This function essentia ...

javascriptvue.jsdom-events

Is there a way to send a variable to the alert function using $.ajax()?

I need assistance with confirming the deletion of a record. When the user clicks on the button, it should send the value 'Yes' to a $_POST request in PHP for deleting the record. However, instead of working as expected, it is showing me the JavaS ...

javascriptphpjqueryajaxpost

How can you use jQuery to display an image when hovering over text?

Looking for a tutorial or script that displays an image when hovering over HTML text with the mouse? ...

javascriptjqueryhtml

Instructions on calculating the sum of a checkbox value and a textbox value

Here, my goal is to dynamically calculate the total value of selected checkboxes (Checkbox1 and Checkbox3) with the value in TextBox1, and then display the sum in TextBox2 without the need for any button click event. <div> <asp:Tex ...

javascriptjqueryasp.net

Client-side rendering for NextJS server components is also supported

I am currently working with Material UI v5.11.16 in a nextjs environment using v13.3.0. I followed the official documentation setup for my nextjs project which can be found here. So far, I have successfully integrated Material UI components without having ...

javascriptnext.jsmaterial-ui

Is it acceptable to post variables using AJAX for processing?

Is there a way to send data with AJAX using the code provided? It seems like the information is not being sent to the PHP file as intended. Here is the code snippet: $('#send').click(function(){ var pseudo = $('#psd').val(); }) ...

javascriptphpjqueryajax

What is the method for inserting the document URL into a text input?

Can someone provide guidance on grabbing the top URL and inserting it into a text input field? I've tried the following method, but it's not working. Any suggestions or ideas? Additionally, is there a way to make this text input field uneditable? ...

javascripthtmlformsurl

Can you provide guidance on decompressing SVGZ files using JavaScript?

I'm currently working on implementing a high-resolution world map using SVGZ instead of the standard SVG format, aiming to provide my users with a more intricate and detailed visualization. Although I have experimented with utilizing js-deflate to de ...

javascriptjquerysvgraphaelsvgz