Using php form inside phonegap - php

Question

I have asked before for help to get my php form working inside an phonegap ipa. I did exactly as I was told and everything works just fine, even inside the ipa. Only problem I have is that I get this alert right at the moment when the page loads, obviously it should show up when client forgets to fill in a required field.
Here is what I did:
FORM in contact.html
<form action="http://mobile.alicante-intermedia.com/submit_contact.php" method="get">
<div class="form-element">
<label for="txtfullname">Firstname</label>
<input id="txtfullname" name="FirstName" type="text" placeholder="required" required />
</div>
<div class="form-element">
<label for="txtemail">Lastname</label>
<input id="txtemail" name="LastName" type="text" placeholder="required" required />
</div>
<div class="form-element">
<label for="txtcontact">Email</label>
<input id="txtcontact" name="Email" type="email" placeholder="optional" />
</div>
<div class="form-element">
<label for="txtmessage">Message</label>
<textarea id="txtmessage" name="MessageText" placeholder="required" rows="5" required ></textarea>
</div>
<input type="button" onclick="submit()" value="submit contact"/>
</form>
Then I created a jquery_form.js file which loads only inside the conatct.html
$.post('http://mobile.alicante-intermedia.com/submit_contact.php', {
// These are the names of the form values
FirstName: $('#FirstName_input').val(),
LastName: $('#LastName_input').val(),
Email: $('#Email_input').val(),
MessageText: $('#MessageText_input').val()
// HTML function
}, function (html) {
// Place the HTML in a astring
var response=html;
// PHP was done and email sent
if (response=="success") {
alert("Message sent!");
} else {
// Error postback
alert("Please fill all fields!");
return false;
}
});
And the php looks like this:
<?php
// VARS
$FirstName=$_GET["FirstName"];
$LastName=$_GET["LastName"];
$Email=$_GET["Email"];
$MessageText=$_GET["MessageText"];
$Headers = "From:" . $Email;
//VALIDATION
if(
$FirstName=="" ||
$LastName=="" ||
$Email=="" ||
$MessageText==""
) {
echo "Error";
} else {
mail("myemail#email.com","mobile app message",$MessageText, $Headers);
echo "Success";
}
?>
Everything works fine except the alert screen. Anyone here who has an idea what went wrong?

Answer 1

Your JavaScript code is "bare", not wrapped in any function or attached to any event handler, and therefore executes as soon as it is loaded - so it immediately posts an empty form when the jQuery script is first parsed.
Place it into the onclick event handler for the submit button:
// When the document has loaded...
$(document).ready(function() {
// Bind this action as a function to be executed when the button is clicked...
$('input[type="button"][value="submit contact"]').click(function() {
$.post('http://mobile.alicante-intermedia.com/submit_contact.php', {
// These are the names of the form values
// EDIT: You have the wrong ids on these...
FirstName: $('#txtfullname').val(),
LastName: $('#txtemail').val(),
Email: $('#txtcontact').val(),
MessageText: $('#txtmessage').val()
// HTML function
}, function (html) {
// Place the HTML in a astring
var response=html;
// PHP was done and email sent
if (response=="success") {
alert("Message sent!");
} else {
// Error postback
alert("Please fill all fields!");
return false;
}
});
});
});
Since it is bound in the JavaScript code, remove the onclick from the button in your markup:
<input type="button" value="submit contact"/>
Edit:
The PHP you have is looking for values in $_GET, but you have posted them from jQuery. Look instead in $_POST.
$FirstName=$_POST["FirstName"];
$LastName=$_POST["LastName"];
$Email=$_POST["Email"];
$MessageText=$_POST["MessageText"];