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

Question

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

Justin · Accepted Answer · 2017-09-26 14:37:50Z

1

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>

answered Sep 26, 2017 at 14:37

Justin

644 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RandomDNA Over a year ago

Thank you :) Just what i wanted.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related