Primary menu featuring one main dropdown and seven additional sub dropdowns with identical names and a reset

In the main dropdown for days of the week, each day has a sub drop-down with the same name. However, when the form is posted, we are unable to retrieve the value of the selected option. As a solution, we need to reset all other submenu options and send only the actual selected value.

<select name="Todays_Day" class="form-control input-lg form-el" id="tday" required>
<option value="" selected>When do you need us?</option>
<option value="Sunday 22-10-2017" >Sunday 22-10-2017</option>
...




 <div style='display:none; ' id='todayt'>
<select name="date" class="form-control input-lg form-el" >    
<option value="">What time?</option>
...
...
javascriptajax

Answer №1

Consider this innovative solution, which maintains the currently selected value while resetting the others.

//store all select elements in a variable using querySelectorAll
var selects = document.querySelectorAll("select[name='date']");

//add an onchange event to all select elements -- Use Array.prototype.forEach to loop through nodelist
Array.prototype.forEach.call(selects, function(element){
  element.addEventListener("change", setPostValues);
});


function setPostValues()
{
  var self = this;
  //reset to initial value for all other elements when a different one is changed.
  Array.prototype.forEach.call(selects, function(element){
    if (element != self)
    {
      element.value = "";
    }
  });  
}
div{
  display: block !important;
}
<div style='display:none; ' id='todayt'>
<select name="date" class="form-control input-lg form-el" >    
<option value="">What time?</option>
<option value="12:30 PM">12:30 PM</option>
<option value="1:00 PM">1:00 PM</option><option value="1:30 PM">1:30 PM</option>
<option value="2:00 PM">2:00 PM</option><option value="2:30 PM">2:30 PM</option><option value="3:00 PM">3:00 PM</option><option value="3:30 PM">3:30 PM</option><option value="4:00 PM">4:00 PM</option><option value="4:30 PM">4:30 PM</option><option value="5:00 PM">5:00 PM</option><option value="5:30 PM">5:30 PM</option></select>
</div>

<div style='display:none; ' id='tomorrowt'><select name="date" class="form-control input-lg form-el" >    
<option value="">What time?</option>
<option value="9:30 AM">9:30 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="1:00 PM">1:00 PM</option>
<option value="1:30 PM">1:30 PM</option>
<option value="2:00 PM">2:00 PM</option>
<option value="2:30 PM">2:30 PM</option>
<option value="3:00 PM">3:00 PM</option>
<option value="3:30 PM">3:30 PM</option>
<option value="4:00 PM">4:00 PM</option>
<option value="4:30 PM">4:30 PM</option>
<option value="5:00 PM">5:00 PM</option>
<option value="5:30 PM">5:30 PM</option></select>
</div>

...
(snippet continues)

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

Encountering an issue of Property not existing on JSX intrinsic elements when utilizing TSS with Javascript (without TypeScript)

I am currently working on a JavaScript project (using create-react-app 2.0) and utilizing tsserver without Typescript. I encountered a linting error that states: Property 'svg-icon' does not exist on type 'JSX.intrinsictElements'. Thi ...

javascriptreactjstypescript

The AngularJS HTTP POST request is being sent as an OPTIONS request when making an AJAX request to a different

I have a project in AngularJS where I need to make an AJAX request to a specific URL. I've tried using two different methods: $http.post(url, { params: { email: $scope.login.username,password:$scope.login.password } }) .success(functi ...

jqueryajaxangularjshttp-headers

What is the best way to ensure all Promises are resolved in ExpressJS?

Context: I've developed a basic REST API in ExpressJS that enables the seamless integration of multiple web pages. The page numbers are flexible and can vary. Challenge: Due to constraints related to performance, I am keen on incorporating async pr ...

javascriptnode.jsexpresspromise

Ways to link includes in Jade?

Currently, I am utilizing the Jade template engine within node.js Express. If we want to incorporate another Jade file into a Jade file, the procedure is as follows: exports.overview = function(req, res, next) { var jade = require('jade'); ...

javascriptnode.jsexpressincludepug

Accessing props in react-native-testing-library and styled-components is not possible

I defined a styled-component as shown below: export const StyledButton = styled.TouchableOpacity<IButtonProps> height: 46px; width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; height: 46px; ...

javascriptreact-nativejestjsstyled-componentsreact-testing-library

The functionality of navigator.share is not fully optimized on Windows 10 Chrome and Edge browsers

When utilizing the web share API, I expected it to be supported on Windows OS (browsers Chrome and Edge) based on information from the caniuse website. However, when attempting to execute navigator.share({ title: 'Title' });, I am faced with an e ...

javascriptreactjsnext.jsweb-share

The functionality of the activePost is being disrupted by the useState hook when the useEffect is activated by the

My objective was to retrieve posts from Graphcms, store them in an array called 'posts', and display them in a postlist. Then, based on the user's selection from the postlist, the main component would update accordingly. Although I successfu ...

javascriptreactjsgraphql

Enabling JavaScript functions to accept a variable number of arguments

I am looking to enhance the versatility of the function below by enabling it to accept multiple callbacks to other functions if they are specified in the arguments. $(function() { function icisDashBox(colorElem, thisWidth, thisHeight, completeCallBack ...

javascriptjqueryfunction

The CSV files that have been exported contain embedded HTML tags

I am trying to generate a CSV file with PHP, but the generated file contains HTML tags and other irrelevant information. I have attempted to use the following code: <?php mysql_connect("localhost","root",""); mysql_select_db("XXXXXXX"); $qu ...

phpjquerymysqlajaxcsv

Tips for resolving issues related to Nodemailer configuration

I am currently working on a script that sends form data to an email address. I am using Express and Nodemailer with Node.js, but as a beginner, I am struggling to understand why the email authorization stops and prevents the letters from being sent. Here ...

javascriptnode.jsexpressnodemailer

Ways to ensure the first div always expands when sorting in AngularJS

In my AngularJS application, I have a set of div elements generated using ng-repeat. The first div is always expanded by default upon loading the page. Now, when I click a button to sort the divs based on their ID in the JSON data, I want the top div to ...

javascripthtmlangularjs

Transforming Lines with ThreeJS

I have created a rotating cube in ThreeJS that is made up of multiple particles. These particles belong to an array called 'particles' and are part of a group named 'group' which rotates around the origin on all axes (x, y, z). My goal ...

javascriptthree.js

Using a JavaScript function to swap out the contents of a div and encountering some unexpected behavior

I am encountering an issue while running a code that generates content using a function. The problem arises when I try to change the content onclick, as none of the CSS is applied again after the change. It's quite perplexing. Below is a generalized ...

javascriptcss

What is the purpose of including the # (hashtag) in websites that use ajax technology?

I've been looking into the use of # (hashtag) in URLs when ajax is involved, but I can't seem to find a definitive answer. Can you provide some insight? ...

ajaxurlhashtaghtml4

Leveraging User Location in Angular 6 using API with OpenLayers

I am currently developing a mapping application using Angular (6) and OpenLayers (4.6.5) with the initial aim of retrieving user geolocation. To achieve this, I am utilizing a French API provided by the French Government for querying and obtaining GeoJSON ...

javascriptangularapiopenlayers

Issue with scrolling in Droppable container on JQuery UI interface

I've encountered an issue with JQuery UI. In my code snippet, I can drag elements onto fields and when hovering over a field, it gets highlighted in green. However, I recently added the functionality to scroll while dragging. Now, I can scroll up and ...

javascriptjqueryjquery-ui

Is there a way to retrieve JSON responses from a Flask-SQLAlchemy query using Ajax and jQuery?

I have been working on a project where a jQuery script sends an AJAX post request to a route on my Flask server. The goal is for the route to compute a SQLAlchemy select query and return the result to the jQuery script. However, I have been facing a chall ...

jqueryajaxflasksqlalchemyflask-sqlalchemy

Is it possible to utilize AngularJS without relying on a REST API?

While I am comfortable using the view engine (such as jade) and controllers to provide data on a simple website created with node.js, integrating AngularJS as the client framework seems to require implementing a REST API on the backend for data retrieval. ...

javascriptangularjsnode.jsrest

Saving data from a web form into a database using AJAX, JSON, and PHP

I have been attempting to save form data in a database, but for some reason my code doesn't seem to be reflecting anything. Below is the code I am using: add.php <form name='reg' > <fieldset> <legend>Student Informati ...

javascriptphpjqueryjsonajax

Is it possible to remove several items that share the same name?

I am placing a variable number of circles on the screen. var radius = 1; var segments = 32; var circleGeometry = new THREE.CircleGeometry( radius, segments); function generateCircles(){ //scene.remove(circle); var count=0; while (1000> count) ...

javascriptthree.js