Page 1 of 1
Populate form field using a link
Posted: Mon Dec 03, 2007 2:48 pm
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
Posted: Mon Dec 03, 2007 2:55 pm
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)
Posted: Mon Dec 03, 2007 3:21 pm
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.
Posted: Tue Dec 04, 2007 12:58 am
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:" should be read as "javascript:"
Posted: Wed Dec 05, 2007 4:43 pm
by QbertsBrother
awesome!
worked great
thank you very much VladSun
Posted: Thu Dec 06, 2007 11:50 am
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">
Posted: Thu Dec 06, 2007 11:55 am
by VladSun
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
Posted: Thu Dec 06, 2007 12:08 pm
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!
Posted: Thu Dec 06, 2007 12:31 pm
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 ...