Contact form almost working
Ok, so I have my first page ready where I do a calculation which is fine. From this page you're supposed to move on to my second page, where I have a contact form. This form sends an email to me. This works fine. BUT when the user clicks Submit I get an 'Error loading page' (or in firefox a white page with the text 'Undefined'.)
I have been told, that the Undefined-message is shown because the page I'm linking to is not a valid jqm-page.
I WOULD LIKE the contact form to respond me a message - 'Thank you for your email' and a Ok-button that sends the user back to the firstpage, ready to do a new calculation.
This is my app:
http://superfly.dk/e4d/v3/index.html
Here's my code:
JQM+HTML
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="my.css" />
<style>
/* App custom styles */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
<script src="my.js">
</script>
<!--// load jQuery Plug-ins //-->
<!-- <script type="text/javascript" src="field/jquery.field.js"></script> -->
<script type="text/javascript" src="jquery.calculation.js"></script>
<script type="text/javascript">
$(document).ready(
function (){
// update the plug-in version
$("#idPluginVersion").text($.Calculation.version);
// bind the recalc function to the quantity fields
// $("input[name^=qty_item_]").slider("refresh");
$("input[name^=qty_item_]").bind("change", recalc);
// run the calculation function now
recalc();
//$("#qty_item_1").change(function(){
// var slider_value = $(this).val()
// console.log(slider_value)
// })
}
);
function recalc(){
$("[id^=total_item]").calc(
// the equation to use for the calculation
//"qty * price",
"((qty * 4700)-11840)-(qty * 3100)",
// define the variables used in the equation, these can be a jQuery object
{
qty: $("input[name^=qty_item_1]"),
price: $("[id^=price_item_]")
},
// define the formatting callback, the results of the calculation are passed to this function
function (s){
// return the number as a dollar amount
return "Kr. " + s.toFixed(0);
},
// define the finish callback, this runs after the calculation has been complete
function ($this){
// sum the total of the $("[id^=total_item]") selector
var sum = $this.sum();
var amount = $("input[name^=qty_item_1]").val(); // OK
$("#amount").val(amount);
$("#totalprice").val(sum);
$("#grandTotal").text(
// round the results to 2 digits
"Kr. " + sum.toFixed(0)
);
}
);
}
//
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h5>
E4D Beregneren - kan det betale sig?
</h5>
</div>
<div data-role="content" style="padding: 15px">
<div data-role="fieldcontain">
<h1 style="text-align:center;">Hvor mange fuldkeramiske kroner <br/>laver klinikken om måneden?</h1>
<fieldset data-role="controlgroup">
<label for="qty_item_1">
</label>
<input name="qty_item_1" id="qty_item_1" value="7.4" min="0" max="100" data-highlight="true" type="range" />
</fieldset>
</div>
<div data-role="fieldcontain" id="total_item_1" style="text-align:center; vertical-align:middle; font-size:70px; margin-left:auto; margin-right: auto; display:block; width:500px; height:75px; border:1px solid #dedede;"></div>
<div style="display:block; width:400px;margin-left:auto; margin-right:auto;"><a href="#page2" data-direction="reverse" data-role="button" data-theme="b" style="margin-left:auto; margin-right:auto;height:60px;width:400px; font-size:24px;">Vil du høre mere?</a>
<a href="#popup" data-direction="reverse" data-role="button" data-theme="b" data-inline="true" style="float:right;">Se forudsætninger</a>
</div>
</div>
</div><!-- /page1 -->
<!-- Start of second page: #page2 -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Hvem er du?</h1>
</div><!-- /header -->
<div data-role="content">
<h2>Hvem er du?</h2>
<p>En formular som du kan sende</p>
<!-- Formular start -->
<div data-role="content" style="padding: 15px;">
<form action="send.php" method="POST" >
<input id="amount" name="amount" type="hidden" />
<input id="totalprice" name="totalprice" type="hidden" />
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinput1">
</label>
<input id="textinput1" placeholder="" value="Navn" name="firstname" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinput2">
</label>
<input id="textinput2" placeholder="" value="E-mail" name="e-mail" type="email" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinput3">
</label>
<input id="textinput3" placeholder="" value="Telefon" name="telefon" type="number" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textarea1">
</label>
<textarea id="textarea1" placeholder="" name="besked">
</textarea>
</fieldset>
</div>
<div data-role="fieldcontain" style="width:300px; margin-left:auto; margin-right:auto;">
<fieldset data-role="controlgroup">
<input type="submit" value="Submit Button" />
</fieldset>
</div>
<!-- <input data-inline="true" value="Send information" data-mini="false" type="submit" /> -->
</form> </div>
<!-- Formular slut -->
<!-- <p><a href="#page1" data-role="button" data-inline="true" data-icon="back">Ny beregning</a></p> -->
</div><!-- /content -->
</div><!-- /page two -->
<!-- Start of third page: #popup -->
<div data-role="page" id="popup">
<div data-role="header">
<h1>Forudsætninger</h1>
</div><!-- /header -->
<div data-role="content">
<h2>Forudsætninger</h2>
<p>Forudsætninger</p>
<p><a href="#page1" data-role="button" data-inline="true" data-icon="back">Tilbage</a></p>
</div><!-- /content -->
</div><!-- /page popup -->
<script>
</script>
</body>
</html>
PHP:
<?php
if($_SERVER['REQUEST_METHOD'] == "POST"){
$message_body = 'Navn: ' . $_POST['firstName'] . '
Mængde: ' . $_POST['amount'] . '
TotalPris: ' . $_POST['totalprice'] . '
E-mail: ' . $_POST['e-mail'] . '
Telefon: ' . $_POST['telefon'];
$to = 'my@emailaccount.com';
$subject = 'Der er post';
$message = $message_body;
$headers = 'From: my@emailaccount.com' . "\r\n" .
'Reply-To: ' . $_POST['email'] . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
header('Location: ' . $_POST['#page2']);
}
else{
echo 'There is no post information.';
}
?>