使用 URL 参数填写表单

【问题标题】：Fill form with URL parameters使用 URL 参数填写表单
【发布时间】：2017-12-02 15:52:52
【问题描述】：

我想连接表单值和提交后的 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>

【问题讨论】：

  • 这里一定有问题还是只是请求代码？
  • 我不要求提供代码。我只想知道如何使用 PHP 或 JavaScript 在 URL 中连接表单和 GET 参数

标签： php forms url parameters


【解决方案1】：

在表单末尾使用一些javascript：

<script>
document.getElementById('hardware').value=
"<?php if(isset($_GET['hardware'])) echo $_GET['hardware'];
else echo 'bitmain-antminer-s9';?>";
</script>

您还可以确保$_GET['hardware'] 的值在可能值列表中。

此外，您应该删除selected="true" 属性。

【讨论】：

  • 它应该可以解决问题，但它不起作用。我在源代码中看到它实际上抓取了当前选定的值，但在提交后没有在表单上设置它
【解决方案2】：

我希望以下内容有用 - 它利用 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>

【讨论】：

  • 非常感谢您的解决方案。它工作正常，但不适用于移动用户
  • 没有错误。我认为问题是由移动原生选择菜单引起的。如果我禁用手机的本机选择菜单，它可以工作
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-10-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-04-01
  • 2013-05-23
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode