I have a table named, student_db which is like this :-
Name Gender Grade City
John Male 2 North
Dave Male 4 North
Garry Male 3 North
Chirsty Female 5 East
Monica Female 4 East
Andrew Male 3 East
Patrick Male 7 South
Maria Female 3 South
I need to select 3 students with this list, names of the students are taken as input. But there are some constraints :
1) 1 Female has to be selected.
2) A maximum of 2 persons from the same city can be selected.
3) Sum of the grade of the selected 3 persons cannot exceed 11.
4) Once three valid selections are made, rest of the checkboxes should freeze automatically.
5) If while selecting a person any of the constraint gets violated, that particular selections gets unchecked and a alert message is displayed to the user.
Is it possible to add so many constraints to a check box ??
EDIT
I have managed to add 2 constraints :-
1) If the grade sum exceeds 11, an alert message will get displayed.
2) Once three valid selections are made, rest checkboxes will get freezed.
This is what I've tried :-
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function() {
var max = 3;
var checkboxes = $('input[type="checkbox"]');
checkboxes.change(function() {
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
});
});
</script>
<script>
function jsFunction(element) {
var sum = 0,i;
var elements = document.getElementsByClassName('chkbox');
for (i = 0; i<elements.length; i++) {
if (elements[i].checked) {
sum += parseInt(elements[i].value);
}
}
if (sum > 11) {
alert("11 maximum grade allowed !!");
element.checked = false;
}
}
</script>
<form name='checkbox1[]' method="post" action="select_student.php">
<label class="cb1" for="checkbox1"> </label>
<input type="hidden" name="checkbox1[]" id="check" value="null">
<?php
session_start();
mysql_connect("localhost", "my_db", "my_password") or die (mysql_error ());
mysql_select_db("my_db") or die(mysql_error());
$strSQL = "SELECT Name,Grade FROM student_db";
$rs = mysql_query($strSQL);
echo "<b><h2>List of Students :-</h2></b>";
while($row = mysql_fetch_array($rs)) {
$man = $row['Name'];
echo '<input type="checkbox" value="'.$row['Name'].'|'.$row['Grade'].'" class="chkbox" name="checkbox1[]" onchange="jsFunction(this)" />';
echo $man;
}
?>
<br>
<input type="submit" value="SUBMIT" id="button1" style= "height:40px; width:150px; font-weight: bold; font-size:10;">
</form>
The JS function is used to check whether the Grade sum is exceeding 11 or not and the jQuery Functions freezes other boxes once 3 valid selections are made. But I am unable to add other constraints.
Sorry for the delayed response! I got caught up in some other stuff yesterday and had to pick back up this morning . . . hopefully, this will help you out.
What you have is a pretty good start . . . here's a few changes that I would suggest:
1) First off, some HTML changes:
store off all of your student data (i.e., the "gender", "grade", and "city" values) as data attributes in the checkbox, like this:
<input type="checkbox" value="NAME_VALUE" class="chkbox" name="checkbox1[]"
data-gender="GENDER_VALUE" data-grade="GRADE_VALUE" data-city="CITY_VALUE"
onchange="jsFunction(this)" />
next, since you are already using jQuery, for clarity and easy of maintenance in the future, apply the onchange event listener dynamically, rather than hardcoding it into the input, like this:
<input type="checkbox" value="NAME_VALUE" class="chkbox" name="checkbox1[]"
data-gender="GENDER_VALUE" data-grade="GRADE_VALUE" data-city="CITY_VALUE" />
. . . and, in the script, after the page load:
$(".chkbox").on("change", jsFunction);
And, finally (just as a heads up), if you intend to us a <label> tag with a for attribute (e.g., you are showing one for your "hidden" input), you will need a matching id attribute in yout <input>, in order for them to be paired.
2) As for your scripting, I threw together the following that accomplishes all of the validation checks that you were looking for and standardizes some of your coding (you had a heavily mixed use of jQuery and vanilla JS).
var MAX_CHECKED = 3;
var MAX_GRADE = 11;
$("document").ready(function() {
$(".chkbox").on("change", jsFunction);
});
function jsFunction() {
var sum = 0;
var cities = [];
var elements = $(".chkbox");
var checkedElements = elements.filter(":checked");
checkedElements.each(function() {
sum += parseInt($(this).data("grade"), 10);
cities.push($(this).data("city"));
});
var uniqueCities = cities.filter(function(currentCity, cityIndex, cityArray) {
return (cityIndex === cityArray.indexOf(currentCity));
});
if (sum > MAX_GRADE ) {
alert(MAX_GRADE + " maximum grade allowed!!");
$(this).prop("checked", false);
}
else if (uniqueCities.length !== cities.length) {
alert("You may not select more than one student from each city!!");
$(this).prop("checked", false);
}
else {
if (checkedElements.length >= MAX_CHECKED) {
if (checkedElements.filter("[data-gender='Female']").length < 1) {
alert("At least one female student must be selected!!");
$(this).prop("checked", false);
}
else {
elements.filter(':not(:checked)').prop('disabled', true);
}
}
else {
elements.filter(':not(:checked)').prop('disabled', false);
}
}
}
Most of the code should be pretty straightforward . . . let me touch on a couple of the key or more complex parts . . .
Globals - I set your global variables (MAX_CHECKED and MAX_GRADE) up at the top and outside of any functions, so that they are accessible anywhere and easy to update (i.e., you don't have to search through the code to find them).
"Setup code" - I moved your setup code from the jQuery(function() { that you used to $("document").ready(function() { simply for readablity. :) They do the same thing.
Event binding the checkboxes - as I mentioned, I did this dynamically rather than inline, using $(".chkbox").on("change", jsFunction);. Additionally, you'll notice that I changed the selector. Since each checkbox is tagged with the "chkbox" class, I selected based on that, it is significantly faster than $('input[type="checkbox"]')
The validation logic - basically, you want to catch invalid entries as soon as possible and you have rules that fall into two categories: rules that can be checked before the maximum number of selections have been met and rules that require the maximum. The "max grade" and "unique cities" checks should be caught as soon as they are hit, but you must wait until you've hit the maximum selections before you can check for gender, since the user can always check a female student later on, if they have not yet hit the max.
uniqueCities - the function used to create this value isn't quite as straighforward as the rest of the code, so I'll clarify it a little. It is using the .filter method that is native to Arrays, to trim down the selections to only unique values. It does this by doing a callback which checks to see if the index of the current item (i.e., cityIndex) is the same as the index of the first instance of that value (i.e., currentCity) in the array (i.e., cityArray). If it is, then that value is added to the "filtered" array (i.e., uniqueCities).
"undisabling" - I added in an else statement that re-enables the checkboxes if the maximum number of selections have been made, but then one of them is unchecked. This will allow the user to change their mind, even if they had already hit the max, at some point.
A couple of extra notes
1) You need to change the value of Patrick's to "6" at the most, in order to check that the "at least one female" logic is working . . . currently, the lowest combination of all male students, from unique cities, is John, Garry, and Patrick, but their grade total is 12, so it triggers the "grade sum is too high" validation first. :)
2) While I didn't cover the code for this, you need to develop a version of this validation logic for your "Submit" button as well. If you don't, then someone could select two boys and hit "Submit" and the "at least one female" logic would never be triggered.
One way would be to put the "at least one female" validation in its own method and calling both from the "I just clicked on a checkbox" validation and in a "I just clicked on the submit button" validation. The main difference would be that, for the submit, you would not check to see if the max number of selections had been made, before triggering the "female" check. That would also be a good place to add an "at least one selection has been made" validation, as well.
Related
#JonoJames answered this question for me.
The HTML form we use has a set of checkboxes which are checked depending on which room is being hired. These boxes are named room1, room2 and room3. When one, two or all three boxes are checked, the cost of that rooms hire is put into corresponding, hidden, input boxes named room1value, room2value and room3value.
We later needed to add deposits for the room hire which we did by adding, for example, document.forms["bookform"].room1deposit.value = Rooms[0].deposit; to the function check() script for each of the rooms. This added the deposit for the room automatically and it worked fine.
However now, occasionally, a deposit may not be required, so we put a checkbox in the form that is checked when a deposit is required. This checkbox, which is called depositRequired, covers all three rooms. So if someone hires Room 1 and a deposit is required, boxes room1 and depositRequired are checked. Similarly, If the boxes for Room 2 and Room 3 are checked and a deposit is required, the depositRequired checkbox is selected too. If a room or rooms are hired and a deposit is not required, the required room boxes are checked but the depositRequired checkbox remains unselected.
We've tried ((document.forms["bookform"].room1value.checked) || (document.forms["bookform"].room1deposit.checked)), ((document.forms["bookform"].room1deposit.checked) && (document.forms["bookform"].room1value.checked)) to the if statements and we've tried adding and else if to the statements, separate if statements and variations of the above but we can't get anything to work.
Our current code is:
function Check() {
//room1
if (document.forms["bookform"].room1.checked)
{
document.forms["bookform"].room1value.value = Rooms[0].cost;
document.forms["bookform"].room1deposit.value = Rooms[0].deposit;
//console.log(Rooms[0].cost);
}else{
document.forms["bookform"].room1value.value ='';
document.forms["bookform"].room1deposit.value = '';
}
//room2
if (document.forms["bookform"].room2.checked)
{
document.forms["bookform"].room2value.value = Rooms[1].cost;
document.forms["bookform"].room2deposit.value = Rooms[1].deposit;
//console.log(Rooms[1].cost);
}else{
document.forms["bookform"].room2value.value ='';
document.forms["bookform"].room2deposit.value = '';
}
//room3
if (document.forms["bookform"].room3.checked)
{
document.forms["bookform"].room3value.value = Rooms[2].cost;
document.forms["bookform"].room3deposit.value = Rooms[2].deposit;
//console.log(Rooms[2].cost);
}else{
document.forms["bookform"].room3value.value ='';
document.forms["bookform"].room3deposit.value = '';
}
}
and the output boxes are:
<input type="hidden" name="room1value" readonly>
<input type="hidden" name="room1deposit" readonly>
<input type="hidden" name="room2value" readonly>
<input type="hidden" name="room2deposit" readonly>
<input type="hidden" name="room3value" readonly>
<input type="hidden" name="room3deposit" readonly>
How do we add the deposit if the deposit checkbox is checked and the specific room is checked?
For example, if Room 1 is checked the cost of the room is output to the room1value input box but the deposit cost for Room1 is output to the input box room1deposit only if the deposit required checkbox is checked else it remains blank.
In your attempts you have tried using room1value.checked and room1deposit.checked, but those are not check boxes, but the hidden inputs in which you want to write the amounts. Instead you should use depositRequired.checked.
So you would need a nested if, like this:
if (document.forms["bookform"].room1.checked) {
document.forms["bookform"].room1value.value = Rooms[0].cost;
if (document.forms["bookform"].depositRequired.checked) { // <--- Additional IF
document.forms["bookform"].room1deposit.value = Rooms[0].deposit;
}
} // ... etc
I would however also point out that you can shorten your code a bit, as it currently has a lot of repetition.
Secondly, it would be good if you would use a lower case first letter for your function check and array rooms, as an initial capital is commonly used for class names (constructors).
Here is how you could deal with all three groups in a single loop:
function check() { // <--- initial char lower case
let frm = document.forms["bookform"]; // avoid reading the document repetitively
for (let i = 1; i <= 3; i++) {
// Use dynamic properties all over...
frm[`room${i}value`].value = ""; // default
frm[`room${i}deposit`].value = ""; // default
if (frm[`room${i}`].checked) {
frm[`room${i}value`].value = rooms[i].cost; // lowercase
if (frm.depositRequired.checked) { // <--- Additional IF
frm[`room${i}deposit`].value = rooms[i].deposit; // lowercase
}
}
}
}
I am trying to learn some HTML and JavaScript (from mostly using C#) and I got a test from a friend in making a small webstore.
I have some checkboxes for the different items, and the goal is if I combine different products, I get a discount. However there are two items with the same value that need different combinations for discounts. But the challange is that I am NOT ALLOWED to edit the html file.
Is there a way to tell these items apart with JavaScript? The only thing differing is the <h2>.
Again, I am very new to JavaScript, but I do have some knowledge of scripting, so if you got an solution, please do comment on what the function does so I can learn it better to implement in the code.
HTML and code:
Note that this is not the whole code, this is the only parts that I think is connected to each other for this question. If full script is wished for, I will make a pastebin for it.
$('body').on('click', '.fruit, .stuff1, .stuff2, .stuff3', update);
function update(){
let fruit = $('.fruit>input:checked').val();
fruit = parseInt(fruit);
fruit = fruit? fruit : 0;
let price = fruit + stuff1 + stuff2 + stuff3;
//If combined, get discount
//This is for the banana
//This should only apply for banana
if(fruit == 200 && stuff1 == 100)
{
price = price * 0.8;
$('#confirm').children('h2').text("You get 20% discount");
}
//This is an second discount in a else if ladder
//This is for apple
//This should only apply for apple
else if(fruit == 200 && stuff1 == 150)
{
price = price * 0.9;
$('#confirm').children('h2').text("You get 10% discount");
}
else
{
$('#confirm').children('h2').text("You dident get anny discount");
}
$('#price').val(price);
display(price);
}
<div class="picker">
<div class="fruit">
<section>
<h2>Banana</h2>
</section>
<input type="radio" name="fruit" value="200">
</div>
<div class="fruit">
<section>
<h2>Apple</h2>
</section>
<input type="radio" name="fruit" value="200">
</div>
</div>
When you use document.getElementsByName("fruit") in JavaScript it returns an array; so, document.getElementsByName("fruit")[0] returns the first radio and document.getElementsByName("fruit")[1] returns the second radio.
That said, you are using jQuery which is a JavaScript Framework. The syntax in jQuery to do the same thing is the slightly shorter $('[name="fruit"]').
I try to achieve Total of two input fields and those fields got their value dynamically from database after selecting a dropdown option. The html code and the sql query looks like below:
<select name="getData" ID="getData" onchange="getData()">
<option value="Select">Select Subscription Package</option>
<?php
$sql = "SELECT * FROM package WHERE status = 1";
$result = $connect->query($sql);
while($row = mysqli_fetch_row($result)){
echo '<option data-price="'.$row[4].'" value='.$row[0].'> '.$row[1].' </option>';
}
?>
</select>
<input type="text" id="price1" name="price1"/>
<input type="text" id="price2" name="price2"/>
<input type="text" id="totalAmount" name="totalAmount" onblur="totalCalc()">
Value of price1 & price2 changes when SELECT Option changed. Now I need to get total of these two fields by javascript. The js code is below:
<script>
function totalCalc() {
var A = document.getElementById("price1").value;
var B = document.getElementById("price2").value;
var C = A + B;
document.getElementById("totalAmount").value = C;
}
</script>
I got the total but it needs to click the total amount field. I want the calculation should be done automatically right after the first two fields got their values dynamically.
Any help is appreciated.
You should just set up change event handlers on both inputs that point to your totalCalc function and then, at the end of your getData() function, manually trigger the change event of one of the inputs.
If the code in getData is asynchronous, then the code that manually triggers the change event should be included in the success handler of the operation.
A note about the UI. If the two price fields are being auto-populated and users won't be inputting anything into them manually, disabling the fields is probably appropriate. With regards to the final total, an input there may not make sense at all - you just need to show the result, so a span element would work.
Also, inline HTML event attributes (onclick, onchange, etc.) should not be used. There are many reasons why this 20+ year old technique needs to die the death it deserves, but because so many people don't take the time to really learn JavaScript and modern best-practices, they just copy someone else's code that uses them and go on their merry way.
So, in the code below, I'm showing how to solve this problem using modern, standards-based code that follows best-practices.
// Get references to the DOM elements you'll need to work with
let a = document.getElementById("price1");
let b = document.getElementById("price2");
let total = document.getElementById("totalAmount");
let select = document.getElementById("getData");
let price1 = document.getElementById("price1");
let price2 = document.getElementById("price2");
// Set up event handlers in JavaScript, not HTML
select.addEventListener("change", getData);
price1.addEventListener("change", totalCalc);
price2.addEventListener("change", totalCalc);
function totalCalc() {
total.textContent = +a.value + +b.value;
}
function getData(){
// This is just mean to replicate what SQL does
price1.value = 15;
price2.value = 27;
// Manually trigger the change event for either one of the inputs
// If the existing code in getData is asynchronous, then this code
// should be added to the "success" callback. If not, it can just be
// placed at the end of the function as I'm showing it here.
var event = new Event('change');
price1.dispatchEvent(event);
}
<select name="getData" id="getData">
<option value="Select">Select Subscription Package</option>
<option>Data 1 from SQL</option>
<option>Data 2 from SQL</option>
<option>Data 3 from SQL</option>
</select>
<input type="text" id="price1" name="price1" disabled>
<input type="text" id="price2" name="price2" disabled>
<!-- No need to place the result in an <input> since users won't
be inputted data here. You just need to show it. -->
<span id="totalAmount"></span>
<!doctype html>
<html>
<head>
<title> Daily Recommended Exercise </title>
</head>
<body>
<h2>Your Daily Exercise Schedule</h2>
<p>Please select your age group:</p>
<form>
0 - 5: <input type = "radio" name = "PickAge" value = "Age1">
<br/>
6 - 17: <input type = "radio" name = "PickAge" value = "Age2">
<br/>
18 - 64: <input type = "radio" name = "PickAge" value = "Age3">
<br/>
65 - 150: <input type = "radio" name = "PickAge" value = "Age4">
<br/>
<input type="button" onclick = "exerciseRecommend();" value = "Enter"></input>
</form>
<script type = "text/javascript">
function exerciseRecommend()
{
var age = document.getElementsByName("PickAge");
if (age=="Age1")
{
alert("Physical activity in infants and young children is necessary for healthy growth and development. There are no guidelines for children at this age though regular physical activity is recommended.");
}
else if (age=="Age2")
{
alert("At this age you should do 60 minutes or more of physical activity each day. This includes, aerobic endurance and strength exercises.");
}
else if (age=="Age3")
{
alert("At this age you should be doing two hours and thirty minutes or more of moderate aerobic endurance and strength exercises activity every week OR one hour fifteen minutes of intense aerobic endurance and strength exercises activity OR a mix of the two.");
}
else if (age=="Age4")
{
alert("At this age you should be exercising 2-3 hours a week. It is recommended that you should be doing mild endurance and strength activities.");
}
}
</script>
</body>
</html>
What is wrong with this code? Whenever I press the button nothing happens!! I have tried again and again but for some reason it is not finding the user input and outputting any alert values! Please help!
Shashank is correct that best practice is to attach the event listener through JS itself, but in your case I'll assume that you're learning the language and just want to know what's up and how it works.
So, let's take a look at your age variable. If you console.log(age) after you define it, it will return a Node list of all of the elements with the name "PickAge". What you want is a specific one of those, the checked one.
// Get a list of all the select-able ages
var allAges = document.getElementsByName("PickAge");
// Define a variable that will hold our selected age
var age;
// Iterate through all of the select-able ages
for (i = 0; i < allAges.length; i++) {
// If the selected age is checked, set it to the "age" variable
if (allAges[i].checked === true) {
// We grab only the value here because that's what you check later
age = allAges[i].value;
}
}
That should give you the correct result that will work with your if < alert. You might want to add an else statement at the end in case the user doesn't select any age, though.
Just to make sure you know, this isn't best practice, efficient, or the best way of doing this. This is just a quick example to help you understand the process a bit to help you get the basis for the language.
I would like to send the selected objects to a email address.
here is a demo:
http://jsfiddle.net/62g3s8sz/
I know a email can be send with PHP and i have tried many ways but all unsuccessful.
The email needs to correspond with the items selected.
So if Cooler Master K-380 is selected with AMD FM2 A6-6400K Dual Core 3,9GHz i need it to list these items
Case : Cooler Master K-380 : price
Processor: AMD FM2 A6-6400K Dual Core 3,9GHz : price
And then send it to the email address that the person is logged in with.
i know that $loggedInUser->email will display the email address.
If anyone knows how to send all this information within a email to the logged in person that would be great.
HTML:
<script type="text/javascript" src="js/formcalc.js"></script>
<form method="POST" name="contactform" action="contact-form.php" id="computerform">
<div>
<div class="cont_order">
<fieldset>
<legend></legend>
<label>Case</label>
<br>
<label class='radiolabel'>
<input checked="checked" type="radio" name="selectedcase" value="2001" onclick="calculateTotal()" />Cooler Master K-350 - ($10)</label>
<br/>
<label class='radiolabel'>
<input type="radio" name="selectedcase" value="2002" onclick="calculateTotal()" />Cooler Master K-380 - ($20)</label>
<br/>
<br/>
<label>Processor</label>
<br>
<label class='radiolabel'>
<input checked="checked" type="radio" name="selectedprocessor" value="3001" onclick="calculateTotal()" />AMD FM2 A4-5300 Dual Core 3,4GHz - ($10)</label>
<br/>
<label class='radiolabel'>
<input type="radio" name="selectedprocessor" value="3002" onclick="calculateTotal()" />AMD FM2 A6-6400K Dual Core 3,9GHz - ($20)</label>
<br/>
<br/>
<label>Totale price</label>
<div class="total">
<div id="case"></div>
<div id="totalPrice"></div>
</div>
<br>
</fieldset>
</div>
<input type='submit' id='submit' value='Bestel' onclick="calculateTotal()" />
</div>
</form>
JavaScript code
var case_prices = new Array();
case_prices["2001"]=10;
case_prices["2002"]=20;
var processor_prices = new Array();
processor_prices["3001"]=10;
processor_prices["3002"]=20;
window.onload = function()
{
calculateTotal();
}
// getCasePrice() finds the price based on the selected case
// Here, we need to take user's the selection from radio button selection
function getCasePrice()
{
var casePrice=0;
//Get a reference to the form id="computerform"
var theForm = document.forms["computerform"];
//Get a reference to the case the user Chooses name=selectedcase":
var selectedCase = theForm.elements["selectedcase"];
//We loop through each radio buttons
for(var i = 0; i < selectedCase.length; i++)
{
//if the radio button is checked
if(selectedCase[i].checked)
{
//we set cakeSizePrice to the value of the selected radio button
//i.e. if the user choose the 8" cake we set it to 25
//by using the cake_prices array
//We get the selected Items value
//For example cake_prices["Round8".value]"
casePrice = case_prices[selectedCase[i].value];
//If we get a match then we break out of this loop
//No reason to continue if we get a match
break;
}
}
//We return the cakeSizePrice
return casePrice;
}
// getCasePrice() finds the price based on the selected case
// Here, we need to take user's the selection from radio button selection
function getProcessorPrice()
{
var processorPrice=0;
//Get a reference to the form id="computerform"
var theForm = document.forms["computerform"];
//Get a reference to the cake the user Chooses name=selectedprocessor":
var selectedProcessor = theForm.elements["selectedprocessor"];
//We loop through each radio buttons
for(var i = 0; i < selectedProcessor.length; i++)
{
//if the radio button is checked
if(selectedProcessor[i].checked)
{
//we set cakeSizePrice to the value of the selected radio button
//i.e. if the user choose the 8" cake we set it to 25
//by using the cake_prices array
//We get the selected Items value
//For example cake_prices["Round8".value]"
processorPrice = processor_prices[selectedProcessor[i].value];
//If we get a match then we break out of this loop
//No reason to continue if we get a match
break;
}
}
//We return the cakeSizePrice
return processorPrice;
}
function calculateTotal()
{
//Here we get the total price by calling our function
//Each function returns a number so by calling them we add the values they return together
var computerPrice = getCasePrice() + getProcessorPrice() + getCoolerPrice() + getMotherboardPrice();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Totale prijs: €"+computerPrice ;
}
Thanks :)
I don't like just pasting a link to the answer but ...
http://php.net/manual/en/function.mail.php
So all you need is something like this
$content = "..write it here yadda yadda whatever is your mail content ..";
$ok = mail($mailTo,"Hello, this is the mail subject",$content);
Note this will send plain mail, there are a few extra steps to make HTML mail, all covered on the link above. Good luck
Few reminders: it will probably not work on your local machine unless you have a mail daemon installed and working with PHP, and also you might need to tweak the last parameters on that mail() function depending on how PHP is installed.
In php, you send mails through the mail() function (or you could use an external mailer plugin), which requires a few basic concepts. Example:
$to = "email-from-user#some-email-client.com";
$subject = "You just made an order";
$body = $message;
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= "From: noreply#somewebsite.com";
if (mail ($to, $subject, $body, $headers)) {
echo "1";
}
Quickly explained, you need a few parameters for the function to work. I just moved over some items from my own mail function, but i ll explain. You need a target (the $to variable) a subject (the $subject variable and the content, which i defined here as $body ... now i added headers too, which is additional, but for you, it might be important. The first two lines allows you to use HTML in the email, which you can use to markup your mail, such as using tables. Also you can specify where the email came from.
I use an echo there to check if it got through the mail function, if so, i use that parameter in an ajax call return to put up an appending div.
Remember, calling an external stylesheet isnt working in this so preferly, you have to do inline styling on your elements.
edit
I see you re trying to get the totals from your fieldset up in the email. Since you use a div to show the end content, sending a form will not allow you to transfer the variable from the total. (btw, if you submit this form, you actually go with 3002 and 2001 for example as variables, instead of the names in the email, thus you got to do some query work to push out the right names) Since I asume these prices are also in a database, you can calculate from there on the price as fixed and push it out in a query as well, which you then have to use in the $body variable.
Trying to point you in the right direction
The PHP code must be in contact-form.php, or you must change that name in the HTML.
Use the mail() function of PHP.
In PHP, the form data is available in the superglobal variable $_REQUEST.
Try print_r($_REQUEST); to see what is in there.