在超链接中添加文本输入

Question

我正在尝试实现一个功能，用户可以在输入框中输入文本，点击提交后，将跳转到一个包含他们提交的文本的网页。

例如，如果用户在文本框中输入了单词“apple”并点击了提交，他们将被带到http://example.com/link.aspx?username=apple&jump=1的网页，或者如果他们输入了单词“orange”，他们将被带到http://example.com/link.aspx?username=orange&jump=1的网页。

我尝试了以下代码，但没有成功——它不会在提交时将用户发送到任何地方。

<form method="get">
<input type="text" value="11" id="input"> 
<button type="button" id="button">Click Me!</button>
</form>

<script>
$(document).ready(function(){

    $('#button').click(function(e) {  
        var inputvalue = $("#input").val();
        window.location.replace(" http://www.example.com/page/"+inputvalue);

    });
});
</script>

- Barbra. Higgins

---

我已经编辑了帖子并包含了我尝试过但无济于事的代码。 - Barbra. Higgins

一个常规的表单（不包含jQuery），一个提交按钮和一个名为“username”的文本字段，使用GET方法就可以完成这个任务。 - j08691

Answer 1

为什么你要使用JQuery，而不是用PHP更容易实现呢？

表单

<form action="form.php" method="get">
    <input type="text" name="n" />
    <input type="submit" />
</form>

PHP端 - form.php

header("Location: http://yourdomain/page/".$_GET['n']);

- Ganga

---

因为这样你需要一个后端和前端，还需要更多的网页。 - Nebula

没错，但是另一方面，使用js需要输入脚本 - 这根本不是好的解决方案。在我看来，更快、更简单、更安全的方法是使用php。 - Ganga

此外，我们并没有在输入上使用 eval。 - Nebula

Answer 2

你的代码对我起作用。

你确定在你的脚本之前添加了jQuery吗？

加入这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

- Yaron Yosef

Answer 3

不要使用jQuery。一个简单的带有GET方法的表单就可以很好地工作。

<form name="sample" method="get">
      <input name="username" type="text" value=""/>
      <input name="submit" type="submit" value="submit"/>
</form>

这将自动以您所期望的格式提交表单，一旦用户填写字段并点击提交按钮。

- Tej