August 3, 201115 yr I've built a mobile app using HTML, CSS, Jquery and PHP and built it using PhoneGap Build. Everything works on my Android phone, except when I click to submit a form, I just get a blank white page. I used Chris Coyiers contact form as a base template (I'm rubbish with PHP). What's happening? Is PHP the issue? I've included the sendmail file and the form page below. <?php // CHANGE THE VARIABLES BELOW $EmailFrom = "michael.gunner@jetbookingdirect.com"; $EmailTo = "michael.gunner@jetbookingdirect.com"; $Subject = "Contact Form Submission"; $message = Trim(stripslashes($_POST['Message'])); $message = "Full Name: " . $_POST['name'] . "\n"; $message .= "Email: " . $_POST['email'] . "\n"; $message .= "Telephone: " . $_POST['number'] . "\n"; $message .= "Journey Type: " . $_POST['journeytype'] . "\n"; $message .= "From: " . $_POST['from'] . "\n"; $message .= "To: " . $_POST['to'] . "\n"; $message .= "Via: " . $_POST['via'] . "\n"; $message .= "PAX: " . $_POST['pax'] . "\n"; $message .= "Departure Day: " . $_POST['depday'] . "\n"; $message .= "Departure Month: " . $_POST['depmonth'] . "\n"; $message .= "Departure Year: " . $_POST['depyear'] . "\n"; $message .= "Departure Hour: " . $_POST['departurehour'] . "\n"; $message .= "Departure Minutes: " . $_POST['departureminutes'] . "\n"; $message .= "Return Day: " . $_POST['retday'] . "\n"; $message .= "Return Month: " . $_POST['retmonth'] . "\n"; $message .= "Return Year: " . $_POST['retyear'] . "\n"; $message .= "Return Hour: " . $_POST['returnhour'] . "\n"; $message .= "Return Minutes: " . $_POST['returnminutes'] . "\n"; // prepare email body text $Body = ""; $Body .= "Message: "; $Body .= $message; $Body .= "\n"; // send email $success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>"); // redirect to success page // CHANGE THE URL BELOW TO YOUR "THANK YOU" PAGE if ($success){ print "<meta http-equiv=\"refresh\" content=\"0;URL=thanks.html\">"; } else{ print "<meta http-equiv=\"refresh\" content=\"0;URL=error.html\">"; } ?> <!DOCTYPE html> <html manifest="jbd.manifest"> <head> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="iphon_icon.png"/> <link rel="apple-touch-startup-image" href="startup.png" /> <link rel="stylesheet" href="appjbd.css" type="text/css" media="screen, mobile" title="main" charset="utf-8"> <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#formLeft .input-bg").hover(function() { $(this).addClass("active"); }, function() { $(this).removeClass("active"); }); $("#formLeft input").focus(function() { $(this).parent().addClass("active"); }); $("#formLeft input").blur(function() { $("#formLeft .input-bg").removeClass("active"); }); $("#formRight .message-bg").hover(function() { $(this).addClass("active"); }, function() { $(this).removeClass("active"); }); $("#formRight textarea").focus(function() { $(this).parent().addClass("active"); }); $("#formRight textarea").blur(function() { $("#formRight .message-bg").removeClass("active"); }); $("#commentForm").validate(); }); </script> <title>Jet Booking Direct - Charter Quote App</title> </head> <body> <div id="wrapper"> <header> <nav> <ul class="topmenu"> <li><a href="quotesingle.html"><img src="1311677751alignjust.png"></a></li> <li><a href="info.html"><img src="1311677624info.png"></a></li> <li><a href="contact.html"><img src="1311677737mail2.png"></a></li> <li><a href="index.html"><img src="1311677562home.png"></a></li> </ul> </nav> <a class="selected single" href="quotesingle.html">Single Flight</a><a class="deselected" href="quote.html">Return Flight</a> <h1>Request a Quote</h1> <p>Single Flight</p> </header> <section> <h2 class="nobg">Personal Details</h2> <div class="form"> <form id="contact" action="contactengine.php" method="post"> <input type="text" id="nameinput" name="name" value="" placeholder="Name..." tabindex="2" /> <input type="email" id="emailinput" name="email" value="" placeholder="Email..." tabindex="2" /> <input type="text" id="numberinput" name="number" value="" placeholder="Number..." tabindex="2" /> </div> </section> <section> <h2>Flight Details</h2> <div class="form"> <input type="text" id="frominput" name="from" value="" placeholder="From..." tabindex="2" /> <input type="text" id="toinput" name="to" value="" placeholder="To..." tabindex="2" /> </div> </section> <section> <div class="form"> <label for="email">How many passengers?</label> <input type="number" id="paxinput" name="pax" min="1" max="500" step="2" value="1"> </div> </section> <section> <div class="form"> <label for="email">Departure Date and Time - Please enter time in 24 hour format</label> <select name="depday" id="depday" tabindex="4" > <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> <select name="depmonth" id="depmonth" tabindex="4" > <option value="Jan" >Jan</option> <option value="Feb" >Feb</option> <option value="Mar" >Mar</option> <option value="Apr" >Apr</option> <option value="May" >May</option> <option value="Jun" >Jun</option> <option value="Jul" >Jul</option> <option value="Aug" >Aug</option> <option value="Sept" >Sept</option> <option value="Oct" >Oct</option> <option value="Nov" >Nov</option> <option value="Dec" >Dec</option> </select> <select name="depyear" id="depyear" tabindex="4" > <option value="2011" >2011</option> <option value="2012" >2012</option> <option value="2013" >2013</option> </select> <input type="number" name="departurehour" id="dephourinput" min="1" max="24" step="1" value="12"> <input type="number" name="departureminutes" id="depminutesinput" min="0" max="59" step="1" value="0"> </div> </section> <footer class="fixed"> <div class="bottomform"> <p id="success" class="successmsg" style="display:none;">Your email has been sent! Thank you!</p> <p id="bademail" class="errormsg" style="display:none;">Please enter your name, a message and a valid email address.</p> <p id="badserver" class="errormsg" style="display:none;">Your email failed. Try again later.</p> <input type="submit" id="submitinput" name="submit" class="submit" value="Submit"/> <input type="reset" id="resetinput" value="Clear"/> </form> </div> </footer> </div> </body>
August 3, 201115 yr Author Oh crap. Just realised. It's built as an app so runs on the phone. Therefore it won't work. Ok, so I need to do it differently. Any ideas how you do this?
August 3, 201115 yr I'm not sure how "phone gap" works but you'll need to host your php script on a web server (php enabled) and you'll need to make either a POST or GET request to the server passing along your variables! If phone gap litteraly takes HTML and converts it, just write a normal <form> but make sure your action attribute points to the hosted script
August 3, 201115 yr Author I'll try that, thanks. And yeah that's basically what it does, converts your HTML/CSS etc.
Create an account or sign in to comment