声明
我想在用户输入位置名称后将值解析为2个输入框（lat和lng），然后单击转换
我想知道我是否使用了错误的ID选择器来获取/解析值，还是有更多代码。
front.php
aprocess.php
a[-1]预期结果
在B部分中，在用户输入位置名称<html>
<body>
<?php
include 'connection.php';
require_once 'process.php';
?>
<form method="post" action="process.php">
<div class="form-group">
<label>Date</label>:  
<input style="font-size:22px" size="20" type="text" name="datetime" id="showTime"placeholder="YYYY-MM-DD hh:mm:ss" readonly required>
<button style="font-size:36px" type="button" name="Time" id="getTime" class="btn btn-info round"><i class="far fa-clock"></i></button>
<h5 style="color:white">Please click at the Time button on the right to convert the location name <br> into latitude and longitude coordinates.</h5>
</div>
<!-----------------------------------Section B------------------------------------------------------------------------------------------------------------->
<label>Enter Location name:</label>
<div id="locPost">
<input style="font-size:1em" size="32" type="text" name="locPost" placeholder="Please enter location name" required>
</div>
<h5 style="color:white">Please click at the Convert button below to convert the location name <br> into latitude and longitude coordinates.</h5>
<div style="text-align:center" id="getGPS">
<button style="font-size:1em" type="submit" name="Convert" class="btn btn-dark">Convert <i class="fas fa-location-arrow"></i></button> <!--There could be error here...-->
</div>
<div class="form-group" id="showLat">
<label>Latitude</label>:    
<input type="text" value="<?php echo $lat; ?>" name="lat" placeholder="Latitude" readonly>
</div>
<div class="form-group" id="showLong">
<label>Longitude</label>: 
<input type="text" value="<?php echo $lng; ?>" name="lng" placeholder="Longitude" readonly>
</div>
<!-------------------------------------End Section B------------------------------------------------------------------------------------------------------->
</form>
<!--End form-->
<div class="row" style="padding: 10px">
<div class="col">
<button style="font-size: 1em" type="submit" class="btn btn-success" name="Save"><b>Save <i class="fas fa-save"></i></b></button>
</div>
<div class="col">
<button style="font-size: 1em" type="reset" class="btn btn-warning" value="Reset"><b>Reset <i class="fas fa-sync"></i></b></button>
</div>
</div>
</body>
</html>
<!--End html-->
<script>
//Get current time
var today = new Date();
//Date formatting ref : https://stackoverflow.com/questions/6040515/how-do-i-get-month-and-date-of-javascript-in-2-digit-format/42389398
var currentTimeValue = today.getFullYear()+'-'+ ((today.getMonth() < 9 ? '0':'') + (today.getMonth()+1)) +'-'+
((today.getDate() < 10 ? '0' :'') + today.getDate())+" "+ ((today.getHours() < 10 ? '0' :'') + today.getHours()) + ":" +
((today.getMinutes() < 10 ? '0' :'') + today.getMinutes()) + ":" + ((today.getSeconds() < 10 ? '0' :'') + today.getSeconds());
//Parse the value to date button
$("#getTime").click(function()
{
$("#showTime").val(currentTimeValue);
})
//<--Geocode ref: https://www.youtube.com/watch?v=pRiQeo17u6c-->
// Get location form
var locationForm = document.getElementById('locPost');
function geocode(e)
{
// Prevent actual submit
e.preventDefault();
var location = document.getElementById('getGPS').value; //Location-input
axios.get('https://maps.googleapis.com/maps/api/geocode/json',
{
params:
{
address:location,
key:'xxxxxxxxxxxxxxxxxxxxxxxxxxx' //Google API KEY
}
})
.then(function(response)
{
// Geometry
var lat = response.data.results[0].geometry.location.lat;
var lng = response.data.results[0].geometry.location.lng;
// Output to app
document.getElementById('showLat').innerHTML = lat;
document.getElementById('showLong').innerHTML = lng;
})
}
</script>
<!--End script-->
后，用户单击转换（<?php
session_start();
include 'connection.php';
if(isset($_POST['Save']))
{
$rowcount=0;
$category = mysqli_real_escape_string($conn,$_POST['category'] );
$url = mysqli_real_escape_string($conn,$_POST['url'] );
$datetime = mysqli_real_escape_string($conn,$_POST['datetime'] );
$lat = mysqli_real_escape_string($conn,$_POST['lat'] );
$lng = mysqli_real_escape_string($conn,$_POST['lng'] );
$sql="SELECT crimenews_url FROM crimenews WHERE crimenews_url=?";
$stmt=$conn->prepare( $sql );
$stmt->bind_param('s',$url );
$result=$stmt->execute();
$stmt->store_result();
$rowcount=$stmt->num_rows;
$stmt->free_result();
$stmt->close();
$sql="INSERT INTO crimenews
(crimenews_cat, crimenews_url, crimenews_datetime, crimenews_locationLat, crimenews_locationLong)
VALUES( ?,?,?,?,? ) ON DUPLICATE KEY UPDATE crimenews_url = VALUES(crimenews_url)";
$stmt = $conn->prepare( $sql );
$stmt->bind_param( "sssss", $category, $url, $datetime, $lat, $lng );
$result = $stmt->execute();
//There is duplicate input
if($rowcount==1)
{
$_SESSION['message'] = "The news has already existed.";
$_SESSION['msg_type'] = "danger";
}
//There is no duplicate input
else
{
$_SESSION['message'] = "The news has added.";
$_SESSION['msg_type'] = "success";
}
$stmt->close();
header("location: front.php");
}
?>
）。
lat和lng（来自脚本）的值将分别解析为<div id=locPost>和div id=getGPS。
点击保存按钮后，这些值将解析到MySQL服务器中。
答案 0 :(得分：0)
我不确定100％的问题是什么，但是我在代码中看到的问题是您为document.getElementById('getGPS').innerHtml选择了错误的选择器
document.querySelector("#locPost > input").value
或
document.getElementById('locPost').children[0].value
，您必须在选择div后再获取正确的元素，例如：
<div class="form-group" id="showLat">
<label>Latitude</label>:   &
<input type="text" value="<?php echo $lat; ?>" name="lat" placeholder="Latitude" readonly>
</div>
您将不得不使用
document.querySelector("#showLat> input").value
或
document.getElementById('showLat').children[1].value
基本上，您使用的是错误的选择器。