Dynamic links with JavaScript

Question

this is my problem.I have a JSP. I want to create a hyperlink dynamically with Javascript. I want to add the text from an input in HTML and use it to pass it as a parameter in my URL:

<form name="test">
<P>Enter search: <input type="text" name="searchName"><BR><BR>
<input type="Button" Value="" onclick="location.href='search.jsp?typeOfSearch=" + JavaScriptFunction( that returns the String from searchName ) ' " >
</P>
</FORM>

I cant seem to add a JS function to the "onclick" string. I ve tried with HREF from an anchor but I cant make it work. And I ve also tried just putting a JS function like this:

<a href="MyJSfunction( that returns the entire URL ) " >  hyperlink</a>

and also it does not work. I ve tried like a million diferent things and I still cant pass dynamic parameters from one JSP to another.

Any help would be very good! ...

The double quote following typeOfSeach= closes your onclick attribute. That would need to be a single quote. You have an extra single quote after your function call which should be removed. To get the quotes right on your onclick attribute, you need: onclick="location.href='search.jsp?typeOfSearch='+SomeFunction(someParameter)" — gilly3
– gilly3, Commented Jan 31, 2014 at 19:14

gilly3 · Accepted Answer · 2014-01-31 19:18:59Z

2

No JavaScript required. Just set your form method and action, use a submit button, and rename your input field:

<form name="test" method="GET" action="search.jsp">
    <p>
        Enter search: <input type="text" name="typeOfSearch" /><br/><br/>
        <input type="Submit" Value="Go" />
    </p>
</form>

Edit: But, if you are just curious how to do it with JavaScript, form elements all have a form property. Form elements are accessible from the form by name. So, you can use this.form.searchName.value to get the value of the searchName field in the same form as your button:

<input type="Button" Value=""
    onclick="location.href='search.jsp?typeOfSearch=' + this.form.searchName.value;" />

Edit: The trouble you are having with your current code may be because you have the quotes wrong. Change the double quote at the end of typeOfSearch=" to a single quote: typeOfSearch='. Remove the single quote following your function call:

<input type="Button" value=""
    onclick="location.href='search.jsp?typeOfSearch=' + JavaScriptFunction()" />

edited Jan 31, 2014 at 19:18

answered Jan 31, 2014 at 19:01

gilly3

92.7k26 gold badges148 silver badges179 bronze badges

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

3 Comments

Carlos_Rei Over a year ago

I ve tried both ways: "this.form.searchName.value" and with JavaScript function. the first one worked , the second no. If you have any idea on why the second one doesnt work I would apreciate it. but anyway , thanks a lot. the first one does work and I was having a lot of troubles getting this done.

gilly3 Over a year ago

@user3258537 - Either of the two JavaScript ways are wonky. Use the Non-JavaScript way. If your JavaScript function isn't working, I wouldn't know why without seeing the actual function code.

Carlos_Rei Over a year ago

ok! I got it working now. I was making a mistake on my JS function... thanks again.

Harvey A. Ramer · Accepted Answer · 2014-02-01 05:52:28Z

0

If you aren't too concerned about security, a simple HTML form should work.

<form action="Your URL Here">
    <input type="text" value="" name="search" />
    <input type="submit" value="search" />
</form>

http://jsfiddle.net/harveyramer/VfuT4/

edited Feb 1, 2014 at 5:52

answered Jan 31, 2014 at 19:04

Harvey A. Ramer

7827 silver badges15 bronze badges

6 Comments

gilly3 Over a year ago

What's the security risk? Or, how would using JavaScript improve security?

Harvey A. Ramer Over a year ago

I suppose if you were concerned with security, you would use post rather than get. In that case you would add a method="post" attribute to the form.

Carlos_Rei Over a year ago

I m not really an expert on security issues, or any kind of expert for that matter... but for now I m not worried about security. Im just glad it works.

Carlos_Rei Over a year ago

oh I see. So whats the big diference between "post" and "get" ? I m kind of a newbie at this stuff...

Harvey A. Ramer Over a year ago

Post doesn't reveal the payload in the location query string. w3schools.com/tags/ref_httpmethods.asp

|

Collectives™ on Stack Overflow

Dynamic links with JavaScript

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related