Populate form field using a link

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
QbertsBrother
Forum Commoner
Posts: 58
Joined: Thu Oct 11, 2007 10:12 am

Populate form field using a link

Post by QbertsBrother »

hello all

here is what i am trying to do.

i have a form and to the right of the form i have a list of links. what i would like to have happen is when someone clicks on the link i would like it to populate some of the form fields. but i dont want it to reload the page. just pop in some values into the form.

if anyone knows how to do it or where i would start to look to find the answer that would be great.

thanks
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Post by Zoxive »

This requires JavaScript. Maybe even "Ajax" if you want it to request the data.
(If the data is different per click and can not be retrieved before the click to populate the forums)
QbertsBrother
Forum Commoner
Posts: 58
Joined: Thu Oct 11, 2007 10:12 am

Post by QbertsBrother »

lets say i have this

on one side of the page i have the form

textbox1
textbox2
textbox3
textbox4

and what not. and on the other side i have links of employee names. here is what the code looks like on my page:

Code: Select all

<a href="" onclick="what i want it to do????">Bob Johnson</a>
<a href="" onclick="what i want it to do????">Gary Jones</a>
<a href="" onclick="what i want it to do????">Sue Larson</a>
<a href="" onclick="what i want it to do????">Jenny Olson</a>
the names are coming out of a database. i have all the data and info that i want to populate the form fields with at my disposal when the page is loaded the first time. so i just want people to be able to click on the name of someone and have it pop into textbox1 or textbox2.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

Code: Select all

<script language="JavaScript">
<!--
function feedInput(input, value)
{
	document.getElementById(input).value = value;
}
//-->
</script>

 <a href="javascript: feedInput('idText1', 'a')">For 'a'</a> |
 <a href="javascript: feedInput('idText1', 'b')">For 'b'</a> |
 

<input type="text" name="name1" id="idText1">

PS: "javascript&#058;" should be read as "javascript:"
There are 10 types of people in this world, those who understand binary and those who don't
QbertsBrother
Forum Commoner
Posts: 58
Joined: Thu Oct 11, 2007 10:12 am

Post by QbertsBrother »

awesome!

worked great

thank you very much VladSun
QbertsBrother
Forum Commoner
Posts: 58
Joined: Thu Oct 11, 2007 10:12 am

Post by QbertsBrother »

is there a way to edit this so that it will populate two form fields?

i have been trying to edit it and i have had no luck. i have tried to do things like this.

Code: Select all


<script language="JavaScript">
<!--
function feedInput(input, value, input2, value2)
{
   document.getElementById(input).value = value;
   document.getElementById(input2).value2 = value2;
}
//-->
</script>

 <a href="javascript: feedInput('idText1', 'a', 'idText2', 'a2')">For 'a'</a> |
 <a href="javascript: feedInput('idText1', 'b', 'idText2', 'b2')">For 'b'</a> |
 

<input type="text" name="name1" id="idText1"> 
<input type="text" name="name2" id="idText2"> 

User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

Code: Select all

document.getElementById(input)
will return a DOM element. In case that "input" is an ID of HTML INPUT element, there would be a "value" property (not value2). ;)

Take a look at this:
http://www.w3schools.com/tags/tag_input.asp
There are 10 types of people in this world, those who understand binary and those who don't
QbertsBrother
Forum Commoner
Posts: 58
Joined: Thu Oct 11, 2007 10:12 am

Post by QbertsBrother »

i am new to this stuff so i didnt exactly understand what you said. i had to look up DOM.

so what i ended up doing was this.

Code: Select all

<a href="javascript: feedInput('idText1', 'a')" onclick="javascript: feedInput('idText2', 'a'2)">For 'a'</a> 

and when i click the link it populates 2 form fields with 2 different values. one field gets populated with "a" and the other "a2". not sure if it is the best way to do it but it works.

thanks for your help!
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

You needn't do this like this.

Take a look at your script above:

Code: Select all

document.getElementById(input2).value2 = value2;
is wrong ...
There are 10 types of people in this world, those who understand binary and those who don't
Post Reply