Question

I am trying to process my form through a live server from my native app without leaving the page. Below is the code I am using for the form, the JQuery and the PHP, but when i send it, the page goes blank and puts the string in the URL bar. Can I get some help with my code please. I shortened the form on this to make it easier to read, i have alot of other fields as well. Do I need to have them all listed in the javascript?

HTML on Form

<form action="http://mobile.koolantkoolers.com/mailer.php" method="get">
  <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">Email:</label>
  <input type="email" name="email" id="email" value=""  />
</div>

  <div data-role="fieldcontain">
    <label for="company">Company:</label>
    <textarea cols="40" rows="8" name="company" id="company"></textarea>
  </div>
<input type="button" onclick="submit()" value="submit" data-icon="star" data-theme="b" />              
  </div>
  </form>

JavaScript:

$.post('http://mobile.koolantkoolers.com/mailer.php', {

// These are the names of the form values

Name: $('name').val(),
Email: $('email').val(),
Company: $('company').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("Sorry please fill all fields!"); 
    return false;
   }
});

and then PHP

<?php

// VARS
$Name=$_GET["name"];
$Email=$_GET["email"];
$Company=$_GET["company"];
$Headers = "From:" . $Email;

//VALIDATION
if(
$Name=="" ||
$Email=="" ||
$Company==""
) {
    echo "Error";
} else {
    mail("[e-mail]","mobile app message",$MessageText, $Headers);
    echo "Success";
}
?>

Answer 1

I ended up using the following code and post method on my php. You just need to make sure your div naming convention matches up to you code. This posts the results of the form and swaps the div out with a thank you message. See my HTML and Javascript below.

<div data-role="content">
<form id="myform">
  <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">Email:</label>
  <input type="email" name="email" id="email" value=""  />
</div>
<div data-role="fieldcontain">
  <label for="company">Company Name:</label>
  <input type="text" name="company" id="company" value=""  />
</div>        
<input type="submit" name="submit" value="Submit" data-icon="star" data-theme="b" />
</form>

</div>
<div data-role="content" style="display:none" id="formResponse">
    thank you, your quote has been received and you will hear back from us shortly.
    </div>

Javascript:

$(document).ready(function() {
            //When the form with id="myform" is submitted...
            $("#myform").submit(function() {
                //Send the serialized data to mailer.php.
                $.post("mailer.php", $("#myform").serialize(),
                    //Take our repsonse, and replace whatever is in the "formResponse"
                    //div with it.

                    function(data) {
                    $("#myform").html( $("#formResponse").html() );
                    }
                );
                return false;
            });

        });