web-dev-qa-db-ja.com

js関数を呼び出してmysqlに投稿する送信ボタン

私が作成しているものの短くて甘い説明は、ユーザーの住所をジオコーディングし（送信をクリックすると）、取得した緯度と経度の値を非表示フィールドに入れる連絡先フォームです。

私はすべてが動作していますが、2つの別々のボタンがあり、1つだけが必要です。そのため、現時点では、ユーザーはまず送信ボタンをクリックする前に1つのボタンをクリックする必要があります。 「Find Geopoints」ボタンはjs関数を呼び出し、lat値とlng値をフォームの非表示フィールドに返します。その後、送信ボタンを押すと、すべてのフォームデータがMySQLデータベースにポストされます。

繰り返しますが、すべてがコードで機能しているので、フォーム内の両方のボタンを1つにするだけで機能します。

これはJavascriptです：

<script type="text/javascript">

    var geocoder;

    function initialize() {
        geocoder = new google.maps.Geocoder();
        map = new google.maps.Map(document.getElementById("map_canvas"));
    }
    function updateCoordinates(latlng)
    {
        if(latlng) 
        {
            document.getElementById('lat').value = latlng.lat();
            document.getElementById('lng').value = latlng.lng();
        }
    }

    function codeAddress() {
        var address = document.getElementById("address").value;
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                updateCoordinates(results[0].geometry.location);
            } else {
                alert("The address you entered could not be found: " + status);
            }
        });
    }
</script>

これは形式です：

<form align="center" method="post">
    <label for="firstName">First Name:</label> <input type="text" name="firstName"/><br/>
    <label for="lastName">Last Name:</label> <input type="text" name="lastName"/><br/>
    <label for="address1">Address 1:</label> <input type="text" id="address" name="address1"/><br/>
    <label for="address2">Address 2:</label> <input type="text" name="address2"/><br/>
    <label for="city">City:</label> <input type="text" id="city" name="city"/><br/>
    <label for="state">State:</label><select id="state" name="state">
    <option value="CA"<?php echo(isset($_POST['state'])&&($_POST['state']=='CA')?' selected="selected"':'');?>>CA</option>
</select><br/>
    <label for="Zip">Zip Code:</label><input type="text" id="Zip" name="Zip">
    <br/>
    <label for="location">Location:</label><select name="location">
    <option value="Curb"<?php echo(isset($_POST['location'])&&($_POST['location']=='Curb')?' selected="selected"':'');?>>Curb</option>
    <option value="Garage"<?php echo(isset($_POST['location'])&&($_POST['location']=='Garage')?' selected="selected"':'');?>>Garage</option>
    <option value="Driveway"<?php echo(isset($_POST['location'])&&($_POST['location']=='Driveway')?' selected="selected"':'');?>>Driveway</option>
    <option value="FrontDoor"<?php echo(isset($_POST['location'])&&($_POST['location']=='FrontDoor')?' selected="selected"':'');?>>Front Door</option>
    <option value="SideDoor"<?php echo(isset($_POST['location'])&&($_POST['location']=='SideDoor')?' selected="selected"':'');?>>Side Door</option>
    <option value="Inside"<?php echo(isset($_POST['location'])&&($_POST['location']=='Inside')?' selected="selected"':'');?>>Inside</option></select><br/>
    <input type="hidden" id="lat" name="lat" value="" /><br>
    <input type="hidden" id="lng" name="lng" value="" /><br>
    <input type="button" value="Find Geopoints" onclick="codeAddress()"/>
    <input name="submit" type="submit" id="submit" value="Submit"/>
</form>

これはPHP MySQLにデータを投稿するため

<?php
if(isset($_POST['submit']))
{

    $con = mysql_connect("localhost","x","y");

    if (!$con){
        die('Could not connect: ' . mysql_error());
    }

    mysql_select_db("x", $con);

    $sqlCmd = sprintf("INSERT INTO x (firstName, lastName, address1, address2, city, state, Zip, location, lat, lng) VALUES ('%s','%s','%s','%s','%s','%s','%s','%s','%s','%s')", 
        mysql_real_escape_string($_POST["firstName"]),
        mysql_real_escape_string($_POST["lastName"]),
        mysql_real_escape_string($_POST["address1"]),
        mysql_real_escape_string($_POST["address2"]),
        mysql_real_escape_string($_POST["city"]),
        mysql_real_escape_string($_POST["state"]),
        mysql_real_escape_string($_POST["Zip"]),
        mysql_real_escape_string($_POST["location"]),
        mysql_real_escape_string($_POST["lat"]),
        mysql_real_escape_string($_POST["lng"]));
    //echo $sqlCmd;
    //die();    

    mysql_query($sqlCmd);

    mysql_close($con);
}

?>
javascriptphphtmlmysqlgeocoding
10
RugerSR9

フォームにIDを与え、

<form id="geoform" align="center" method="post">

送信ボタンを取り除き、ただ持って、

<input type="button" value="Submit" onclick="codeAddress()"/>

そして、JSで送信し、

function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            updateCoordinates(results[0].geometry.location);
            // Trigger the form submission here
            document.getElementById("geoform").submit();
        } else {
            alert("The address you entered could not be found: " + status);
        }
    });
}

そして最後にPHPのコードをこの行に変更し、

if(isset($_POST['submit']))

代わりにこれに、

if($_SERVER['REQUEST_METHOD'] === 'POST')
15
PherricOxide