Javascript 打开 URL + 用户输入的文本

Javascript to open a URL + the text input by user

提问by Kareen Lagasca

Is this possible?

这可能吗？

I have input box and a submit button.

我有输入框和提交按钮。

1. The user will input their "reference number" (example: "hello123")
2. user will click the submit button.
3. after clicking the submit button, the javascript will open url link in a New browser Tab with a url link (which i assigned) plus the input of the user (which is hello123)

1. 用户将输入他们的“参考编号”（例如：“hello123”）
2. 用户将单击提交按钮。
3. 单击提交按钮后，javascript 将在新浏览器选项卡中打开 url 链接，其中包含一个 url 链接（我分配的）加上用户的输入（即 hello123）

Assigned url is: www.mywebsite.com/ after clicking the submit button, the url to open by javascript is: www.mywebsite.com/print/hello123/

分配的url为：www.mywebsite.com/ 点击提交按钮后，javascript打开的url为：www.mywebsite.com/print/hello123/

回答by d.yuk

Check the demo: http://jsfiddle.net/Gv5bq/

检查演示：http: //jsfiddle.net/Gv5bq/

HTML:

HTML：

<input type="text" id="text" />
<input type="button" id="btn" value="Submit" />

jQuery:

jQuery：

$("#btn").click( function() {
    var url = "http://www.mywebsite.com/print/" + $("#text").val();
    window.open(url);
});

UPDATED: (simple JS version)http://jsfiddle.net/Gv5bq/1/

更新：（简单的 JS 版本）http://jsfiddle.net/Gv5bq/1/

<input type="text" id="text" />
<input type="button" id="btn" value="Submit" onClick="javascript: window.open('http://www.mywebsite.com/print/' + document.getElementById('text').value);" />

回答by nils

If you do not want to use jQuery for that here is an approach in pure js.

如果您不想为此使用 jQuery，这里是纯 js 中的一种方法。

Define your html-form:

定义你的 html 表单：

<form action="http://www.mywebsite.com/" method="get" target="_blank" id="my-form">
  <input type="text" name="reference-number" id="reference-number" value="" />
  <input type="submit" value="submit" />
</form>

Define and attach the handler for submission:

定义并附加用于提交的处理程序：

<script type="text/javascript">
  var form       = document.querySelector('#my-form'),
      text_field = document.querySelector('#reference-number');

  function submitHandler(){
    // build the new url and open a new window
    var url = form.action + 'print/' + text_field.value;
    window.open(url);

    // prevent form from being submitted because we already 
    // called the request in a new window
    return false;
  }

  // attach custom submit handler
  form.onsubmit = submitHandler;
</script>

回答by Shijin TR

<input type="text" value="" id="id"/>
<button type="button" id="go">GO</button>



   $('#go').click(function(){
     var id=$('#id').val();
     var url="http://www.mywebsite.com/hello";
     var new_url=  url+id;
     window.open(new_url);
  });

Fiddle

小提琴