Question

我正在尝试将表单数据发送到php文件，该文件将参数输入到我的PostgreSQL数据库中。大多数表格正在填写Javascript获取谷歌地图经度和纬度，简单的ping结果等。我遇到一个问题，其中由javascript填写的所有参数都被发送空白，只有那些填写由实际用户有值。我无法弄清楚我做错了什么。这是我正在使用的代码：

<!DOCTYPE html>
<html>

<head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://bootswatch.com/3/paper/bootstrap.css">
    <style>
        /* Always set the map height explicitly to define the size of the div
           * element that contains the map. */

        #map {
            height: 65%;
        }

        #info {
            margin: 40px;
            width: auto;
        }

        #diff {
            margin: 40px;
            width: auto;
        }

        #form {
            margin: 40px;
            width: auto;
        }

        /* Optional: Makes the sample page fill the window. */

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        div.invisidiv {
            display: none;
        }
    </style>
</head>

<body>
<div class="header" align="center">
    <h2>CSULA Wifi Outage Report</h2>
</div>
<div id="alert"></div>
<div id="map"></div>

<form class="form-horizontal" id="form" method="post">
    <fieldset>
        <legend>Wifi Report</legend>
        <div class="form-group">
            <label for="date" class="col-lg-2 control-label">Date</label>
            <div class="col-lg-10">
                <input class="form-control" id="date" placeholder="Date" type="text" disabled="disabled">
            </div>
        </div>
        <div class="form-group">
            <label for="user_header" class="col-lg-2 control-label">User Agent Header</label>
            <div class="col-lg-10">
                <input class="form-control" id="user_header" placeholder="User Agent Header" type="text"
                       disabled="disabled">
            </div>
        </div>
        <div class="form-group">
            <label for="appVersion" class="col-lg-2 control-label">App Version</label>
            <div class="col-lg-10">
                <input class="form-control" id="appVersion" placeholder="App Version" type="text" disabled="disabled">
            </div>
        </div>
        <div class="form-group">
            <label for="IP" class="col-lg-2 control-label">IP</label>
            <div class="col-lg-10">
                <p class="form-control" id="ip" placeholder="loading" type="text"></p>
            </div>
        </div>
        <div class="invisidiv">
            <label for="download" class="col-lg-2 control-label">Download</label>
            <div class="col-lg-10">
                <p class="form-control" id="download" placeholder="loading" type="text"></p>
            </div>
        </div>
        <div class="invisidiv">
            <label for="upload" class="col-lg-2 control-label">Upload</label>
            <div class="col-lg-10">
                <p class="form-control" id="upload" placeholder="loading" type="text"></p>
            </div>
        </div>
        <div class="form-group">
            <label for="ping" class="col-lg-2 control-label">Ping</label>
            <p class="form-control" id="ping" type="text">Loading</p>
        </div>
        <div class="form-group">
            <label for="lat" class="col-lg-2 control-label">Latitude</label>
            <div class="col-lg-10">
                <input class="form-control" id="lat" placeholder="Latitude" type="text">
            </div>
        </div>
        <div class="form-group">
            <label for="lat" class="col-lg-2 control-label">Longitude</label>
            <div class="col-lg-10">
                <input class="form-control" id="long" placeholder="Longtitude" type="text">
            </div>
        </div>
        <div class="form-group">
            <label for="location" class="col-lg-2 control-label">Location</label>
            <div class="col-lg-10">
                <input class="form-control" id="location"
                       placeholder="We can auto generate later on by using our postgresql bound box coordinate range"
                       type="text">
            </div>
        </div>
        <div class="form-group">
            <label for="selectfloor" class="col-lg-2 control-label">Select Floor</label>
            <div class="col-lg-10">
                <select class="form-control" id="selectfloor">
                    <option value="1">1*</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="wifistr" class="col-lg-2 control-label">Your wifi strength (0-5)</label>
            <div class="col-lg-10">
                <select class="form-control" id="wifistr">
                    <option>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="moreinfo" class="col-lg-2 control-label">Briefly describe your wifi issue</label>
            <div class="col-lg-10">
                <textarea class="form-control" rows="3" id="moreinfo"></textarea>
                <span class="help-block">Test</span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-lg-10 col-lg-offset-2">
                <button type="reset" class="btn btn-default">Cancel</button>
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </fieldset>
</form>

<script id="autofill">
    var info = document.getElementById('info');
    var user_header = document.getElementById('user_header');
    var appVersion = document.getElementById('appVersion');
    var inputdate = document.getElementById('date')

    inputdate.value = Date();
    user_header.value = navigator.userAgent;
    appVersion.value = navigator.appVersion;
</script>

<script id="getmap">
    // Note: This example requires that you consent to location sharing when
    // prompted by your browser. If you see the error "The Geolocation service
    // failed.", it means you probably did not give permission for the browser to
    // locate you.
    var map, infoWindow;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: -34.397,
                lng: 150.644
            },
            zoom: 20,
            mapTypeId: 'satellite'
        });
        infoWindow = new google.maps.InfoWindow;

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                infoWindow.setPosition(pos);
                // CSULA Data Science Class Building: -118.1697192639,34.0645025281,-118.1693410724,34.0646465133
                if (position.coords.latitude >= 34.0645025281 && position.coords.latitude <= 34.0646465133
                    && position.coords.longitude >= -118.1697192639 && position.coords.longitude <= -118.1693410724) {
                    // Set content  
                    infoWindow.setContent('Location found.<br>' + 'Lat: ' + position.coords.latitude + '<br> Long: ' + position.coords.longitude);

                    // Get id's 'info' and 'alert
                    var status = document.getElementById('alert');
                    var lat = document.getElementById('lat');
                    var long = document.getElementById('long');
                    var loc = document.getElementById('location');

                    // Set style 
                    status.setAttribute("class", "alert alert-dismissible alert-success");
                    lat.setAttribute("disabled", "disabled");
                    long.setAttribute("disabled", "disabled");
                    loc.setAttribute("disabled", "disabled");

                    // Set 'info''s innerHTML with the coords
                    status.innerHTML = '<button type="button" class="close" data-dismiss="alert">&times;</button> <strong>Success! Building location found.'
                    lat.value = position.coords.latitude;
                    long.value = position.coords.longitude;
                    loc.value = 'Data Science Building';

                    // ET Building: -118.1669058278,34.0659972855,-118.1655136272,34.0668892717
                } else if (position.coords.latitude >= 34.0659972855 && position.coords.latitude <= 34.0668892717
                    && position.coords.longitude >= -118.1669058278 && position.coords.longitude <= -118.1655136272) {
                    // Set content  
                    infoWindow.setContent('Location found.<br>' + 'Lat: ' + position.coords.latitude + '<br> Long: ' + position.coords.longitude);

                    // Get id's 'info' and 'alert
                    var status = document.getElementById('alert');
                    var lat = document.getElementById('lat');
                    var long = document.getElementById('long');
                    var loc = document.getElementById('location');

                    // Set style 
                    status.setAttribute("class", "alert alert-dismissible alert-success");
                    lat.setAttribute("disabled", "disabled");
                    long.setAttribute("disabled", "disabled");
                    loc.setAttribute("disabled", "disabled");

                    // Set 'info''s innerHTML with the coords
                    status.innerHTML = '<button type="button" class="close" data-dismiss="alert">&times;</button> <strong>Success! Building location found.'
                    lat.value = position.coords.latitude;
                    long.value = position.coords.longitude;
                    loc.value = 'ET Building';

                } else {
                    // Set content
                    infoWindow.setContent('Location found.<br>' + 'Lat: ' + position.coords.latitude + '<br> Long: ' + position.coords.longitude);

                    // Get id 'alert'. Set the style and innerHTML
                    var status = document.getElementById('alert');
                    var lat = document.getElementById('lat');
                    var long = document.getElementById('long');
                    var loc = document.getElementById('location');

                    status.setAttribute("class", "alert alert-dismissible alert-danger")
                    lat.setAttribute("disabled", "disabled");
                    long.setAttribute("disabled", "disabled");
                    loc.setAttribute("disabled", "disabled");

                    status.innerHTML = '<button type="button" class="close" data-dismiss="alert">&times;</button> <strong>Unable to locate building.'
                    lat.value = position.coords.latitude;
                    long.value = position.coords.longitude;
                    loc.value = 'Unknown Location';
                }
                infoWindow.open(map);
                map.setCenter(pos);
            }, function () {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
            'Error: The Geolocation service failed.' :
            'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
    }
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY_DELETED_FOR_HELP&callback=initMap">
</script>

<script type="text/javascript">
    var w = new Worker('speedtest_worker.min.js') // create new worker
    setInterval(function () {
        w.postMessage('status')
    }, 100); // ask for status every 100ms
    w.onmessage = function (event) { // when status is received, split the string and put the values in the appropriate fields
        var data = event.data.split(';') // string format: status;download;upload;ping (speeds are in mbit/s) (status: 0=not started, 1=downloading, 2=uploading, 3=ping, 4=done, 5=aborted)
        document.getElementById('download').textContent = data[1] + ' Mbit/s'
        document.getElementById('upload').textContent = data[2] + ' Mbit/s'
        document.getElementById('ping').textContent = data[3] + ' ms'
        document.getElementById('ip').textContent = data[4]
        console.log(data[4])
    };
    w.postMessage('start') // start the speedtest (default params. keep garbage.php and empty.dat in the same directory as the js file)
</script>

Answer 1

我看到您通过ID获得lat，然后您将其停用。禁用表单字段时，不会提交其值。

检查this

在此示例中，INPUT元素被禁用。因此，它不能接收用户输入，也不会使用表单
提交其值

Answer 2

您的某些表单字段（如ping，上传，下载）是<p>标记，而不是<input>标记。尝试将这些标记更改为<input>标记，看它是否符合您的预期。 <p>代码无法通过表单传递数据。

Javascript填充的表单数据不会通过表单POST方法发送

2 个答案: