Hallo,
ich habe eine mobile Website mit jQuery Mobile entwickelt. Dazu habe unter dem Menüpunkt "Probetraining" ein Formular, was an sich auch gut funktioniert. Doch leider ließt er die Noitz nicht aus, ich bekomme lediglich diese Mail zugesant:
http://danielsfotos.com/forum/1.PNG
http://danielsfotos.com/forum/2.png
http://danielsfotos.com/forum/3.png
Hier mein Code:
Submitform.php
PHP
<?php
header('content-type: application/json; charset=utf-8');
if (isset($_GET['name'])) {
$name = strip_tags($_GET['name']);
$email = strip_tags($_GET['email']);
$telefon = strip_tags($_GET['telefon']);
$notiz = strip_tags($_GET['notiz']);
$header = "Von: ". name . " <" . $email . ">rn";
$empfaenger = 'billbos@hotmail.de';
$titel = 'Das Kontaktformular wurde ausgeführt';
$mailtext = "
Name: $name
E-Mail: $email
Telefon: $telefon
Notiz: $notiz
";
$result = 'success';
if (mail($empfaenger, $titel, $mailtext, $header)) {
echo json_encode($result);
}
}
?>Hier das HTML
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fitness World Rodgau - Startseite (Mobil)</title>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<!-- WebApp Deifnition -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- Apple -->
<link rel="apple-touch-icon-precomposed" href="bilder/icon-ipad.png" sizes="72x72" />
<link rel="apple-touch-icon-precomposed" href="bilder/icon-iphone-retina.png" sizes="114x114" />
<link rel="apple-touch-icon-precomposed" href="bilder/icon-ipad-retina.png" sizes="144x144" />
<link rel="apple-touch-icon-precomposed" href="bilder/icon-iphone.png" />
<!-- CSS Formatierung individuell -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- google FONT API -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div data-role="page" id="probetraining">
<div data-role="header" data-theme="a" data-position="fixed"><a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-position="fixed"data-tap-toggle="false">Hier wird kein Text angezeigt</a><h1 style="font-size: 1em;">Infos</h1></div> <!-- HEADER -->
<div data-role="content" data-theme="a">
<h4>Probetraining</h4>
<hr />
<p>
Sie haben Gefallen an unserem Angebot gefunden? Dann kommen Sie doch gleich zum Probetraining vorbei. Füllen Sie dazu einfach das unten stehende Formular aus. Wir melden uns binnen 24 Stunden bei Ihnen, um Ihnen den gewünschten Termin zu bestätigen.
<hr />
<form id="probetraining">
<div data-role="fieldcontain">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="email">E-Mail:</label>
<input type="email" name="email" id="email" value="" />
</div>
<div data-role="fieldcontain">
<label for="telefon">Telefon:</label>
<input type="tel" name="telefon" id="telefon" value="" />
</div>
<!--
<p>Wann möchten Sie kommen?</p>
<fieldset data-role="controlgroup" data-type="horizontal">
<label for="select-choice-month">Month</label>
<select name="select-choice-month" id="select-choice-month">
<option>Monat</option>
<option value="jan">January</option>
<option value="feb">Februar</option>
<option value="mar">März</option>
<option value="apr">April</option>
<option value="mai">Mai</option>
<option value="jun">Juni</option>
<option value="jul">Juli</option>
<option value="aug">August</option>
<option value="sep">September</option>
<option value="okt">Oktober</option>
<option value="nov">November</option>
<option value="dez">Dezember</option>
</select>
<label for="select-choice-day" style=" width: 50%;">Day</label>
<select name="select-choice-day" id="select-choice-day">
<option>Tag</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</fieldset>
-->
<div data-role="fieldcontain">
<label for="name">Notiz:</label>
<textarea name="notiz" id="notiz" value=""></textarea>
</div>
<button type="submit" data-theme="a" id="submitform">Abschicken</button>
</form>
</div> <!-- CONTENT -->
<script type="text/javascript">
//Formdaten an PHP-Datei senden
$("form#probetraining").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var name = $('#name').attr('value');
var email = $('#email').attr('value');
var telefon = $('#telefon').attr('value');
var anfrage = $('#notiz').attr('value');
$.ajax({
type: "get",
url: "submitform.php",
data: "name="+ name +"&email="+ email+"&telefon="+ telefon+"¬iz="+ notiz,
success: function(){
$.mobile.changePage("probetraining-erfolgreich.html", { transition: "flip"} );
//alert('test');
}
});
return false;
});
</script>
</div> <!-- PAGE -->
</body>
</html>Dankeschön!