Phonegap本机应用程序,通过live server上的PHP邮件提交表单

Phonegap本机应用程序,通过live server上的PHP邮件提交表单,php,jquery,html,cordova,Php,Jquery,Html,Cordova,我正试图在不离开页面的情况下,通过本地应用程序的实时服务器处理我的表单。下面是我用于表单、JQuery和PHP的代码,但当我发送它时,页面变为空白并将字符串放入URL栏。我能得到一些代码方面的帮助吗。为了便于阅读,我缩短了这个表单,我还有很多其他字段。我需要在javascript中列出它们吗 表单上的HTML <form action="http://mobile.koolantkoolers.com/mailer.php" method="get"> <div data-

我正试图在不离开页面的情况下,通过本地应用程序的实时服务器处理我的表单。下面是我用于表单、JQuery和PHP的代码,但当我发送它时,页面变为空白并将字符串放入URL栏。我能得到一些代码方面的帮助吗。为了便于阅读,我缩短了这个表单,我还有很多其他字段。我需要在javascript中列出它们吗

表单上的HTML

<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>
然后是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";
}
?>

这真的很简单,在脚本中指定表单id,其中包含要发布的数据和发送到的URL,每个表单将数据发送到指向的URL,而不更改PHP中的任何内容,只需将其添加到javascript函数中,该函数在提交按钮中被调用

var form = document.getElementById('form-id');
var formData = new FormData(form);
在send()调用中只需传递这个新的FormData实例:


检查

一种简单的方法是使用jQuery进行如下post调用

event.preventDefault();防止以常规方式提交表单,以便您可以停留在同一页面上

$(“表格的ID”)。提交(功能(事件){

event.preventDefault()

$.post(”http://mobile.koolantkoolers.com/mailer.php,$(\u形式的ID\u”).serialize();
}

我在我的php上使用了以下代码和post方法。您只需确保您的div命名约定与您的代码匹配。这将发布表单的结果,并用感谢信息交换div。请参阅下面的HTML和Javascript

<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>

所以,我有多个php文件,我会根据选择的表单引用。如果我通过JQuery这样做,它不会总是将提交发送到一个php页面,而不是指定我想要的页面?我不知道这些状态解决方案中的任何一个是否是我想要的。我只是想要在不离开n的情况下提交多个表单的最佳方式因此,在测试之后,php会回显错误和成功,但它在页面上的显示没有使用javascript发送消息?将我的答案更改为一种更简单的方式,无需任何插件,只需几行代码即可获得所需内容
var xhr = new XMLHttpRequest();
// Add any event handlers here...
xhr.open('POST', '/upload/path', true);
xhr.send(formData);
<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>
$(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;
            });

        });