1. 홈
  2. 질의 응답
  3. URL 매개 변수를 사용하여 양식 채우기

URL 매개 변수를 사용하여 양식 채우기

2017-12-02 19 views
0

양식 값을 제출하고 URL 제출 후 매개 변수를 연결하고자하므로 양식을 제출할 때 기존 제출 된 값으로 양식을 미리 채우고 싶습니다. calculate.php가 양식을 보유하고 있다고 가정합니다. 또한 매개 변수가 사용자가 URL을 변경하고 웹 브라우저를 통해 입력하는 경우 양식 값을 URL 매개 변수와 일치 시키려고합니다. 나는 또한 기존의 기본값을 갖기를 원한다.URL 매개 변수를 사용하여 양식 채우기

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

당신은 또한 $_GET['hardware']의 값이에 있는지 확인 할 수 있습니다

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

출처

2017-12-02 Chakachuk

+0

여기 어딘가에 질문이 있거나 코드에 대한 요청입니까? – RamRaider

+0

코드를 요청하지 않습니다. PHP와 JavaScript를 사용하여 URL에 양식과 GET 매개 변수를 연결하는 방법에 대한 지침을 원합니다. – Chakachuk

답변

0

자바 스크립트를 사용하여 쿼리 스트링을 처리 한 다음 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>

출처

2017-12-02 18:08:09 RamRaider

+0

솔루션을 제공해 주셔서 감사합니다. 그것은 잘 작동하지만 모바일 사용자를 위해 작동하지 않습니다 – Chakachuk

+0

오류가 없습니다. 문제는 모바일 네이티브 선택 메뉴 때문입니다. 모바일 용 네이티브 선택 메뉴를 사용하지 않으면 작동합니다. – Chakachuk

1

양식의 끝에 약간의 자바 스크립트를 사용하여 내 양식 https://www.nicehash.com/profitability-calculator과 같습니다 : 다음은이 정확한 예입니다 가능한 값 목록.

또한 selected="true" 특성을 제거해야합니다.

출처

2017-12-02 17:08:26 dmanea28

+0

트릭을 수행해야하지만 작동하지 않습니다. 소스 코드에서 실제로 현재 선택한 값을 가져 오지만 제출 후 양식에 설정하지 않습니다. – Chakachuk

 관련 문제

  • 관련 문제 없음^_^