0

私は、GPS 位置情報やその他のフォーム入力を使用してユーザーに電子メールを送信する単純なモバイル アプリケーションを作成しています。検証については心配していませんが、フォームを電子メールで送信したいだけですが、その助けをいただければ幸いです。

Process.php と特に確認が主な問題です。確認メールに GPS 座標を正しく入力する方法や、送信が成功したときにユーザーに送信されたフォーム/メールの確認を表示する方法がわかりません。GPS の緯度と経度のテキスト入力を選択する方法がわかりません。構文も明らかに間違っています。

<head>
            <meta content="text/html; charset=windows-1252" http-equiv="content-type">
            <title>My Page</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
            <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
          </head>
          <body>
            <div data-role="page" id="page">
              <div data-role="header">
                <h1>Hitch Fox -Travel with smarts</h1>
              </div>
              <div data-role="content"> * = required
                <form id="myform" action="process.php" method="POST">


                  <div data-role="fieldcontain"> <label for="email"><em> * </em>
                      Email:</label> <input name="email" id="verify email" value="" required="required"

                      type="email"> </div>
                  <div data-role="fieldcontain"> <label for="verify email"><em> * </em>
                      Verify Email: </label> <input name="verify email" id="verify email"

                      value="" required="required" type="email"> </div>
                  <br>
                  <div data-role="fieldcontain"> <label for="GPS Latitude"><em> * </em>
                      GPS Lat </label> <input name="GPS Lat" id="GPSlat" value="" type="text">
                  </div>
                  <br>
                  <div data-role="fieldcontain"> <label for="GPS Longitude"><em> * </em>
                      GPS Long </label> <input name="GPS Long" id="GPSlong" value="" type="text">
                  </div>
                  <br>
                  <button  id="SetGPS"> Set GPS</button>
                  <div data-role="fieldcontain"><label for="License Plate"><em> * </em>License
                      Plate: </label> <input name="License Plate" id="LicensePlate" value=""

                      required="true" type="text"> </div>
                </form>
                <button id="submit">Submit</button>
                <div dat-role="fieldcontain"id="ack"></div> //confirmation of form sent to email goes here 

                <!--/fieldcontain-->
                <div data-role="footer">
                  <h4>footer</h4>
                </div>
                <!--/content-->

              </div>
              <!--/page-->        



     <script type="text/javascript">


                            var lat, lng;

        navigator.geolocation.getCurrentPosition(function(position)
        { 
            lat = position.coords.latitude;
            lng = position.coords.longitude;
            console.log( lat + ":" + lng);
        });

        // ...

        $("#SetGPS").click(function()
        {
            $("input#GPSlat").val(lat);
            $("input#GPSlong").val(lng);
        });
                  </script>

              <script type="text/javascript">

            $("submit").click(function() {

                .post( $("myForm").attr("action"),
                       $("myForm" :input").serializeArray(),
                           function(info) {

                           $("#ack").empty();
                           $("#ack").html(info);
                                clear();
                        });

                $("#myForm").submit( function ()   {
                    return false;
                });    
            });

            function clear()  {

                $("myForm :input").each ( function() {
                        $(this).val("");
                    });    
              )          
              </script> 

        <?php     

        $Email          = $ _POST['Email'];
        $GPS Lat        = $ _POST['GPS Lat'];
        $GPS Long       = $ _POST['GPS Long']; 
        $License Plate  = $ _POST['License Plate'];

        $to      = "$Email"
        $from    = "$Email"
        $subject = "Your last GPS Location"
        $body    = "Your last GPS location was - latitude:" .$GPS Lat " "  "longitude:" .$GPS Long "and you were picked up by vehicle license:" .$License Plate // problems here 
        mail ($to, $from, $subject, $body)
        echo  $ack "message sent"   // php syntax is wrong no doubt

        ?>
4

2 に答える 2

1

前に入力する必要はありません。Lat + Lng の ID は既にあります。

$("#SetGPS").click(function()
        {
            $("#GPSlat").val(lat);
            $("#GPSlong").val(lng);
        });

間にスペースを入れて変数を定義しないでください:

$GPSLat        = $ _POST['GPSLat'];
$GPSLong       = $ _POST['GPSLong']; 
$LicensePlate  = $ _POST['LicensePlate'];

入力にアクセスするには、次を使用します。

$("#GPSlat").val();
$("#GPSlat").val();

編集:

私はあなたのコードをいくつか編集しました。これで、既に述べた検証 + メール機能 + コードの構造化を追加できます。

index.html

<html>
<head>
            <meta content="text/html; charset=windows-1252" http-equiv="content-type">
            <title>My Page</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
            <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>

<body>
            <div data-role="page" id="page">
              <div data-role="header">
                <h1>Hitch Fox -Travel with smarts</h1>
              </div>
              <div data-role="content"> * = required
                <form id="myform">


                  <div data-role="fieldcontain"> <label for="email"><em> * </em>
                      Email:</label> <input name="mail" id="verify email" value="" required="required"

                      type="email"> </div>
                  <div data-role="fieldcontain"> <label for="verify email"><em> * </em>
                      Verify Email: </label> <input name="vmail" id="verify email"

                      value="" required="required" type="email"> </div>
                  <br>
                  <div data-role="fieldcontain"> <label for="GPS Latitude"><em> * </em>
                      GPS Lat </label> <input name="lat" id="GPSlat" value="" type="text">
                  </div>
                  <br>
                  <div data-role="fieldcontain"> <label for="GPS Longitude"><em> * </em>
                      GPS Long </label> <input name="lng" id="GPSlong" value="" type="text">
                  </div>
                  <br>
                  <button  id="SetGPS"> Set GPS</button>
                  <div data-role="fieldcontain"><label for="License Plate"><em> * </em>License
                      Plate: </label> <input name="lic" id="LicensePlate" value=""

                      required="true" type="text"> </div>
                </form>
                <button id="SendForm">Submit</button>
                <div dat-role="fieldcontain" id="ack"></div> //confirmation of form sent to email goes here 

                <!--/fieldcontain-->
                <div data-role="footer">
                  <h4>footer</h4>
                </div>
                <!--/content-->

              </div>
              <!--/page-->        



     <script type="text/javascript">

//VAR    
                            var lat, lng;

// GET USER COORDS                          
        navigator.geolocation.getCurrentPosition(function(position)
        { 
            lat = position.coords.latitude;
            lng = position.coords.longitude;
            console.log( lat + ":" + lng);
            $("#GPSlat").val(lat);
            $("#GPSlong").val(lng);
        });

        // ...

        $("#SetGPS").click(function()
        {
            $("#GPSlat").val(lat);
            $("#GPSlong").val(lng);
        });


//SUBMIT       
            $("#SendForm").click(function() {

            $.post('process.php', $("#myform").serialize(), function(data) {
            $('#ack').html(data);
            }); 
            });

</script>
     </body></html>

プロセス.php

   <?php     

        $email          = $_POST['mail'];
        $lat            = $_POST['lat'];
        $long           = $_POST['lng']; 
        $licence        = $_POST['lic'];

        echo 'PHP recieved following POST values <br/>';    
        echo $email."<br/>";
        echo $lat."<br/>"; 
        echo $long."<br/>";
        echo $licence."<br/>";

/*  
        $to      = "$Email"
        $from    = "$Email"
        $subject = "Your last GPS Location"
        $body    = "Your last GPS location was - latitude:" .$GPS Lat " "  "longitude:" .$GPS Long "and you were picked up by vehicle license:" .$License Plate // problems here 
        mail ($to, $from, $subject, $body)
        echo  $ack "message sent"   // php syntax is wrong no doubt
*/
  ?>
于 2013-07-13T16:58:25.387 に答える
0

Jquery Validate のようなものを使用してフォームを検証し、そのデータをポスト リクエストでシリアル化します。これにより、validate プラグインを使用して投稿リクエストを別の php ファイルに渡し、実際にそこにメールを送信することが非常に簡単になります。Javascript には、ポスト リクエストや URL リダイレクトの外部で変数を php に渡すための適切な方法がありません。

jquery 検証プラグインへのリンク: http://jqueryvalidation.org/validate/

下部にある電子メール セクションを使用して、email.php のようなファイルを作成し、results という名前のすべての下に div を作成します。このようにして、GPS 座標を含む JavaScript 変数を email.php の php 変数に渡し、リロードせずに同じページで ajax 応答を返すことができます。

$("#myForm").validate({
        debug: false,
        rules: {

        },
        messages: {

        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('email.php', $("#myForm").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });
于 2013-07-13T17:03:54.413 に答える