Question

我想创建一个带有文本字段的表单，用户可以在其中输入内容，然后需要将其合并到用户将被重定向到的外部网站的链接中。

所以让我们说用户输入'foobar'。点击提交后，他应该被带到http://example.com/foobar。

这应该最好是在JS中，尽管PHP也可以。

到目前为止，我有这个：

<html>
<head>
<script type="text/javascript">

function genURL() {
var user = document.getElementById('user');
window.location.href = "http://example.com/" + user;
}

</script>
</head>
<body>

<form>
username: <input type="text" name="user">
<input type="submit" value="Submit" name="user" onClick="genURL()">
</form>

</body>
</html>

这样做的唯一方法是将“user = foobar”附加到URL。

我需要做些什么来完成这项工作？

Answer 1

您应该阻止提交表单。您可以通过将您的函数设置为表单的onsubmit处理程序并返回false来阻止表单提交来执行此操作。

此外，您应该使用.value中的document.getElementById('').value来获取字段的内容。

<强> JavaScript的：

function genURL() {
    var user = document.getElementById("user").value;
    window.location = "http://google.com/" + user;
}

<强> HTML：

<form onsubmit="genURL(); return false;">
    <input type="text" id="user" />
    <input type="submit" value="Submit" />
</form>

演示： http://jsfiddle.net/jhogervorst/CFHtG/

Answer 2

您需要用户元素的值。

var user = document.getElementById('user').value;

Answer 3

请尝试以下操作：

function genURL() {
    var user = document.getElementById('user');
    window.location.href = "http://thisisnotarealurl.com/" + user.value;
}

Answer 4

将表单的操作设置为要调用的URL和表单的GET方法会不会更容易？

然后你会：

<html>
    <body>
        <form action="http://example.com" method="GET">
            username: <input type="text" name="user">
            <input type="submit" value="Submit" name="user">
        </form>
    </body>
</html>

不需要JavaScript：）

Answer 5

function genURL() {
    var user = document.getElementById('user');
    window.location.href = document.URL + user.value;
}

将表单数据合并到URL中

5 个答案: