尝试使用表单条目来设置用于创建自定义URL的变量

时间:2013-11-27 17:24:48

标签: javascript html url variables concatenation

我正在内部开展一个项目,这在编码方面比较重要。在我为员工构建网站资源时,我一直在自学,作为大型项目的概念证明,我几乎没有使用JavaScript的经验。

我试图让人们使用表单输入/选择变量vara,varb和varc的值。输入该信息后,我希望他们能够查看我允许他们过滤的项目列表,当他们找到他们想要的项目时,他们会点击一个按钮,该按钮将查询字符串中的变量组合在一起他们之间有一些额外的文字,然后去那个网站。

带有查询字符串的URL需要如下所示:

http://www.websiteurl.com/website.aspx?T=12345&J=8&p=vara&d=varb%20varc

到目前为止我有这个,但我对组合信息感到很困惑。我发现的难点是,该人可能从列表中选择的每个项目将具有不同的T =#值。

<script>
      var vara = document.getElementById("PPL");
      var varb = document.getElementById("DT");
      var varc = document.getElementById("TM");

</script>

这是我在页面正文中设置的HTML表单:

<FORM onkeypress="return event.keyCode != 13;">
<Select TYPE="TEXT" NAME="PPL">
    <option value="1">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>
</Select>
<INPUT id="DT" TYPE="TEXT">
<SELECT id="TM" TYPE="TEXT">
    <option selected="selected" value="8:00 PM">8:00 PM</option>
    <option value="8:30 PM">8:30 PM</option>
    <option value="9:00 PM">9:00 PM</option>
    <option value="9:30 PM">9:30 PM</option>
    <option value="10:00 PM">10:00 PM</option>
</Select>
</FORM>

在表单下方,我有一个项目表,每个项目需要有一个链接到图形的链接,当他们点击它时将采用特定于该项目的URL的第一部分,并将其与上面列出的格式的变量,然后在新选项卡中打开新网页。我已经看到一些关于连接变量的帖子来创建一个URL,但我还没能完全弄明白,而且他们似乎都在脚本中创建了URL作为函数。

编辑:我找到了一个打开页面的链接,似乎正确地将元素串在一起,但我可以在目标网址中看到我为我尝试过的变量获取了空值用表格定义。

<a href="#" onclick="window.open('http://www.websiteurl.com/website.aspx?T=12345&J=8&p='+vara+'&d='+varb+'%20'+varc);return false;">

编辑(2013年11月28日):我尝试稍微更改代码方法并使用下面的函数,使用下面的HTML行来调用它。它可以在我引用的网站上拉出正确的页面,并且我传递给该函数的数字正常工作,但其他变量仍然显示为&#34; undefined&#34;在完成的网址中。

    function OTCheck(IDnum)
{
u = 'http://www.website.com/websites.aspx?T='+IDnum+'&J=8&p='+vara+'&d='+var+'%20'+varc
return u
}

我链接的项目在表格中(因此是标签):

<td><a href="javascript:location.href=OTCheck('21790')">Link</a></td>

1 个答案:

答案 0 :(得分:0)

document.getElementById()只获取元素,而不是其中的值。修正:

  var vara = document.getElementById("PPL").value;
  var varb = document.getElementById("DT").value;
  var varc = document.getElementById("TM").value;

  document.getElementById("link").onclick = function() {
    window.open('http://www.websiteurl.com/website.aspx?T=12345&J=8&p='+vara+'&d='+varb+'%20'+varc);
    return false;
  }

然后将您的html更改为:

<form onkeypress="return event.keyCode != 13;">
<select id="PPL">
 <option value="1">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>
</select>
 <input id="DT" type="text" />
 <select id="TM" type="text">
 <option selected="selected" value="8:00 PM">8:00 PM</option>
 <option value="8:30 PM">8:30 PM</option>
 <option value="9:00 PM">9:00 PM</option>
 <option value="9:30 PM">9:30 PM</option>
 <option value="10:00 PM">10:00 PM</option>
</select>
</form>

 <a href="#" id="link">This is link</a>

现在应该可以了。