Web Hosting Talk






PDA

View Full Version : Fill form by clicking text link - any ideas?

jonathanbull
04-23-2007, 09:14 AM
Hi,

I'm looking for a script that can fill a text field by clicking on a piece of text. I realise I've worded this badly, so here's an example...

<input type="text" name="textfield" value="test" />

<a href="fill text field with 'apple'">apple</a>
<a href="fill text field with 'banana'">banana</a>
<a href="fill text field with 'mango'">mango</a>


I hope this makes sense. I've spent ages searching for this kind of script and I assume Javascript is the way to go?

Thanks in advance for any help anyone can offer. :)
The Prohacker
04-23-2007, 10:36 AM
<form name="in" action="submit.php">
<input type="text" name="textfield" value="test" />
</form>

<a href="#" onclick="document.in.textfield.value='apple';return false;">apple</a>
<a href="#" onclick="document.in.textfield.value='banana';return false;">banana</a>
<a href="#" onclick="document.in.textfield.value='mango';return false;">mango</a>


You need to take note of the form name and the field names when setting the value of forms. :)
azizny
04-23-2007, 02:42 PM
<input type="text" id="textfield" value="test">

<a style="cursor:pointer;" onclick="document.getElementById('textfield').value='apple';">apple</a>
<a style="cursor:pointer;" onclick="document.getElementById('textfield').value='banana';">banana</a>
<a style="cursor:pointer;" onclick="document.getElementById('textfield').value='mango';">mango</a>


This is just the way I prefer writing onclick events, or you can use what prohacker wrote....

Peace,
gt3n
04-26-2007, 01:03 AM
Yes, very easy to do with javascript - like others have said just make use of the onClick event when coding your links.
christougher
04-30-2007, 04:04 PM
azizny and ProHacker, your solutions work except that when I click a new link, the old text is replaced with the new one.

For example: click 'apple' and it will appear in the text area. Click 'pear' and it will REPLACE apple with pear.

How would you have it add pear to apple without deleting the former?

Thanks a bunch.
orbitz
04-30-2007, 04:26 PM
you can try this:

<html>
<header>
<title>test</title>
<script type="text/javascript">
function getFruit(t){
var myVal;
myVal = document.getElementById('fruits').value;
myVal += ' '+ t;
document.getElementById('fruits').value = myVal;

}
</script>
</header>
<body>
<input type="text" id="fruits" name="fruits" value="">

<a href="#" onclick="getFruit('apple')">apple</a>
<a href="#" onclick="getFruit('banana')">banana</a>
<a href="#" onclick="getFruit('tomato')">tomato</a>
</body>
</html>
HostRefugee-Vince
05-01-2007, 02:19 AM
And yet another way (does the exact same thing as the post directly above, but separates with commas and doesn't need a function):

<input type="text" id="textfield" value="test">

<a style="cursor:pointer;" onclick="document.getElementById('textfield').value=document.getElementById('textfield').value + ', ' + 'apple';">apple</a>
<a style="cursor:pointer;" onclick="document.getElementById('textfield').value=document.getElementById('textfield').value + ', ' + 'banana';">banana</a>
<a style="cursor:pointer;" onclick="document.getElementById('textfield').value=document.getElementById('textfield').value + ', ' + 'mango';">mango</a>
orbitz
05-01-2007, 04:30 PM
it works, but to have a function is a more practical way to go to simplify the codes as well as usage of codes.

If comma needed, then change this line
from: myVal += ' '+ t;

to: myVal += ','+ t;

simply, but if you want to change anything without having the function, you have to go and edit every single line. Imagine you have 150 types of fruits, would it be easier to do it with function?
iidx036
10-28-2009, 08:51 AM
Hi everyone,

I am looking for something similar to this, however, I would like the values to be dynamically added to multiple fields.

For example - banana would go to the first text field, then clicking apple would automatically be added to another text field.

I am trying to create a simple basket where these items can be added.

Any help would be greatly appreciated.

Kind regards
mattle
10-28-2009, 12:38 PM
Or, more dynamically using jQuery (untested):


<head>
...
<script>
$(document).ready(function()
{
$("a[class=autofill]").click(function()
{
$("input[name=textfield]").val($(this).text());
return false;
});
});
</script>
</head>
<body>
<input name="textfield" type="text" />

<a href="javascript:;" class="autofill">Apple</a>
<a href="javascript:;" class="autofill">Banana</a>
<a href="javascript:;" class="autofill">Mango</a>
</body>
iidx036
10-28-2009, 06:10 PM
Thanks for the reply.

I can't seem to get this working apologies but I'm not familiar with jQuery or coding come to think of it!! :confused:

Would you mind elaborating on this for me?

Thanks for you time.
mattle
10-29-2009, 10:49 AM
Well, you need to start here:

http://docs.jquery.com/Main_Page

It won't work unless you include the jQuery library. See the "Getting Started" section of that link.

Here's the breakdown:

The $(document).ready() function fires once the DOM is loaded--basically, the same as a <BODY onLoad="fn()">, but with a little better cross-browser compatibility.

Then you assign the onClick event (via a selector: http://docs.jquery.com/Selectors) to all anchor tags with the class "autofill". That will scan the whole DOM looking for matching elements and assign the onclick() function to the function you pass as an argument. In this case, that function looks for <input> tags named "textfield" and sets the value to the text between the <a> tags from the elements it already matched.

Hope that helps,
Matt
iidx036
10-30-2009, 07:02 AM
Hi Matt,

Thanks for this it works just fine. One question though how could I add another text field if I selected another option.

For example, if I click apple that fills in the first field. If I then click mango it adds another field below that and like the first adds mango into that field?

Any pointers would be greatly appreciated.

Regards,

John