CODEWITHSUNDEEP
javascripthtml
RandomDNA
RandomDNA

Reputation: 35

form input as url parameter and output the new url on the webpage

I want a user to search genenames in a database and return them to the webpage if found. But I also want to give information about that specific gene by creating a link on the webpage with the gene given as input as url parameter.

input example: 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>

Rest of the code not included. Now, this is what I would like to get on the webpage:

Gene info: Genecards

(<'a href="http://www.genecards.org/cgi-bin/carddisp.pl?gene=abi2">Genecards ) added ' to show the code.

So far I've found this somewhere on stack...:

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

But this automatically redirects to the new page. I just want it as link on my page.

Thanks in advance :)

Upvotes: 0

Views: 237

Answers (1)

Justin
Justin

Reputation: 64

I think what you want is something like this. Basically this just has an empty anchor tag there with an id so you can access it and when they submit the form, it will use that data to create the link as you specify. (You can also construct the link from nothing, but this will be easier)

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

Upvotes: 1

Related Questions