Adding Values From Dropdown to show a Total

Ask the community
, ,
1

Hey Guys,

I made a service page via which clients can submit their bookings.

The cost of Adults is 40 EUROS per Adult and Cost of Children is 20 EUROS per Child

I want to be able to calculate & display the Total Price as per the selection of the Clients from the Dropdown as in the screenshot below

1366×768 107 KB

The code that I am currently using is this:

export function occurance_click($w) {
 var y = $w((("#dropdown1").value)*40);
 var z = $w((("#text39").value)*20);
 var x = y + z ;
 $w("#text5").text = x; 
}

Dropdown 1 is adults so whatever the client selects it should be multiplied by 40 and same for Dropdown 2.

I want to display the final price in #text5

Please if you can help I would be grateful.

2

Hi,

Writing these lines will produce an error since $w(" #dropdown1 ").value returns a string. In Javascript it is only possible to multiply numbers.
In addition, $w(" #text5 ").text = x; will not work since it expects a string and not a number

See the code below:

export function occurance_click($w) {
  var y = Number($w("#dropdown1").value)*40);
  var z = Number($w("#text39").value)*20);
  var x = y + z ;
  $w("#text5").text = String(x);
  }
3

Hello. Would you be so kind as to help me figure out how to adjust the payment form and my page code to calculate the total in a way very similar to what you’ve done here? The primary difference with my options is that the user will select the level of service which will determine the base price for a single page. They will then select the number of pages they’d like to have edited. Each additional page will add $10 to the base price. I’d like the total to be calculated based on those factors. Here’s a screenshot of my current page:

923×816 142 KB

And here’s the code I’m currently using:

import {

	createToken, encodeCard

}

from "public/stripeAPI.js";

import {

	charge

}

from 'backend/stripeProxy';

var payment;

export function payNow() {

	createToken(encodeCard(createCard()))

		.then((token) => {

			console.log("Card token: " + token);

			charge(token, payment)

				.then((chargeResponse) => {

					console.log("Charge ID: " + chargeResponse.id);

				});

		});

}



function createCard() {

	return {

		"name": $w("#cname").value,

		"number": $w("#card").value,

		"cvc": $w("#cvc").value,

		"exp_year": $w("#yr").value,

		"exp_month": $w("#mon").value

	};

}



function changeState() {

	payment = {

		"amount": ($w("#amount").value * 100),

		"currency": "USD",

		"description": $w("#desc").value,

		"receipt_email": $w("#email").value

	};

}



export function button58_onclick() {

	payNow();

}



export function amount_change() {

	changeState();

}



export function desc_change() {

	changeState();

}



export function email_onchange() {

	changeState();

}
4

Hi Juanita,

See the changes I made to changeState()

function changeState() {
 let pricePerPage = 10; //10 USD PER EXTRA PAGE
 let base = Number($w("#baseTypeDropdown").value);
 let amount = Number($w("#amountOfPages").value);
 let total = (amount * pricePerPage) + base;
 
    payment = {
 "amount": total,
 "currency": "USD",
 "description": $w("#desc").value,
 "receipt_email": $w("#email").value
    };
}
5

Thanks Ido! I’ve obviously messed something up . . . The ‘amount’ field doesn’t update when the Service and Add More Pages fields are changed. Could you take a look and tell me what I’ve done wrong?
I made the following pages to my form:
FYI:

1100×871 201 KB

And I’ve made the following updates to my code:

514×669 51.4 KB

6

Sorry to bug you Ido . . . but I’m so lost . . . when the updates you suggested didn’t produce the desired effect, I tried using my own faulty logic to fix it, but I’m obviously not understanding so I’ve messed it up . . . I’ve made even more changes since I posted by screenshots last night.
Here’s what things look like now . . . Are you able to help? (pretty, pretty pleasssseeee???)

516×858 65.8 KB

610×947 33.4 KB

7

Hello guys,

I have a similar issue with my code and I have tried everything possible to make it sum up as I select options from different elements on the page. I have tried everything possible to make it work, but it won’t. Here is the body of code I have been using:

export function modelSelect_click ( event ) {
var a = Number ( $w ( ‘#modelSelect’ ). value );
var b = Number ( $w ( ‘#soundboardSelect’ ). value );
var c = Number ( $w ( ‘#backSideSelect’ ). value );
var d = Number ( $w ( ‘#bindingRadio’ ). value );
var e = Number ( $w ( ‘#neckSelect’ ). value );
var f = Number ( $w ( ‘#fingerboardSelect’ ). value );
var g = Number ( $w ( ‘#inlaysSelect’ ). value );
var h = Number ( $w ( ‘#soundholeRadio’ ). value );
var i = Number ( $w ( ‘#nutRadio’ ). value );
var j = Number ( $w ( ‘#pickguardRadio’ ). value );
var k = Number ( $w ( ‘#tunersSelect’ ). value );
var m = Number ( $w ( ‘#finishRadio’ ). value );
var n = Number ( $w ( ‘#caseRadio’ ). value );
var o = Number ( $w ( ‘#pickupRadio’ ). value );

$w ( '#totalValue' ). text  =  "$"  +  String ( a + b + c + d + e + f + g + h + i + j + k + m + n + o ); 
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 
// Add your code for this event here:

}

And here is the look of my form:

3200×1800 255 KB