0

I am making a simple mobile application that sends an email to the user with their GPS location and other form input. I am not worried about the validation now I just want to get the form sent to email, although help with that would be appreciated.

Process.php and especially the confirmation is the main problem. I do not know how to correctly put the GPS coordinates into the confirmation email nor display the form/email sent verification to the user on successful submission. I do not know how to select the text input of the GPS Lat and Longitude. Syntax is also obviously incorrect. 

<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

You dont need to put input before, you have already IDs for the Lat + Lng:

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

Dont define vars with a space in between:

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

To access the inputs use this:

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

EDIT:

I did some edits on your code. now you can add validation as already mentioned + mail functionality + structuring the code.

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>

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

I would use something like Jquery Validate to validate the form and serialize its data in a post request. This makes it very simple to use the validate plugin to pass the post request to another php file and actually send the email there. Javascript doesn't have a good method for passing variables to php outside of post requests or URL redirects.

Link to jquery validate plugin: http://jqueryvalidation.org/validate/

Take your email section at the bottom and create a file like email.php and create a div under everything called results. This way you can pass the javascript variables that contain your gps coordinates to your php variables in email.php and return an ajax response in the same page without reloading.

$("#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 回答