通过输入字段将页面追加到域名

Question

I am trying to create an input field that will allow users to input a text string that once submitted is appended to a domain name, taking the user to a page. 我正在尝试创建一个输入字段，该字段将允许用户输入一个文本字符串，一旦提交，该字符串将附加到域名后，将用户带到页面。

The process is as follows: 流程如下：

User inputs 'foo' into an input box. 用户在输入框中输入“ foo”。 Once submit is clicked, 'foo' is prefixed by http://example.com/ and (ideally) suffixed by .html (or .php) and the browser resolves to that address, ie http://example.com/foo.html . 单击提交后，“ foo”以http://example.com/为前缀，（理想情况下）以.html（或.php）为后缀，浏览器将解析为该地址，即http://example.com/foo .html 。

Is this possible? 这可能吗？ My form kung foo is (clearly) not very strong, so any help would be appreciated. 我的kung foo形式（显然）不是很强，所以任何帮助将不胜感激。 With help from other Stack users I've got this far: 在其他Stack用户的帮助下，我到现在为止：

<html> 
<head> 
</head> 
<body> 

<form id="inputbox"> <input type="text" id="addition"> <input type="submit" value="Trigger"/></form> 

<script> 
var yourForm = document.getElementById("inputbox"); 
yourForm.onsubmit = function() { 
var URLtext = document.getElementById("addition").value; 
window.location = window.location.href + URLtext; // this is for your current URL 
} 
</script> 
</body> 
</html>

Answer 1

Better not to use the form in general, since it will try to submit itself when the submit input is clicked. 最好不要使用一般的表单，因为单击提交输入后，它将尝试提交自己。 Instead, just use the two input elements and manually bind the click event to the submit input. 相反，只需使用两个输入元素，然后将click事件手动绑定到提交输入即可。

<input type="text" id="addition">
<input type="submit" id='submit' value="Trigger"/>

<script>
document.getElementById('submit').addEventListener('click', function() {
    var input = document.getElementById('addition'),
        text = input.value;
    // You can further edit the input text here, (i.e. append ".html", etc)
    window.location = window.location.origin + '/' + text;

});
</script>

通过输入字段将页面追加到域名

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-12-16 01:29:21

通过输入字段将页面追加到域名

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-12-16 01:29:21

解决方案1
0 已采纳 2014-12-16 01:29:21