如何将javascript中的2个值解析为2个输入框?

时间:2019-04-12 04:06:06

标签: javascript jquery html

声明

我想在用户输入位置名称后将值解析为2个输入框(lat和lng),然后单击转换

我想知道我是否使用了错误的ID选择器来获取/解析值,还是有更多代码。

front.php

a

process.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>:&nbsp&nbsp <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>:&nbsp&nbsp&nbsp&nbsp <input type="text" value="<?php echo $lat; ?>" name="lat" placeholder="Latitude" readonly> </div> <div class="form-group" id="showLong"> <label>Longitude</label>:&nbsp <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服务器中。

1 个答案:

答案 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>:&nbsp&nbsp&nbsp&
   <input type="text" value="<?php echo $lat; ?>" name="lat" placeholder="Latitude" readonly>
</div>

您将不得不使用

document.querySelector("#showLat> input").value

document.getElementById('showLat').children[1].value

基本上,您使用的是错误的选择器。