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

时间:2017-09-26 14:25:00

标签: javascript html

我希望用户在数据库中搜索基因名称,并在找到时将其返回到网页。但我也希望通过在网页上创建一个链接来提供有关该特定基因的信息,并将该基因作为输入作为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

(&lt;&#;; href =&#34; http://www.genecards.org/cgi-bin/carddisp.pl?genic = abi2 &#34;&gt; ; Genecards ) 添加了#39;显示代码。

到目前为止,我已经在堆栈的某个地方发现了这个......:

<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>

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

提前致谢:)

1 个答案:

答案 0 :(得分:1)

我认为你想要的是这样的。基本上这只有一个带有id的空锚标记,因此您可以访问它,当它们提交表单时,它将使用该数据来创建指定的链接。 (你也可以从零开始构建链接,但这会更容易)

<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>
相关问题