What is the formula to determine the total number of options in a dropdown menu?

I have a background in graphic design rather than programming, but I decided to tackle creating an online form webpage by following some tutorials.

One dilemma I'm facing is how to calculate prices within the table for both the distributor and the public. It seems quite complex.

I attempted to incorporate cwolves' solution into the code, but it's causing conflicts with my submit button. Is there a way for the calculations to appear automatically below the table without needing a button?

You can view the table here: http://jsfiddle.net/87JpK/

<table border="0" cellspacing="3" cellpadding="0">
  <tr>
    <td width="125" height="30"><div align="left"><em3>&nbsp;Product's Name</em3></div></td>
    <td width="85"><div align="left"><em3>Volume ml</em3></div></td>
    <td width="110"><div align="left"><em3>Distributor</em3></div></td>
    <td width="110"><div align="left"><em3>Public</em3></div></td>
    <td width="200"><div align="left><em3>Quantity (1 Pack=10 Units)</em3></div></td>
  </tr>
  <!-- More table rows -->
</table>

Thank you in advance for your help!

javascripthtmlcsshtml-select

Answer №1

Why not give it a try with jQuery?

eval( $( 'td:nth-child(3)' ).map( function( td, $this ){
    return ( ( parseFloat( ( $this = $( this ) ).text() ) || 0 )
        * ( parseFloat( $this.parent().find( 'select' ).val() ) || 0 ) );
} ).get().join( '+' ) )

Check out the demo:

http://jsfiddle.net/W8yK8/

To calculate public price, change the nth-child(3) to 4.

(And to those who want to criticize me, remember that the quality matches the question itself.)

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

Timer for searching webpages using Javascript

I am looking for a way to continuously search a specific webpage for a certain set of characters, even as the text on the page changes. I would like the program to refresh and search every minute without having to keep the webpage open. In addition, once ...

javascripthtml

How can I create a carousel-style container in HTML that functions similarly to the one on Upwork?

Is there a way to transform my existing container into a carousel similar to the one on Upwork? https://i.sstatic.net/dJZjy.png I am looking to convert my current layout into a carousel, just like the example image provided: .flex-container { displa ...

htmlbootstrap-4slidercarousel

Changing the material properties of an object using Raycaster in Three.js

I currently have a raycaster functioning well in Three.js. Below is the code snippet responsible for defining the action to be taken when the cursor hovers over an object within the scene: function onDocumentMouseMove( event ){ mouse.x = ( event.clien ...

javascriptthree.jsraycasting

Switching columns to rows using JavaScript

I came across a solution on Stack Overflow about swapping rows with columns in a matrix using JavaScript. However, it didn't work for me (probably because I'm still learning). The data is structured in arrays like: id [1, 2, 3] caption [one, tw ...

javascriptarraystranspose

Is it Possible to Utilize Gridster Across Multiple Tabs?

My goal is to build several dashboards using angular-gridster2 in angular 8. Each dashboard will be located within a separate tab, and I am currently encountering some issues with this setup. For example, if the first tab has 3 gridster items and the sec ...

javascriptangulartypescriptangular8angular-gridster2

Ways to eliminate the vertical scroll feature in a kendo chart

I am encountering an issue while loading a kendo chart inside grid-stack.js where I am unable to resize the height properly. Whenever I decrease the height, a vertical scroll appears which should not happen. I have tried setting the height to auto and refr ...

javascriptjquerycsskendo-chartgridstack

Problem with AngularJS Select Box

My AngularJS dependable dropdowns are currently functioning well with static data from a script file. However, I am now looking to bind data to these dropdowns from a URL. The challenge is that I don't have a separate URL for the dropdowns; there is j ...

javascriptangularjsjsonurlmulti-select

Unable to retrieve form values from a $modalInstance

When launching a $modalInstance, the user will need to select an option from dynamically loaded radio inputs and return the chosen value. To open the $modalInstance, this function is used: $scope.openAddFriendGroup = function () { var addFriendGroupMod ...

javascriptangularjsangular-ui-bootstrap

Dynamically adjust the image link in responsive mode to improve user experience

Is there a way to dynamically change the image links in responsive mode on WordPress? I am displaying thumbnails with a fixed size of 280*200, but I want to switch to medium-sized thumbnails (480*200) when the resolution is between 480px to 600px. Is there ...

phphtmlcsswordpressresponsive-design

How can I select a specific value within an Autocomplete bar by clicking on it in the div ul li strong

I have a multitude of li tags nested under both div and ul. Each li tag contains a strong element: <div style="width:380px" id="autoComplete" class="suggest fl"> <div class="sWrap"> <div class="iconWrap"> <span ...

javahtmlseleniumxpathselenium-webdriver

The status value in the result has a whitespace just before the term "success"

Apologies for the unclear question, but I encountered a strange bug in my code. I am trying to show an alert to users informing them that the updates have been successfully completed. Below is the code snippet containing an if() block where the alert shoul ...

javascriptnode.js

Discovering the quantity of identical elements within a JavaScript array

Looking for some assistance in solving a JavaScript problem as I am relatively new to the language: I have an array and I need help in determining the count of identical values. Below is my array: var arr = ["red", "blue", "green", "red", "red", "gray"] ...

javascripthtml

Accessing the session object within an Express middleware function is crucial for

This is my unique Express middleware setup: var app = express() .use(express.cookieParser()) .use(express.session({secret: 'HiddenSecret'})) .use(express.bodyParser()) .use(function displaySession(req, res, next) { consol ...

javascriptnode.jsexpress

Is it possible to apply a complete style sheet to a single div element only?

I'm currently working on a website and I want to incorporate a dynamic bootstrap calendar. The issue I'm facing is that my site has its own style sheet, but the calendar comes with its own styles. When I try to integrate the two, it seems like el ...

javascripthtmlcsstwitter-bootstrap

Choose tag using position in a sequence

I am working on updating the label text "E-mail" to say "User Name" in this HTML markup. The only tool I have access to for this task is jQuery. <div class="foo" style="border:1px solid #444"> <span class="field-with-fancyplaceholde ...

jquerycssjquery-selectors

Is there a similar function to file_get_contents($url) in JavaScript or TypeScript?

Currently, I am in the process of developing an application using Ionic 2. One of the challenges I faced was extracting data from an external page on a different domain. The solution I came up with involved using PHP as shown below: myPhp.php <?php ...

javascriptphpangulartypescriptionic-framework

What is the best way to avoid repeated guesses in a number guessing game?

I've implemented an array named 'tries' to keep track of the numbers guessed by the user. Once the user correctly guesses the number, the total number of tries and the guessed numbers are displayed. How can I prevent the user from guessing a ...

javascripthtmlarraysinnerhtml

Styling options based on conditions for a cytoscape.js visualization

I am looking to modify the appearance of my graph based on JavaScript variables that are globally set. For example, if my edges contain attributes such as name and price, I want to customize the labels of the edges depending on a global variable called lab ...

javascriptgraphstylesconditional-statementscytoscape.js

Is itemprop="image" used on an element that is not an <img> tag?

My current product page utilizes Microdata where the itemprop="image" attribute is assigned to the first thumbnail in the gallery. I want to change it to specify the high-resolution image instead. The problem is, the high-res image is not directly display ...

htmlimagemicrodatarich-snippetsgoogle-rich-snippets

ng-init assign value to a new object

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl2" ng-init="person = new Person('Al ...

javascripthtmlangularjs