使用 URL 参数填写表单

debugcn 发表于 Dev

DaftPlug

我想连接表单值和提交后的 URL 参数，所以当提交表单时，我想用现有的提交值预填充表单 - 假设 calculate.php 包含表单。如果参数将由用户在 URL 中更改并通过 Web 浏览器输入，我还想将表单值与 URL 参数匹配。我还希望我的 from 具有现有的默认值。这是一个确切的例子：https : //www.nicehash.com/profitability-calculator，下面是我的表格

<form class="form-inline" method="GET" action="calculate.php">
  <div class="hardware">
        <label>Select hardware</label>
        <div class="select">
  <select class="selectpicker" data-size="10" id="hardware" name="hardware" required>
  <optgroup label="ASIC">
<option value="canaan-creative-avalon-7">Canaan Creative Avalon 7</option><option value="canaan-creative-avalon-6">Canaan Creative Avalon 6</option><option value="gridseed-blade-25mhz">Gridseed Blade [2.5MHz]</option><option value="gekkoscience-2pac-2x-bm1384-usb-stick-miner">GekkoScience 2PAC - 2x BM1384 USB Stick Miner</option><option value="lketc-dragon-miner-1ths">LKETC DRAGON MINER 1TH/S</option><option value="bitmain-antminer-u3">BITMAIN AntMiner U3</option><option value="bitmain-antminer-s3">BITMAIN AntMiner S3</option><option value="bitmain-antminer-s4">BITMAIN AntMiner S4</option><option value="bitmain-antminer-s5">BITMAIN AntMiner S5</option><option value="bitmain-antminer-s7">BITMAIN AntMiner S7</option><option value="bitmain-antminer-s7ln">BITMAIN AntMiner S7LN</option><option value="bitmain-antminer-s9" selected="true">BITMAIN AntMiner S9</option><option value="bitmain-antminer-r4">BITMAIN AntMiner R4</option><option value="bitmain-antminer-l3">BITMAIN AntMiner L3+</option><option value="bitmain-antminer-d3">BITMAIN AntMiner D3</option><option value="innosilicon-a2-terminator">Innosilicon A2 Terminator</option><option value="innosilicon-a4-dominator">Innosilicon A4 Dominator</option><option value="innosilicon-a5-dashmaster-normal-mode">Innosilicon A5 DashMaster - normal mode</option><option value="innosilicon-a5-dashmaster-overclock-mode">Innosilicon A5 DashMaster - overclock mode</option><option value="ibelink-dm384m-x11">iBeLink DM384M X11</option><option value="ibelink-dm22g-x11">iBeLink DM22G X11 </option><option value="x11-miner-450m-pinidea-dr2">X11 miner 450M PinIdea Dr2</option><option value="baikal-x11-asic-mini-miner">Baikal X11 ASIC Mini Miner</option><option value="baikal-x11-x13-x14-x15-qbit-quark-asic-mini-miner">Baikal X11-X13-X14-X15-Qbit-Quark ASIC Mini Miner</option><option value="baikal-giant">Baikal Giant+</option><option value="baikal-giant-x10">Baikal Giant X10</option>
  </optgroup>
  <optgroup label="GPU">
<option value="AMD-CPU-A6-5400K">AMD CPU A6-5400K</option><option value="amd-cpu-ryzen-7-1700x-400ghz">AMD CPU Ryzen 7 1700X @ 4.00GHz</option><option value="amd-hd-7870">AMD HD 7870</option><option value="amd-r7-360">AMD R7 360</option><option value="amd-hd-7950">AMD HD 7950</option><option value="amd-r7-370">AMD R7 370</option><option value="amd-r9-280x">AMD R9 280X</option><option value="amd-r9-290x">AMD R9 290X</option><option value="amd-r9-380">AMD R9 380</option><option value="amd-r9-380x">AMD R9 380X</option><option value="amd-r9-390">AMD R9 390</option><option value="amd-r9-fury-nano">AMD R9 Fury Nano</option><option value="amd-rx-460-4gb">AMD RX 460 4GB</option><option value="amd-rx-470-4gb">AMD RX 470 4GB</option><option value="amd-rx-480-8gb">AMD RX 480 8GB</option><option value="amd-rx-550-4gb">AMD RX 550 4GB</option><option value="amd-rx-570-4gb">AMD RX 570 4GB</option><option value="amd-rx-580-4gb">AMD RX 580 4GB</option><option value="amd-rx-580-8gb">AMD RX 580 8GB</option><option value="amd-rx-vega-56">AMD RX Vega 56</option><option value="amd-rx-vega-64">AMD RX Vega 64</option><option value="amd-vega-frontier-edition">AMD Vega Frontier Edition</option><option value="NVIDIA-GTX-560-Ti">NVIDIA GTX 560 Ti</option><option value="NVIDIA-GTX-650-Ti">NVIDIA GTX 650 Ti</option><option value="nvidia-gtx-750-ti">NVIDIA GTX 750 Ti</option><option value="nvidia-geforce-930mx">NVIDIA GeForce 930MX</option><option value="nvidia-gtx-960">NVIDIA GTX 960</option><option value="nvidia-gtx-970">NVIDIA GTX 970</option><option value="nvidia-gtx-980">NVIDIA GTX 980</option><option value="nvidia-gtx-980-ti">NVIDIA GTX 980 Ti</option><option value="nvidia-gtx-1050-ti">NVIDIA GTX 1050 Ti</option><option value="nvidia-gtx-1050">NVIDIA GTX 1050</option><option value="nvidia-gtx-1060-6gb">NVIDIA GTX 1060 6GB</option><option value="nvidia-gtx-1070">NVIDIA GTX 1070</option><option value="nvidia-gtx-1080-ti">NVIDIA GTX 1080 Ti</option><option value="nvidia-gtx-1080">NVIDIA GTX 1080</option><option value="nvidia-gtx-1070-ti">NVIDIA GTX 1070 Ti</option>
  </optgroup>
  <optgroup label="CPU">
<option value="intel-cpu-q9450-266ghz">Intel CPU Q9450 @ 2.66GHz</option><option value="intel-cpu-g1840-280ghz">Intel CPU G1840 @ 2.80GHz</option><option value="intel-cpu-g2030-300ghz">Intel CPU G2030 @ 3.00GHz</option><option value="intel-cpu-i7-3630qm-240ghz">Intel CPU i7-3630QM @ 2.40GHz</option><option value="intel-cpu-i7-6700-340ghz">Intel CPU i7-6700 @ 3.40GHz</option><option value="intel-cpu-i7-6700t-280ghz">Intel CPU i7-6700T @ 2.80GHz</option><option value="intel-cpu-i7-7700k-470ghz">Intel CPU i7-7700K @ 4.70GHz</option>
  </optgroup>
</select>
        </div>
      </div>
      <div class="currency">
        <label>Currency</label>
        <div class="select">
<select class="selectpicker" data-size="10" id="currency" name="currency" required>
  <option value="USD" selected="true">USD</option><option value="AUD">AUD</option><option value="BGN">BGN</option><option value="BRL">BRL</option><option value="CAD">CAD</option><option value="CHF">CHF</option><option value="CNY">CNY</option><option value="CZK">CZK</option><option value="DKK">DKK</option><option value="EUR">EUR</option><option value="GBP">GBP</option><option value="HKD">HKD</option><option value="HRK">HRK</option><option value="HUF">HUF</option><option value="IDR">IDR</option><option value="ILS">ILS</option><option value="INR">INR</option><option value="JPY">JPY</option><option value="KRW">KRW</option><option value="MXN">MXN</option><option value="MYR">MYR</option><option value="NOK">NOK</option><option value="NZD">NZD</option><option value="PHP">PHP</option><option value="PLN">PLN</option><option value="RON">RON</option><option value="RUB">RUB</option><option value="SEK">SEK</option><option value="SGD">SGD</option><option value="THB">THB</option><option value="TRY">TRY</option><option value="ZAR">ZAR</option>
</select>
</div>
      </div>
      <div class="electricity">
        <label>Electricity costs</label>
<input type="text" id="electricity" value="0.12" name="electricity" onchange='saveValue(this);' required>
<sub>USD/kWh</sub>
      </div>
  <button type="submit" class="btn searchbtn btn-lg btn-default btn-red">Calculate</button>
</form>

阿布罗修斯教授

我希望以下内容有用 - 它利用 javascript 来处理查询字符串，然后查询 DOM 以找到相关的表单元素，如果它们的名称出现在 url 中，则会将元素值设置为查询字符串中的值。

<?php

?>
<!doctype html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <script>
            function saveValue(n){
                /* nfi */
            }

            /* utility to process querystring and return it as an object */
            function getArgs() {
                var a = {};
                var p = location.search.substring(1).split("&");
                for(var i=0; i < p.length;i++) {
                    var x = p[i].indexOf('=');
                    if(x == -1) continue;
                    a[p[i].substring(0,x)] = unescape(p[i].substring(x+1));
                }
                return a;
            }   

            document.addEventListener('DOMContentLoaded',function(e){
                /* Get the querystring - objectify */
                var args=getArgs();
                /* Get the various form elements as nodelist/array */
                var col=Array.prototype.slice.call( document.querySelectorAll('form.form-inline select, form.form-inline input[type="text"]') );
                    col.forEach( function(e){

                        /* If the element name appears in the querystring, set the value accordingly */
                        if( args.hasOwnProperty( e.name ) ){
                            e.value=args[ e.name ];
                        }
                    });
                },false );

        </script>
    </head>
    <body>
        <form class="form-inline" method="GET" action="calculate.php">
            <div class="hardware">
                <label>Select hardware</label>
                <div class="select">
                    <select class="selectpicker" data-size="10" id="hardware" name="hardware" required>
                        <option value='-1' selected="true">Please Select
                        <optgroup label="ASIC">
                            <option value="canaan-creative-avalon-7">Canaan Creative Avalon 7</option>
                            <option value="canaan-creative-avalon-6">Canaan Creative Avalon 6</option>
                            <option value="gridseed-blade-25mhz">Gridseed Blade [2.5MHz]</option>
                            <option value="gekkoscience-2pac-2x-bm1384-usb-stick-miner">GekkoScience 2PAC - 2x BM1384 USB Stick Miner</option>
                            <option value="lketc-dragon-miner-1ths">LKETC DRAGON MINER 1TH/S</option>
                            <option value="bitmain-antminer-u3">BITMAIN AntMiner U3</option>
                            <option value="bitmain-antminer-s3">BITMAIN AntMiner S3</option>
                            <option value="bitmain-antminer-s4">BITMAIN AntMiner S4</option>
                            <option value="bitmain-antminer-s5">BITMAIN AntMiner S5</option>
                            <option value="bitmain-antminer-s7">BITMAIN AntMiner S7</option>
                            <option value="bitmain-antminer-s7ln">BITMAIN AntMiner S7LN</option>
                            <option value="bitmain-antminer-s9">BITMAIN AntMiner S9</option>
                            <option value="bitmain-antminer-r4">BITMAIN AntMiner R4</option>
                            <option value="bitmain-antminer-l3">BITMAIN AntMiner L3+</option>
                            <option value="bitmain-antminer-d3">BITMAIN AntMiner D3</option>
                            <option value="innosilicon-a2-terminator">Innosilicon A2 Terminator</option>
                            <option value="innosilicon-a4-dominator">Innosilicon A4 Dominator</option>
                            <option value="innosilicon-a5-dashmaster-normal-mode">Innosilicon A5 DashMaster - normal mode</option>
                            <option value="innosilicon-a5-dashmaster-overclock-mode">Innosilicon A5 DashMaster - overclock mode</option>
                            <option value="ibelink-dm384m-x11">iBeLink DM384M X11</option>
                            <option value="ibelink-dm22g-x11">iBeLink DM22G X11 </option>
                            <option value="x11-miner-450m-pinidea-dr2">X11 miner 450M PinIdea Dr2</option>
                            <option value="baikal-x11-asic-mini-miner">Baikal X11 ASIC Mini Miner</option>
                            <option value="baikal-x11-x13-x14-x15-qbit-quark-asic-mini-miner">Baikal X11-X13-X14-X15-Qbit-Quark ASIC Mini Miner</option>
                            <option value="baikal-giant">Baikal Giant+</option>
                            <option value="baikal-giant-x10">Baikal Giant X10</option>
                        </optgroup>
                        <optgroup label="GPU">
                            <option value="AMD-CPU-A6-5400K">AMD CPU A6-5400K</option>
                            <option value="amd-cpu-ryzen-7-1700x-400ghz">AMD CPU Ryzen 7 1700X @ 4.00GHz</option>
                            <option value="amd-hd-7870">AMD HD 7870</option>
                            <option value="amd-r7-360">AMD R7 360</option>
                            <option value="amd-hd-7950">AMD HD 7950</option>
                            <option value="amd-r7-370">AMD R7 370</option>
                            <option value="amd-r9-280x">AMD R9 280X</option>
                            <option value="amd-r9-290x">AMD R9 290X</option>
                            <option value="amd-r9-380">AMD R9 380</option>
                            <option value="amd-r9-380x">AMD R9 380X</option>
                            <option value="amd-r9-390">AMD R9 390</option>
                            <option value="amd-r9-fury-nano">AMD R9 Fury Nano</option>
                            <option value="amd-rx-460-4gb">AMD RX 460 4GB</option>
                            <option value="amd-rx-470-4gb">AMD RX 470 4GB</option>
                            <option value="amd-rx-480-8gb">AMD RX 480 8GB</option>
                            <option value="amd-rx-550-4gb">AMD RX 550 4GB</option>
                            <option value="amd-rx-570-4gb">AMD RX 570 4GB</option>
                            <option value="amd-rx-580-4gb">AMD RX 580 4GB</option>
                            <option value="amd-rx-580-8gb">AMD RX 580 8GB</option>
                            <option value="amd-rx-vega-56">AMD RX Vega 56</option>
                            <option value="amd-rx-vega-64">AMD RX Vega 64</option>
                            <option value="amd-vega-frontier-edition">AMD Vega Frontier Edition</option>
                            <option value="NVIDIA-GTX-560-Ti">NVIDIA GTX 560 Ti</option>
                            <option value="NVIDIA-GTX-650-Ti">NVIDIA GTX 650 Ti</option>
                            <option value="nvidia-gtx-750-ti">NVIDIA GTX 750 Ti</option>
                            <option value="nvidia-geforce-930mx">NVIDIA GeForce 930MX</option>
                            <option value="nvidia-gtx-960">NVIDIA GTX 960</option>
                            <option value="nvidia-gtx-970">NVIDIA GTX 970</option>
                            <option value="nvidia-gtx-980">NVIDIA GTX 980</option>
                            <option value="nvidia-gtx-980-ti">NVIDIA GTX 980 Ti</option>
                            <option value="nvidia-gtx-1050-ti">NVIDIA GTX 1050 Ti</option>
                            <option value="nvidia-gtx-1050">NVIDIA GTX 1050</option>
                            <option value="nvidia-gtx-1060-6gb">NVIDIA GTX 1060 6GB</option>
                            <option value="nvidia-gtx-1070">NVIDIA GTX 1070</option>
                            <option value="nvidia-gtx-1080-ti">NVIDIA GTX 1080 Ti</option>
                            <option value="nvidia-gtx-1080">NVIDIA GTX 1080</option>
                            <option value="nvidia-gtx-1070-ti">NVIDIA GTX 1070 Ti</option>
                        </optgroup>
                        <optgroup label="CPU">
                            <option value="intel-cpu-q9450-266ghz">Intel CPU Q9450 @ 2.66GHz</option>
                            <option value="intel-cpu-g1840-280ghz">Intel CPU G1840 @ 2.80GHz</option>
                            <option value="intel-cpu-g2030-300ghz">Intel CPU G2030 @ 3.00GHz</option>
                            <option value="intel-cpu-i7-3630qm-240ghz">Intel CPU i7-3630QM @ 2.40GHz</option>
                            <option value="intel-cpu-i7-6700-340ghz">Intel CPU i7-6700 @ 3.40GHz</option>
                            <option value="intel-cpu-i7-6700t-280ghz">Intel CPU i7-6700T @ 2.80GHz</option>
                            <option value="intel-cpu-i7-7700k-470ghz">Intel CPU i7-7700K @ 4.70GHz</option>
                        </optgroup>
                    </select>
                </div>
            </div>
            <div class="currency">
                <label>Currency</label>
                <div class="select">
                    <select class="selectpicker" data-size="10" id="currency" name="currency" required>
                        <option value='-1' selected="true">Please Select
                        <option value="USD">USD</option>
                        <option value="AUD">AUD</option>
                        <option value="BGN">BGN</option>
                        <option value="BRL">BRL</option>
                        <option value="CAD">CAD</option>
                        <option value="CHF">CHF</option>
                        <option value="CNY">CNY</option>
                        <option value="CZK">CZK</option>
                        <option value="DKK">DKK</option>
                        <option value="EUR">EUR</option>
                        <option value="GBP">GBP</option>
                        <option value="HKD">HKD</option>
                        <option value="HRK">HRK</option>
                        <option value="HUF">HUF</option>
                        <option value="IDR">IDR</option>
                        <option value="ILS">ILS</option>
                        <option value="INR">INR</option>
                        <option value="JPY">JPY</option>
                        <option value="KRW">KRW</option>
                        <option value="MXN">MXN</option>
                        <option value="MYR">MYR</option>
                        <option value="NOK">NOK</option>
                        <option value="NZD">NZD</option>
                        <option value="PHP">PHP</option>
                        <option value="PLN">PLN</option>
                        <option value="RON">RON</option>
                        <option value="RUB">RUB</option>
                        <option value="SEK">SEK</option>
                        <option value="SGD">SGD</option>
                        <option value="THB">THB</option>
                        <option value="TRY">TRY</option>
                        <option value="ZAR">ZAR</option>
                    </select>
                </div>
            </div>
            <div class="electricity">
                <label>Electricity costs</label>
                <input type="text" id="electricity" value="0.12" name="electricity" onchange='saveValue(this);' required>
                <sub>USD/kWh</sub>
            </div>
            <button type="submit" class="btn searchbtn btn-lg btn-default btn-red">Calculate</button>
        </form>
    </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。