Alright, what do I need this time?

lukep

lukep

He Hath Arisen
Sep 18, 2010
7,690
207
0
On the blockchain
I'm looking to make a web page, or a series of pages in time, where the page is filled with slider bars and has a big number at the top.

Let's say one slider bar is "width," and the customer moves it to his desired product width.

Another is "length," and he moves it to the desired length too, a third could be Depth, a fourth could be delivery time, etc.

On the backside I've put in a formula that takes these numbers and calculates the price quote instantly, which is displayed at the top of the page, all in real time, moving the number as the user moves each slider bar.

Ideally I'd love for this to be a theme-able script that I can tweak the formula on all I want, and deploy this many times on separate web pages.

Bonus: A graphing ability too, so if there is a time element it will show the price over time.

Anyone know what I need to do that right? The number at the top does not need to get put into any kind of ecommerce system, this is more for price speculation than order placement.

Thanks bros!
 


one html tip is to use "div" instead of "tables" in your html coding it saves a lot of loading time and makes your script more readable and easier.
 
This is textbook use-case for Javascript.

To give you an idea, here's some HTML I wrote from the hip that nearly works.

Should be self-explanatory.

uc447224.png


(WF doesn't seem to let you post html/js)
 
Well, since I went that far, I might as well copy and paste it into jsfiddle.

Edit fiddle - JSFiddle

If the calculate_result formula has to be executed on the server, then you'd (1) expose an "/api/calculate_result" url on the server, (2) edit the "change" event to fire an AJAX request to that url with the input values, and (3) update the result_box when you get a response.
 
Mahzkrieg said:
Well, since I went that far, I might as well copy and paste it into jsfiddle.

Edit fiddle - JSFiddle
Click to expand...
Damn, Javascript can do all that? I'm impressed.

Thanks Mahzkrieg, I had no idea.


Mahzkrieg said:
If the calculate_result formula has to be executed on the server, then you'd (1) expose an "/api/calculate_result" url on the server, (2) edit the "change" event to fire an AJAX request to that url with the input values, and (3) update the result_box when you get a response.
Click to expand...
Nah, that's not neccessary for my app; but now I've got to find a way to make it so that the variables for each slider can effect others.

For instance, if the length variable is longer then 20, then the width variable must not have the option of being shorter than 10... The latter slider must pop up to the 10-spot when the former slider is moved past the 20-spot... Minimums existing in other variables affected by relationships to all other fields.

Can JS do that too?
 
You must log in or register to reply here.
Top Bottom
Back