Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Quote form javascript.
New Posts  All Forums:Forum Nav:

Quote form javascript.

post #1 of 9
Thread Starter 
Hi there all.
Well I'm no good with javascript but just trying.

My neighbor asked if I could do a quote form for him as he has done heaps of things for me I decided to try as he does heaps for us.

It goes like this.

You select a type of fence by a radio button.

Then you select the height.
Now here is the thing there are different prices for the heights depending on what type of fence you choose.

example

Colorbond Panel Fence
1.2 High $ 85
1.5 High $90
1.8 High $95

Colorbond Post & Rail Fence
1.2 High $90
1.5 High $95
1.8 High $100

This is where I am stuck.
How to make it calculate different values depending on which radio button you select?

I at the moment just gave it a value of 0 as I wanted to test the arithmetic and how you do that.

You can see the code at

https://jsfiddle.net/mmixsetup/xbo4jjy0/5/

Doesn't work on jsfiddle but works on my computer.

Next you would enter the length of the fence you want and it would just multiply height by the length.
(have not made javascript get text box value yet as I need to work out the other bit before I try and go further.

Thanks
Edited by mixsetup - 3/27/17 at 10:16pm
post #2 of 9
I dont quite understand what your talking about. Basically, you have a 2d array of values, unless there is a formula to define the price.

Code:

var items = [
  [85, 90  ,99,120],
  [90, 95,  111,130],
  [95, 100, 120,140]
];

/// you get the index of the Fence Type, say Colorbonded Post & Rail Fence   = 1
// you get the index of the Fence Height, say 1.8  = 2

console.log(items[1][2]);  \\returns 111


Another Option is to add attributes to objects. I.E.
Code:
Var Fence1 = { 'Small':40,'Medium':50,'Large':60};
Fence1.Small   // returns 40

// You can also have the all nested inside.
var Prices = { 
'ColorPanelFence':{ 'Small':40,'Medium':50,'Large':60},
'ColorPostAndRail':{ 'Small':42,'Medium':55,'Large':62},
'TreatedPineButt':{ 'Small':46,'Medium':52,'Large':66},
'TreatedPineLap':{ 'Small':48,'Medium':60,'Large':68}
};

Prices.ColorPostAndRail.Small  // returns   42

Prices['ColorPostAndRail']['Small']  // Also returns 42

Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
post #3 of 9
Thread Starter 
Hi there thanks for that I understand it a bit more from that code.

I'm off to try and work it all out now thanks
post #4 of 9
Thread Starter 
Quote:
Originally Posted by Mrzev View Post

I dont quite understand what your talking about. Basically, you have a 2d array of values, unless there is a formula to define the price.

Code:

var items = [
  [85, 90  ,99,120],
  [90, 95,  111,130],
  [95, 100, 120,140]
];

/// you get the index of the Fence Type, say Colorbonded Post & Rail Fence   = 1
// you get the index of the Fence Height, say 1.8  = 2

console.log(items[1][2]);  \\returns 111


Another Option is to add attributes to objects. I.E.
Code:
Var Fence1 = { 'Small':40,'Medium':50,'Large':60};
Fence1.Small   // returns 40

// You can also have the all nested inside.
var Prices = { 
'ColorPanelFence':{ 'Small':40,'Medium':50,'Large':60},
'ColorPostAndRail':{ 'Small':42,'Medium':55,'Large':62},
'TreatedPineButt':{ 'Small':46,'Medium':52,'Large':66},
'TreatedPineLap':{ 'Small':48,'Medium':60,'Large':68}
};

Prices.ColorPostAndRail.Small  // returns   42

Prices['ColorPostAndRail']['Small']  // Also returns 42


Well gave it a go but haven't been able to do it yet.

While I work on it source is at https://jsfiddle.net/bsz7zv1c/ it works on the web but not in fiddle.

need to navigate using the radio buttons under choose fence type to give the same options for the height but the different prices like you were trying to show me how to do.

I understand it a bit but I run in to trouble of when they choose the height for it to get the value for that particular fence.

If i can't get my head around it will just do that part in html/CSS or something like that.

At the moment I am just trying it out with the radio button just loading a different page

Ha feel so dumb now.

thanks for trying
Edited by mixsetup - 4/3/17 at 3:51pm
post #5 of 9
Dont worry about feeling dumb with programming, i have been doing this for 8-9 years i think and every week I learn something that makes me feel dumb. Last week I modified a query i had written to use a different technique a coworker showed me... went from 10 seconds to less than a second.


As for jsfiddle, it does a good job for the most part, but some things it doesnt handle properly, and you gotta do stupid work around to get it to work... in your case, i think you dont understand the window.onload and "closures" in javascript.

One thing with web development is learning how to use debugging tools! I personally use Chrome's built in debugger. IE and Firefox have pretty much the same thing, but i think Chromes is a bit easier to work with. Its nice because you can also play around with the CSS and styles and see it change instantly.





So, looking at your code..

1. I dont see any function for calculateTotal.
2. You set all of your Radio buttons with the same ID. Enumerate via name.
Code:
var radios = document.getElementsByName('selectedtype');

for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
        // do whatever you want with the checked radio
        alert(radios[i].value);

        // only one radio can be logically checked, don't check the rest
        break;
    }
}


window.onload will run once the html objects finish rendering. HTML, Javascript, and CSS, all goes top down. First thing is done first. So if your JS file is at the top of the page, and you do something like mybutton.addEventListener , it wont work because myButton does not exist. If the JS file was at the bottom of the HTML, then it would work. Closures work in that you get to see everything before you, and yourself. So, if you tried using your quote variable outside of the .onload function you created, it would not exist. Functions inside of that function will have access to it.
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
post #6 of 9
Thread Starter 
Hi thank you again for your help.

I was having a look at it last night and noticed it was not changing values. It was multiplying the Colorbond Panel Fence 1.2 High $85 all the time so I fixed that and that is working.
Then figured out Chrome,IE and Safari didn't like the onclick but worked when I changed that to onchange.

Today I will be trying to work out the var like the code you gave me and else if I think so if you click on radio 1 it will have those values in list 1 else 2 and so on hpe it all works a bit more today.

So do you mean put the JavaScript at the bottom? I have seen some videos on YouTube where they do that I was just going to have a link to a JavaScript folder with the file in it.
post #7 of 9
The HTML file needs to know what file and where it is. So you have a < script src= yourfile.js. that's where the javascript is loaded. You can pretty much put that anywhere. The top is typical tho. You can also remove the src field and put the is code right there inside the < script. ... / script>
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
post #8 of 9
Thread Starter 
Thanks I always thought the JavaScript file or link to the containing folder had to be between the tags. Have had a bit of a look around though and noticed with forms some put bits within all the HTML.
post #9 of 9
Thread Starter 
Hi Thanks for your help I think I might have figured out finally what I am doing.
All I have to do is code and test.
Edited by mixsetup - 4/10/17 at 7:48pm
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Coding and Programming
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Quote form javascript.