Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

onclick not working in anchor tag to autofill an input box

Status
Not open for further replies.
prat824

prat824

Technical User
Apr 6, 2010
4
0
0
US
I am trying to autofill a box by clicking a link (with return false). The function to autofill works with button tag but not in anchor tag - instead of returning false, the click event transitions to the href.

Here is the simplified code. Any help is appreciated.Thanks

<!DOCTYPE html PUBLIC"-// W3C//DTD Xhtml 1.0 Strict//EN"" <html xmlns=" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Untitled Page
</title>
</head>

<script type="text/javascript">
function autofill(frm){
frm.box2.value = 'sample_value';

}
</script>
<body>
<FORM NAME="browse" ACTION="<TMPL_VAR MYURL>/browse_results">
<font size="5">
<b>FIND
</b>
</font>
<hr>
<div class="menu" id="find_block">
<ul>
<li>
<a href="#">DOMAINS
</a>
<ul>
<li>

<a href="#1" onclick="alert('Heading Home!'); return false;">1. alert with link :)
</a>
</li>
<li>
<a href="#2" onClick="autofill2(this.form); return false;">2. autofill with link :(

</a>
</li>
</ul>
</li>
</ul>
<input readOnly name="box2"/>
<INPUT TYPE=BUTTON OnClick="autofill(this.form,'2')" VALUE="autofill with button :)">
</div>
<br>
<font size="5">
<b>WHERE
</b>
</font>
<hr>
</FORM>
</body>
</html>
 
Sort by date Sort by votes
Hi

[ul]
[li]In XHTML tag and attribute names must be written in lowercase.[/li]
[li]In XHTML Strict there [tt]font[/tt] tag is deprecated.[/li]
[li]In XHTML empty tags must be terminated with a trailing slash.[/li]
[li]The HTMLAnchorElement object has no form property.[/li]
[/ul]
So refer to the [tt]form[/tt] in a different way : by [tt]id[/tt], by [tt]name[/tt], through the [tt]document.forms[/tt] array, with XPath.


Feherke.
 
Upvote 0 Downvote
Autofill2 is not defined anywhere, so you can't call it.
Code: 
<a href="#2" onClick="autofill2(this.form); return false;">2. autofill with link :(

As Feherke points out links don't have a form property, because they are not form elements.

You can either pass the form's ID or just access the form directly instead.

Code: 
function autofill2(frm){        
        [red]document.forms.[/red][blue]browse[/blue].box2.value = 'sample_value';
        
    }


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Thanks Vacunita, feherke

I got it working for hardcoded "box2" in the function, but when I pass box id as a parameter to the function, it gives me an error
-----
document.forms.browse.box is undefined document.forms.browse.box.value = value;
-----


Here is my new simplified code..

<!DOCTYPE html PUBLIC"-// W3C//DTD Xhtml 1.0 Strict//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Untitled Page
</title>
</head>

<script type="text/javascript">
function autofill(value,boxid){
var box = document.forms.browse.boxid;

/*This works!*/
/*document.forms.browse.box2.value = value; */

/*This doesn't*/
document.forms.browse.box.value = value;
}
</script>

<body>
<form name="browse" action="<TMPL_VAR MYURL>/browse_results" >
<a href="#1" onclick="alert('Heading Home!'); return false;">1. alert with link :)
</a>
<br>
<a href="#2" onclick="autofill('value1','box2'); return false;">2. autofill with link :(
</a>
<br>
<input type=button onclick="autofill('value2','box2')" VALUE="autofill with button :)">
<br>
<input readonly name="box2" id="box2"/>
</form>
</body>

</html>
 
Upvote 0 Downvote
oh - and I also realized my mistake in the1st line in the function
var box = document.forms.browse.boxid;

and changed it to

var box = document.getElementById(boxid);


Any help is appreciated

Thanks
 
Upvote 0 Downvote
Aah..

I got it.

changed last line in the function from

document.forms.browse.box.value = value;

to

box.value = value;

(this is practically my 2nd day with js - so please excuse the naivete)

Thanks
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
183
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
136
Rayj0000
Rayj0000
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
182
Kennelbloke
Kennelbloke
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
66
chikwendu
chikwendu
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
155
lexer
lexer

Part and Inventory Search

Sponsor

Back
Top