URLパラメータでフィルフォームを入力してください

Question

フォームの値と送信後のURLパラメータを接続したいので、フォームが送信されると、フォームにはcalculate.phpがフォームを保持していると仮定して、フォームにあらかじめ入力しておきます。また、ユーザーがURLでパラメータを変更し、Webブラウザから入力する場合は、フォームの値をURLパラメータに一致させたい私はまた、私の元の既定値を持つようにします。ここでは、この正確な例である：

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

ます。また$_GET['hardware']の値がであることを確認することができます：https://www.nicehash.com/profitability-calculator以下は私のフォームは、フォームの最後にいくつかのJavaScriptを使用

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

Answer 1

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> 

Answer 2

です可能な値のリスト

さらに、selected="true"属性を削除する必要があります。