堆棧內存溢出
  簡體   English   中英

Javascript填充的表單數據未通過表單POST方法發送

[英]Javascript filled form data isn't being sent through the form POST method

 原文  2018-01-03 23:06:45  2   2    javascript/ php/ html/ forms/ postgresql

問題描述

我正在嘗試將表單數據發送到php文件，該文件會將參數輸入到PostgreSQL數據庫中。 Javascript會填寫大多數表格，以獲取google地圖的經度和緯度，簡單的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>

2 個解決方案

解決方案1
 0 已采納  2018-01-03 23:13:12

我看到您通過ID獲得lat ，然后將其禁用。 禁用表單字段時，不會提交其值。

檢查一下

在此示例中，INPUT元素被禁用。 因此，它無法接收用戶輸入，也不會與表單一起提交其值

解決方案2
 0  2018-01-03 23:14:36

您的某些表單字段（例如ping，上載，下載）是<p>標記，而不是<input>標記。 嘗試將其更改為<input>標記，以查看其行為是否符合您的期望。 <p>標記不會通過表單傳遞數據。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 HTML表單未調用Post方法 表格數據未通過手機發送。 JavaScript req.body 沒有從通過 addingTask() function 發送到 url 的表單中選取數據：'/newtask' 我的帶有名稱屬性的jQuery模態對話框表單輸入未與其余表單數據一起發送 不帶參數發送表格POST 用Javascript成功發送電子郵件表格，但是沒有電子郵件與表格數據一起發送。 通過 POST 方法通過 Javascript 提交表單 JavaScript中的POST數據未發送 表單數據未發送到服務器 使用javascript添加的表單元素不是從post方法發送的
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM