HTML 将文本输入与链接连接起来答案

【问题标题】：HTML concatenating text input with linkHTML 将文本输入与链接连接起来
【发布时间】：2014-03-06 11:13:36
【问题描述】：

我有以下代码：

<form>
Comments: <input type="text" name="Scomments"><br>
</form> 
<a href='http://translate.google.com/#en/nl/' + Scomments  target="_blank">Translate your comment and verify it</a>

我正在尝试将在“SCOMMENTS”文本输入中输入的文本添加到谷歌翻译链接并在新选项卡中打开谷歌翻译。目前我无法引用在 tle 链接中输入的文本。

如何连接这些值？

P.S.：这是我的第一个 HTML 代码，所以我知道这是一个非常基本的问题。

提前致谢，

【问题讨论】：

纯 HTML 无法做到这一点，需要使用 JavaScript。

标签： html google-translate

【解决方案1】：

您将需要一些 javascript - 这是一个小提琴：http://jsfiddle.net/QGS5w/

基本上，您需要在页面的head 部分添加类似以下内容：

function clickyClick() {
    url = 'http://translate.google.com/#en/nl/' + document.getElementById("comment").value
    window.open(url, '_blank');
}

然后，为简单起见，也许将链接更改为按钮：

<form>Comments:
<input type="text" name="comments" id="comment">
<br>
</form>
<button onclick="clickyClick()">Translate and verify</button>

一个简单的完整页面可能如下所示：

<html>
<head>
    <script type='text/javascript'>
        function clickyClick() {
            url = 'http://translate.google.com/#en/nl/' + document.getElementById("comment").value
            window.open(url, '_blank');
        }
</script>
</head>
<body>
  <form>Comments:
    <input type="text" name="comments" id="comment">
  </form>
  <br>
  <button onclick="clickyClick()">Translate and verify</button>

</body>

【讨论】：

【解决方案2】：

您可以使用 Javascript 获取 Comments 部分的值并将其发送给 Google：

<script>
function test(){
  var yourvar= document.getElementById('comments').value;
  window.open('http://translate.google.com/#en/nl/'+yourvar, "_blank");
}
</script>

还有 HTML：

<form>
  Comments: <input type="text" name="Scomments" id="comments"><br>    
</form>     
<button onclick="test()">Translate</button>

代码有点粗糙，但你可以编辑它。

【讨论】：

作为他使用的target="_blank"，实际上应该是window.open而不是window.location
我还认为，正如 OP 所说的那样，他非常基础，值得将它放在 <script> 标记中，这样就很明显了。