javascript - 表单输入作为url参数并在网页上输出新的url

Question

我希望用户在数据库中搜索基因名，如果找到则将其返回到网页。但我还想通过在网页上创建一个链接来提供有关该特定基因的信息，并将该基因作为 url 参数的输入。

输入示例:abi2

<p>Search Gene:</p>
    <form name = "form1" method="post" action="javascript:jsonfunction();">
        <input name="search" type="text" id="search" size="40" maxlength="50"/>
        <input type="submit" name="Submit" value="Search"/>
    </form>

未包含其余代码。现在，这就是我想要在网页上获得的内容:

基因信息: Genecards

(<'a href="http://www.genecards.org/cgi-bin/carddisp.pl?gene=abi2">基因卡)添加 ' 以显示代码。

到目前为止，我已经在堆栈上的某个地方找到了这个......:

<script>
function process()
{
var url="http://www.genecards.org/cgi-bin/carddisp.pl?gene=" + document.getElementById("url").value;
location.href=url;
return false;
}
</script>

<form onSubmit="return process();">
URL: <input type="text" name="url" id="url"> <input type="submit" value="go">
</form>

但这会自动重定向到新页面。我只想将其作为我页面上的链接。

提前致谢:)

Answer 1

我想你想要的是这样的。基本上，这只是一个带有 id 的空 anchor 标记，以便您可以访问它，当他们提交表单时，它将使用该数据来创建您指定的链接。 (您也可以从无到有构建链接，但这会更容易)

<script>
function process()
{
var url="http://www.genecards.org/cgi-bin/carddisp.pl?gene=" + document.getElementById("url").value;
var link = document.getElementById("geneLink");
link.href = url;
link.text = "Genecards"
return false;
}
</script>

<form onSubmit="return process();">
URL: <input type="text" name="url" id="url"> <input type="submit" value="go">
</form>
<a id="geneLink" href=""></a>