带有jquery移动联系表单的Phonegap应用程序无效

时间:2015-01-22 18:09:15

标签: javascript php jquery cordova

我正在使用jQuery mobile和Phonegap构建混合应用程序,但我在这里遇到了联系表单。代码位于:

http://jsfiddle.net/8cpdcfow/

在jsfiddle,唯一的区别是send.php是send.php而没有url,因为它位于根文件夹中。我之前使用的代码就像一个webapp,它工作得很好,但我不知道为什么现在它显示消息发送消息,但消息没有发送。 以下是托管的代码:http://radio-pendimi.com/mobile/v2/#dergomesazh

更新2:

现在在网上联系表格效果非常好,但是在我使用phonegap构建webapp for android并安装在Android设备上时,当我按下提交按钮发送消息时,它返回我的表格的整个PHP代码发送消息或消息失败消息。 以下是截图:

http://i60.tinypic.com/abqya0.jpg

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width,
        height=device-height, target-densitydpi=device-dpi" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>Radio Pendimi - online streaming</title>
<link rel="apple-touch-icon" href="images/AppIcon.png" />
    <!-- CSS LIDHJET -->
<link rel="stylesheet" href="css/new_template.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.0-rc.1.min.css" />
<link rel="stylesheet" href="css/stili.css"/>
    <!-- JS LIDHJET  -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.0-rc.1.min.js"></script>
<script src="js/myscript.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
</head>
<body>

 <!-- Kanali 1 - homepage -->
<div data-role="page" id="home" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<a href="index.html" data-icon="home" data-iconpos="notext"></a><h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Radio Pendimi 24h Live </h1>
<a href="#dergomesazh" data-role="button" data-inline="true" data-mini="true" data-icon="mail" data-iconpos="notext"></a>
</div>
<!-- content -->
<div data-role="none">
    <img src="images/pendimi-logo-white.png" style="width: 210px; margin-right:auto; margin-left:auto;display: block;padding-top: 30px;"/>
<p style="text-align:center;text-shadow:none; color:#fff; margin:0px; padding-top:16px; padding-left: 5px; padding-right: 5px;">Jeni duke ndëgjuar: <script type="text/javascript" src="http://www.digital-webstream.de/status.php?mode=title&id=3204"></script> <br><br>
<audio src="http://server2.digital-webstream.de:35505/;$type=mp3" id="player" autoplay></audio>
<div style="text-align:center">
    <span onclick="document.getElementById('player').play()" class="btn_control"> PLAY</span>
    <span onclick="document.getElementById('player').pause()" class="btn_control"> STOP</span>
    <span onclick="document.getElementById('player').muted=!document.getElementById('player').muted" class="btn_control"> MUTE/UNMUTE</span>
    </div>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
    <div data-role="navbar" style="border-bottom:6px solid #2f4c73">
        <ul>
            <li><a href="#home" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 1</a></li>
            <li><a href="#kanali-2" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 2</a></li>
            <li><a href="#donacion" data-icon="shop" data-iconpos="top" data-transition="none">Donacion</a></li>
            <li><a href="#info" data-icon="info" data-iconpos="top" data-transition="none">Info</a></li>
        </ul>
    </div>
</div>
</div>
<!-- End Page -->

<!-- Informacione -->
<div data-role="page" id="info" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<a href="index.html" data-icon="home" data-iconpos="notext"></a><h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Info </h1>
</div>
<!-- content -->
<div data-role="none">
 <img src="images/pendimi-logo-white.png" style="width: 210px; margin-right:auto; margin-left:auto;display: block;padding-top: 30px;">
    <p align="center">
      <a href="mailto:info@radio-pendimi.com" style="text-decoration:none; text-shadow:none; color: #fff;font-weight: 500;font-size: 20px; font-family: Dosis;">info@radio-pendimi.com </a><br>
      <a href="http://radio-pendimi.com" style="text-decoration: none; text-shadow:none; color: #fff; font-weight: 500; font-size: 20px; font-family: Dosis;">http://radio-pendimi.com </a><br>
        <span style="text-decoration: none; text-shadow:none; color: #fff; font-weight: 500; font-size: 15px; font-family: Dosis;">Programuar & Dizajnuar nga Afrim Azizi</span> <br>
      <a href="https://www.facebook.com/radioopendimi" target="_blank"><img src="images/find-us-on-facebook.png" style="width: 170px; padding: 5px;"/></a>
  </p> 
  </div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
    <div data-role="navbar" style="border-bottom:6px solid #2f4c73">
        <ul>
            <li><a href="#home" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 1</a></li>
            <li><a href="#kanali-2" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 2</a></li>
            <li><a href="#donacion" data-icon="shop" data-iconpos="top" data-transition="none">Donacion</a></li>
            <li><a href="#info" data-icon="info" data-iconpos="top" data-transition="none">Info</a></li>
        </ul>
    </div>
</div>
</div>
<!-- End Page -->


<!-- Kanali 2 -->
<div data-role="page" id="kanali-2" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<a href="index.html" data-icon="home" data-iconpos="notext"></a><h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Kanali - 2 </h1>
</div>
<!-- content -->
<div data-role="none">
     <img src="images/pendimi-logo-white.png" style="width: 210px; margin-right:auto; margin-left:auto;display: block;padding-top: 30px;"/>
<p style="text-align:center;text-shadow:none; color:#fff; margin:0px; padding-top:16px; padding-left: 5px;padding-right: 5px;">Jeni duke ndëgjuar: <script type="text/javascript" src="http://www.digital-webstream.de/status.php?mode=title&id=7399"></script> <br><br>
<audio src="http://server6.digital-webstream.de:8400/;$type=mp3" id="player-2"></audio>
<div style="text-align:center">
    <span onclick="document.getElementById('player-2').play()" class="btn_control"> PLAY</span>
    <span onclick="document.getElementById('player-2').pause()" class="btn_control"> STOP</span>
    <span onclick="document.getElementById('player-2').muted=!document.getElementById('player-2').muted" class="btn_control"> MUTE/UNMUTE</span>
    </div>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
    <div data-role="navbar" style="border-bottom:6px solid #2f4c73">
        <ul>
            <li><a href="#home" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 1</a></li>
            <li><a href="#kanali-2" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 2</a></li>
            <li><a href="#donacion" data-icon="shop" data-iconpos="top" data-transition="none">Donacion</a></li>
            <li><a href="#info" data-icon="info" data-iconpos="top" data-transition="none">Info</a></li>
        </ul>
    </div>
</div>
</div>
<!-- End Page -->


<!-- Donacione - Kontribo edhe ti -->
<div data-role="page" id="donacion" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<a href="index.html" data-icon="home" data-iconpos="notext"></a><h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Info </h1>
</div>
<!-- content -->
<div data-role="none">
 <p style="text-align:center; text-shadow:none; color:#fff;"> 
Vëllezër dhe motra,
Kjo Radio çdo ditë bëhet shkak për udhëzimin e dikujt dhe kthimin e tij në rrugën e xhenetit, mirëpo ajo nuk mund ta çojë mesazhin e saj në vend pa përkrahje financiare. Nëse ju jepni kontributin tuaj do të keni hise në sevapet që fitohen nga kjo punë. Pejgamberi, alejhi salatu ue selam, ka thënë: “Sadakaja e shuan zemërimin e Allahut ashtu sikur uji e shuan zjarrin” (Sahihu Tergib nr. 983).
Ju bëjmë thirrje që ta përkrahni këtë projekt madhështor, për mirësinë e të cilit jemi dëshmitarë të gjithë ne.
Keto jan pikat kryesore :<br>
–          Mirëmbajtjen dhe rritjen e kapacitetit të serverëve.<br>
–          Mirëmbajtjen materiale të studiove që kemi në disa vende, sidomos studion numër 2 – Prizren, e cila ka një orar më të zgjeruar dhe më të pasur,<br>
–          Mirëmbajtjen e ueb-faqes dhe serverit të veçantë që ka ajo,<br>
–          Marketingun e Radio Pendimit në përgjithësi (fllajera, pllakata, reklama nëpër medie, etj.).<br>
Allahu ju shpërbleftë!
<p style="text-align:center; text-shadow:none; color:#fff;">Mund të kontribuoni nëpërmjet llogarisë bankare:<br>
Emri: Radio Pendimi<br>
Emri i bankës: Volksbank Linz <br>
IBAN: AT744480042614830000<br>
Bic Swift Code: VBWEAT2WXXX
    </p>
    <br>
    <!-- PayPal Form start -->
    <div style="text-align:center"> 
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="cmd" type="hidden" value="_s-xclick"> <input name="hosted_button_id" type="hidden" value="GRGWN8J9JDM6U"> <input alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal." name="submit" src="https://www.paypalobjects.com/de_DE/AT/i/btn/btn_donateCC_LG.gif" type="image"> <img src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" alt="" width="1" height="1" border="0"></form>
    </div> <!-- PayPal form end -->
    </p>
  </div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
    <div data-role="navbar" style="border-bottom:6px solid #2f4c73">
        <ul>
            <li><a href="#home" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 1</a></li>
            <li><a href="#kanali-2" data-icon="audio" data-iconpos="top" data-transition="none">Kanali 2</a></li>
            <li><a href="#donacion" data-icon="shop" data-iconpos="top" data-transition="none">Donacion</a></li>
            <li><a href="#info" data-icon="info" data-iconpos="top" data-transition="none">Info</a></li>
        </ul>
    </div>
</div>
</div>
<!-- End Page -->

<!-- Dergo Mesazh -->
<div data-role="page" id="dergomesazh" data-theme="b">
<!-- Header -->
<div data-role="header" data-position="fixed" style="background-color:#fafafc;border-top:6px solid #2f4c73">
        <h1 style="color:#444;text-shadow:none">Dërgo Mesazh</h1>
    <a href="#home"  data-role="button" data-inline="true" data-mini="true" data-icon="home" data-iconpos="notext" data-transition="none"></a>
</div>

<!-- content -->
<div data-role="content">
    <form class="form" id="callAjaxForm">
    <p class="name">
        <input name="emri" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Emri" id="name" data-role="none"  />
      </p>

      <p class="text">
        <textarea name="comment" class="validate[required,length[6,30]] feedback-input" id="comment" placeholder="Mesazhi" data-role="none" ></textarea>
      </p>


      <div class="submit">
        <button id="submit" type="submit" >DËRGO</button>
        <button id="reset" type="reset" >PASTRO FUSHAT</button>
      </div>
       <h3 id="notification" align="center" style="font-color:green;"></h3>
    </form>
</div>
<!-- footer -->

</div>
<!-- End Page -->

</body>
</html>

myscript.js

//DergoMesazh
function onSuccess(data, status)
        {
            data = $.trim(data);
            $("#notification").text(data);
        }

        function onError(data, status)
        {
            // handle an error
        }        

        $(document).ready(function() {
            $("#submit").click(function(){

                var formData = $("#callAjaxForm").serialize();

                $.ajax({
                    type: "POST",
                    url: "send.php",
                    cache: false,
                    data: formData,
                    success: onSuccess,
                    error: onError
                });
                return false;
            });
            $("#reset").click(function() {
                $('#callAjaxForm').trigger("reset");
                $('#notification').text("");
            });
        });

Send.php代码:

<?php
header('Access-Control-Allow-Origin: *');

$emri=$_POST['emri'];
$mesazhi=$_POST['comment'];
$IPAdresa = $_SERVER["REMOTE_ADDR"];


$browser="";
     if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("MSIE"))){$browser="ie";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("Presto"))){$browser="opera";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("CHROME"))){$browser="chrome";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("SAFARI"))){$browser="safari";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("FIREFOX"))){$browser="firefox";}
else {$browser="other";}

$to = "afrim.a@msn.com";
$subject = "Rubrika DergoMesazh (mobile app)";
$message = " Emri: " . $emri . "\r\n Mesazhi: " . $mesazhi. "\r\n IP Adresa: " . $IPAdresa. "\r\n Browser: " . $browser;


$from = "radio-v2@test.com";
$headers = "From:" . $from . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n"; 

if(@mail($to,$subject,$message,$headers))
{
  echo "Mesazhi juaj u dërgua me sukses";
}else{
  echo "Gabim! Ju lutemi provoni përsëri.";
}
?>

2 个答案:

答案 0 :(得分:0)

尝试使用输入类型=按钮而不是输入type = submit。

在Phonegap中使用上述代码

另外,仔细检查Phonegap [Cordova.js,jquery和其他JS]所需的资产是否正确加载。

如果您可以发布捆绑在Phonegap

中的整个代码,也会有所帮助

答案 1 :(得分:0)

好了,现在我解决了这个问题,我想与其他有此问题的人分享解决方案。 myscript.js从哪里开始调用PHP文件(send.php),而不是声明本地php文件,你需要声明php文件的url,因为在用phonegap / cordova构建应用程序时它并没有#39;执行php文件。您还需要启用crossDomain:true, 以下是jsfiddle中功能齐全的代码: http://jsfiddle.net/8cpdcfow/1/

这是send.php代码:

<?php
header('Access-Control-Allow-Origin: *');

$emri=$_POST['emri'];
$mesazhi=$_POST['comment'];
$IPAdresa = $_SERVER["REMOTE_ADDR"];


$browser="";
     if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("MSIE"))){$browser="ie";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("Presto"))){$browser="opera";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("CHROME"))){$browser="chrome";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("SAFARI"))){$browser="safari";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("FIREFOX"))){$browser="firefox";}
else {$browser="other";}

$to = "your-email@hotmail.com";
$subject = "Rubrika DergoMesazh (mobile app)";
$message = " Name: " . $emri . "\r\n Message: " . $mesazhi. "\r\n IP Adresa: " . $IPAdresa. "\r\n Browser: " . $browser;

 //Maybe you need to add $from email into whitelist at your inbox because the messages may be classified to the junk/spam folder

$from = "no-reply@domain.com";
$headers = "From:" . $from . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n"; 

if ($emri == "" || $mesazhi == ""){
echo "Empty strings,the form is not filled";
} else {
if(@mail($to,$subject,$message,$headers))
{
  echo "Message Sent successfully";
}else{
  echo "Message Failed to sent.Try again";
}
}
?>