php 调用js函数然后发布到mysql的提交按钮

Submit Button that calls js function and then posts to mysql

提问by RugerSR9

A short and sweet description of what I am making is a contact form that geocodes a users address(once they click submit) and puts the fetched lat & lng values into a hidden field.

对我正在制作的内容的简短而甜蜜的描述是一个联系表单，它对用户地址进行地理编码（一旦他们点击提交）并将获取的 lat 和 lng 值放入隐藏字段中。

I have everything working but I have two seperate buttons and I only want one. So at the moment the user has to first click one button before they can click the submit button, which is dumb. The "Find Geopoints" button calls a js function and returns the lat and lng values into the hidden fields on the form and after that you would press the submit button and it posts all of the forms data into the MySQL database.

我一切正常，但我有两个单独的按钮，我只想要一个。所以目前用户必须先点击一个按钮，然后才能点击提交按钮，这是愚蠢的。“查找地理点”按钮调用一个 js 函数并将 lat 和 lng 值返回到表单上的隐藏字段中，然后按下提交按钮，它将所有表单数据发布到 MySQL 数据库中。

Again, everything is working in my code I just need to make both buttons in the form into one and it still work.

同样，一切都在我的代码中工作，我只需要将表单中的两个按钮合二为一，它仍然可以工作。

This is the Javascript:

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

This is the form:

这是表格：

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

This is the PHP for posting the data to MySQL

这是用于将数据发布到 MySQL 的 PHP

<?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);
}

?>

回答by PherricOxide

Give the form an ID,

给表格一个 ID，

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

Get rid of the submit button and just have,

去掉提交按钮，只需要，

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

And then submit with JS,

然后用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);
        }
    });
}

And finally in your PHP code change this line,

最后在你的 PHP 代码中更改这一行，

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

to this instead,

对此，

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