CODEWITHSUNDEEP
phpformsurlparameters
DaftPlug
DaftPlug

Reputation: 60

Fill form with URL parameters

I want to connect form values and after-submit URL parameters, so when form is submitted I want to pre-fill the form with the existing submitted value - assuming that calculate.php holds the form. Also I want to match form values to URL parameters if parameters will be changed in URL by user and entered through the web browser. I also want my from to have existing default values. Here is exact example of this: https://www.nicehash.com/profitability-calculator and below is my form

<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>

Upvotes: 0

Views: 910

Answers (2)

Professor Abronsius
Professor Abronsius

Reputation: 33813

I hope the following is of use - it utilises javascript to process the querystring and then queries the DOM to find the relevant form elements which, if their name appears in the url, will set the element value to that in the querystring.

<?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>

Upvotes: 0

dmanea28
dmanea28

Reputation: 11

Use some javascript at the end of the form:

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

You can also make sure that the value of $_GET['hardware'] is in the list of possible values.

In addition, you should remove the selected="true" attribute.

Upvotes: 1

Related Questions