Need Help With JS!

JavaScript
1

Heyy!

I wrote an HTML Code for my calculation but I can’t seem to understand JS to make it calculate on wordpress widget. Can someone please help me?

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Template</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<h1>Template</h1>
<div class="price-calculator">
        	<div class="container">
            	<div class="calculate-price">
                <form>
                	<h2><i class="fa fa-mortar-board"></i>Calculate The Price</h2>
                    
                    <div class="calculator-fields">
                    	<ul>
                        	<li>
                            	<label>Academic level</label>
                                <select name="">
                                	<option value="2" selected>Undergraduate</option>
                                	<option value="3">Graduated</option>
                                	<option value="4">Masters</option>
                                </select>
                            </li>
                        	<li>
                            	<label>Type Of Paper</label>
                                <select name="">
                                	<option value="2" selected>Essay</option>
                                	<option value="3">Letter</option>
                                	<option value="4">Aplication</option>
                                </select>
                            </li>
                        	<li>
                            	<label>Deadline</label>
                                <select name="">
                                	<option value="2" selected>07 Days</option>
                                	<option value="3">05 Days</option>
                                	<option value="4">03 Days</option>
                                </select>
                            </li>
                        	<li>
                            	<label>Pages</label>
                                <select name="">
                                	<option value="2" selected>01 (275 words)</option>
                                	<option value="3">02 (550 words)</option>
                                	<option value="4">03 (825 words)</option>
                                </select>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="calculate-bottom">
                    <input name="submit" type="submit" value="Calculate"/>
                    </div>
                </form>
                </div>
            </div>
        </div>
	</div>	
</body>
</html>
2

Can you be more specific?You want to send data in database?You want to add the values of the select element and the grab them?

3

No no not at all. I Just want them the client to know how much it would cost them. Its not supposed to be stored on the database rather its just supposed to give the client a rough id when they click it.

4

You’ll need to do two things before you can continue.

The <select name=""> tags won’t cut it. You should give them names so that they can be passed when the form is submitted.
If you don’t want to use querySelector you should give each a unique Id so JavaScript code can get them easily with byElementId .
And you have an extra </div> tag that should be removed.

Then, you have 4 selects.
Academic level
Type Of Paper
Deadline
Pages

You need to think about what you mean by “calculate”.
Simply add the values? Multiply them? Something else?

Might it be easier to give them different values like
2-3-4, 20-30-40, 200-300-400, 2000-3000-4000

then do a switch case for the possible combinations?

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.