Phonegap native app, submit form through PHP mailer on live server

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("nnorman@dimplexthermal.com","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;
            });

        });

Answer 2

This is really quite simple, in the script you designate the form-id with the data you want to post and the URL to send it to, each form sends the data to the URL you point it to without changing anything in your PHP's, just add this inside a javascript function that gets called in your submit button.

var form = document.getElementById('form-id');
var formData = new FormData(form);

This new FormData instance is all you need to pass on the send() call:

var xhr = new XMLHttpRequest();
// Add any event handlers here...
xhr.open('POST', '/upload/path', true);
xhr.send(formData);

Check the link

Answer 3

An easy way to do this is to use jQuery to make a post call like this.

event.preventDefault(); prevents the form from being submitted in a usual manner so that you can stay on the same page.

$("#ID_OF_FORM").submit(function(event) {

event.preventDefault();

$.post("http://mobile.koolantkoolers.com/mailer.php", $("ID_OF_FORM").serialize()); }