HTML concatenating text input with link

问题

I've got the following code:

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

I am trying to add the text entered in "SCOMMENTS" text input to the google translate link and open Google Translate in a new Tab. At the moment I am not able to reference the text entered into tle link.

How can I concatenate these values?

P.S.: That's my very first HTML code so i know that's a very basic question.

Thanks in advance,

回答1:

You will need some javascript - here's a fiddle: http://jsfiddle.net/QGS5w/

Basically, you need to add something like the following in your head section of your page:

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

and then perhaps, for simplicity, change your link to a button:

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

A bare-bones complete page might look like this:

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

You can use Javascript to get the value of the Comments section and send it to Google:

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

And the HTML:

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

The code's a bit rough but you can edit it.

来源：https://stackoverflow.com/questions/22222770/html-concatenating-text-input-with-link

标签

html

html5

google-translate