html - 获取多个变量到一个 URL 地址

Question

我已经设置了一个页面，其中包含 5 个不同的变量，这些变量将由 html 中的保管箱选择。我试图让 Get QPE 按钮使用所有选择的变量，并将它们插入到网址中以创建地图。但网址显示参数为“未定义”- http://nmq.ou.edu/cgi-bin/tools_QPE.cgi?1+0+2+undefined+undefined+undefined+undefined+0+0+34.50+ -114.00+32.50+800+632+4101+0+0+1+0+Q2RAD_HSR+Q2RAD_HSR_GC+未定义+英文+无+CNTY。如何让文件读取我的选择？这是我拥有的变量和 JS 之一的代码。

<p>QPE - Gauge Adj. Radar<br></p>
Select data ending date, time and timestep:<br>

<form name="SelectURL6" id="SelectURL6">
<select name="ME">
  <option VALUE="1" selected> January </option>
  <option VALUE="2"> February </option>
  <option VALUE="3"> March </option>
  <option VALUE="4"> April </option>
  <option VALUE="5"> May </option>
  <option VALUE="6"> June </option>
  <option VALUE="7"> July </option>
  <option VALUE="8"> August </option>
  <option VALUE="9"> September </option>
  <option VALUE="10"> October </option>
  <option VALUE="11"> November </option>
  <option VALUE="12"> December </option></select>
<select name="DE">
  <option VALUE="1" selected> 1 </option>
  <option VALUE="2"> 2 </option>
  <option VALUE="3"> 3 </option>
  <option VALUE="4"> 4 </option>
  <option VALUE="5"> 5 </option>
  <option VALUE="6"> 6 </option>
  <option VALUE="7"> 7 </option>
  <option VALUE="8"> 8 </option>
  <option VALUE="9"> 9 </option>
  <option VALUE="10"> 10 </option>
  <option VALUE="11"> 11 </option>
  <option VALUE="12"> 12 </option>
  <option VALUE="13"> 13 </option>
  <option VALUE="14"> 14 </option>
  <option VALUE="15"> 15 </option>
  <option VALUE="16"> 16 </option>
  <option VALUE="17"> 17 </option>
  <option VALUE="18"> 18 </option>
  <option VALUE="19"> 19 </option>
  <option VALUE="20"> 20 </option>
  <option VALUE="21"> 21 </option>
  <option VALUE="22"> 22 </option>
  <option VALUE="23"> 23 </option>
  <option VALUE="24"> 24 </option>
  <option VALUE="25"> 25 </option>
  <option VALUE="26"> 26 </option>
  <option VALUE="27"> 27 </option>
  <option VALUE="28"> 28 </option>
  <option VALUE="29"> 29 </option>
  <option VALUE="30"> 30 </option>
  <option VALUE="31"> 31 </option></select>
<select name="YE">
  <option SELECTED value="2012">2012</option>
  <option value="2011">2011</option></select>
<select name="TE">
  <option VALUE="7" selected>12:00 Midnight</option>                  <option VALUE="8">1:00 AM</option>                  
  <option VALUE="9">2:00 AM</option>
  <option VALUE="10">3:00 AM</option>                  
  <option VALUE="11">4:00 AM</option>
  <option VALUE="12">5:00 AM</option>                  
  <option VALUE="13">6:00 AM</option>
  <option VALUE="14">7:00 AM</option>                  
  <option VALUE="15">8:00 AM</option>
  <option VALUE="16">9:00 AM</option>                  
  <option VALUE="17">10:00 AM</option>
  <option VALUE="18">11:00 AM</option>                  
  <option VALUE="19">12:00 Noon</option>
  <option VALUE="20">1:00 PM</option>                  
  <option VALUE="21">2:00 PM</option>
  <option VALUE="22">3:00 PM</option>                  
  <option VALUE="23">4:00 PM</option>
  <option VALUE="24">5:00 PM</option>
  <option VALUE="0">6:00 PM</option>                  
  <option VALUE="1">7:00 PM</option>
  <option VALUE="2">8:00 PM</option>                  
  <option VALUE="3">9:00 PM</option>
  <option VALUE="4">10:00 PM</option>                  
  <option VALUE="5">11:00 PM</option>
  <option VALUE="6">12:00 PM</option></select>   
<select name="TS">
  <option VALUE="1">1-hour</option>
  <option VALUE="3">3-hour</option>
  <option VALUE="6">6-hour</option>
  <option VALUE="12">12-hours</option>
  <option SELECTED value="24">24-hours</option>
  <option VALUE="48">48-hours</option>
  <option VALUE="72">72-hours</option></select><br><br>
<input type="button" value="Get QPE Map" id="submit">
    </form>

    <script language="JavaScript" type="text/javascript">
function listen(event, elem, func) {
  if (elem.addEventListener) return elem.addEventListener(event, func, false);
  else return elem.attachEvent('on' + event, func);    
}

var form = document.getElementById('SelectURL6'),
    btn = document.getElementById('submit');
listen('click', btn, function() {
    var selectElems = form.getElementsByTagName('select'),
    TE = TE+7;
    if (ME==12 && DE==31 && TE>24){
        return (YE==YE + 1 && ME==1 && DE==1 && TE==TE -24);
    }
    if (DE==31 && TE>24){
        return (ME==ME + 1 && DE==1 && TE==TE - 24);
    }
    if (DE==30 && ME==4 && TE==24){
        return (ME==ME + 1 && DE==1 && TE==TE - 24);
    }
    if (DE=30 && ME==6 && TE==24){
        return (ME=ME + 1 && DE==1 && TE==TE - 24);
    }
    if (DE==30 && ME==9 && TE==24){
        return (ME==ME + 1 && DE==1 && TE==TE - 24);
    }
    if (DE==30 && ME==12 && TE==24){
        return (ME==ME + 1 && DE==1 && TE==TE - 24);
    }
    if (TE>24){
        TE==TE - 24 && DE==DE + 1
    }
    get_qpe(selectElems);
});

function get_qpe(elems) {
    var url = '',
        YE, ME, DE, TE, TS, val = 0,
        names = [],
        thisElem;
    for (var i = 0; i < elems.length; i += 1) {
        thisElem = elems[i];
        names.push(thisElem.getAttribute('name'));
        val = thisElem.options[thisElem.selectedIndex].value;
        switch (names[i]) {
        case 'YE':
            YE = val;
            break;
        case 'ME':               
            ME = val;
            break;
        case 'DE':
            DE = val;
            break;
        case 'TE':
            TE = val;
            break;
        case 'TS':
            TS = val;
            break;
        }
    }
    url = "http://nmq.ou.edu/cgi-bin/tools_QPE.cgi?1+0+2+" + YE + "+" + ME + "+" + DE + "+" + TE + "+0+0+34.50+-114.00+32.50+800+632+4101+0+0+1+0+Q2RAD_HSR_GC+Q2RAD_HSR_GC+" + TS + "+english+none+CNTY";
    window.open(url);
}
    </script>

score 0 · Accepted Answer

由于您没有将任何参数传递给get_qpe()函数，因此这些变量将作为undefined. 试试这个：

将您的按钮更改为以下内容：

<input type="submit" value="Get QPE Map" id="submit">

然后添加以下 JavaScript：

function listen(event, elem, func) {
  if (elem.addEventListener) elem.addEventListener(event, func, false);
  else if (elem.attachEvent) {
    var r = elem.attachEvent("on" + event, func);
    return r;
  }
}

listen('load', window, function() {
  var form = document.getElementById('SelectURL6'),
      btn = document.getElementById('submit');

  function get_qpe(elems) {
    var url = '',
        o = {},
        val = 0,
        names = [],
        thisElem;
    for (var i = 0; i < elems.length; i += 1) {
      thisElem = elems[i];
      names.push(thisElem.getAttribute('name'));
      val = thisElem.options[thisElem.selectedIndex].value;
      o[names[i]] = parseInt(val);
    }
    o.TE = o.TE + 7;
    if (o.ME === 12 && o.DE === 31 && o.TE > 24) {
      o.YE = o.YE + 1;
      o.ME = 1;
      o.DE = 1;
      o.TE = o.TE - 24;
    } else if (o.DE === 31 && o.TE > 24) {
      o.ME = o.ME + 1;
      o.DE = 1;
      o.TE = o.TE - 24;
    } else if (o.DE === 30 && o.ME === 4 && o.TE === 24) {
      o.ME = o.ME + 1;
      o.DE = 1;
      o.TE = o.TE - 24;
    } else if (o.DE === 30 && o.ME === 6 && o.TE === 24) {
      o.ME = o.ME + 1;
      o.DE = 1;
      o.TE = o.TE - 24;
    } else if (o.DE === 30 && o.ME === 9 && o.TE === 24) {
      o.ME = o.ME + 1;
      o.DE = 1;
      o.TE = o.TE - 24;
    } else if (o.DE === 30 && o.ME === 12 && o.TE === 24) {
      o.ME = o.ME + 1;
      o.DE = 1;
      o.TE = o.TE - 24;
    } else if (o.TE > 24) {
      o.TE = o.TE - 24;
      o.DE = o.DE + 1;
    }
    url = "http://nmq.ou.edu/cgi-bin/tools_QPE.cgi?1+0+2+" + o.YE + "+" + o.ME + "+" + o.DE + "+" + o.TE + "+0+0+34.50+-114.00+32.50+800+632+4101+0+0+1+0+Q2RAD_HSR+Q2RAD_HSR_GC+" + o.TS + "+english+none+CNTY";
    window.open(url);
  }
  listen('click', btn, function() {
    var selectElems = form.getElementsByTagName('select'),
        i = 0;
    get_qpe(selectElems);
  });
});

这是您可以参考的jsFiddle 。

html - 获取多个变量到一个 URL 地址

1 回答 1

Related

Reference