提交调用js函数然后post到mysql的Button

Posted 2023-02-22

【中文标题】提交调用js函数然后post到mysql的Button

【英文标题】：Submit Button that calls js function and then posts to mysql

【发布时间】：2013-09-23 14:46:33

【问题描述】：

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

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

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

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

这是用于将数据发布到 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);


?>

【问题讨论】：

必填：php.net/manual/en/migration55.deprecated.php

@adamdunson 谢谢你，我会更新我的代码。

【参考方案1】：

给表单一个 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')

【讨论】：

这似乎破坏了我的 PHP 代码。 PHP 正在等待单击“提交”按钮（您让我将其删除），当它被单击时，它会使用所有表单数据（包括 lat 和 lng）更新 mySQL 表。我现在该如何解决这个问题？我编辑了我的问题并添加了我的 PHP 代码。谢谢！！

只需将 if(isset($_POST['submit'])) 更改为 if($_SERVER['REQUEST_METHOD'] === 'POST')