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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

onclick="change field values" not showing until I click on page - Why? 2

Status
Not open for further replies.
josel

josel

Programmer
Oct 16, 2001
716
US
I have a script:

Code: 
<script language="JavaScript" type="text/javascript">
	function SetAddress1() {
		document.getElementById('attAddr1').value=document.getElementById('hideAddr1Address').value;
		document.getElementById('attCity').value=document.getElementById('hideAddr1City').value;
		document.getElementById('attState').value=document.getElementById('hideAddr1State').value;
		document.getElementById('attZip').value=document.getElementById('hideAddr1Zip').value;
	}
</script>
[/code'

I also have a radio input
[code]
<input onchange="SetAddress1()" type="radio" name="attseladdr" value="SelAddr1" />

I click on radio and nothing seems to happen. But when I click on any field after selecting radio, all fields' values are shown.

What must I do to make sure these values are shown as they are changed?

Regards,


Jose Lerebours


KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours
 
Sort by date Sort by votes
onclick works with IE but not with FireFox.

onchange does not work with either one of them.

How do you guys keep up? I am about to pull my hair and I've just started to take this web development seriously.

Is my posted syntax browser dependent?
Code: 
<script language="JavaScript" type="text/javascript">
    function SetAddress1() {
        document.getElementById('attAddr1').value=document.getElementById('hideAddr1Address').value;
        document.getElementById('attCity').value=document.getElementById('hideAddr1City').value;
        document.getElementById('attState').value=document.getElementById('hideAddr1State').value;
        document.getElementById('attZip').value=document.getElementById('hideAddr1Zip').value;
    }
</script>
[/code'

I also have a radio input
[code]
<input onclick="SetAddress1()" type="radio" name="attseladdr" value="SelAddr1" />

Thank you!

KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours
 
Upvote 0 Downvote
Using your code, I have created two very simple test pages. Each one works fine - you click the radio button and it populates the fields. They both use different mechanisms to access the field values.

This test page uses ids to access each form element. Notice that the form elements don't have name attributes - only id attributes. You could add name attributes with the same values as the id attributes - no problem.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
	<meta http-equiv="content-language" content="en">
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>Test 1</title>
	<script type="text/javascript">
		function SetAddress1() {
			document.getElementById('attAddr1').value=document.getElementById('hideAddr1Address').value;
			document.getElementById('attCity').value=document.getElementById('hideAddr1City').value;
			document.getElementById('attState').value=document.getElementById('hideAddr1State').value;
			document.getElementById('attZip').value=document.getElementById('hideAddr1Zip').value;
		}
	</script>
</head>
<body>
	<form action="post" onsubmit="return false">
		<fieldset>
			<legend>Click the radio button to fill in the details</legend>
			<input type="hidden" id="hideAddr1Address" value="Hidden Address"/>
			<input type="hidden" id="hideAddr1City" value="Hidden City"/>
			<input type="hidden" id="hideAddr1State" value="Hidden State"/>
			<input type="hidden" id="hideAddr1Zip" value="Hidden Zip"/>
	
			attAddr1: <input type="text" id="attAddr1" size="30" value=""/><br />
			attCity: <input type="text" id="attCity" size="30" value=""/><br />
			attState: <input type="text" id="attState" size="30" value=""/><br />
			attZip: <input type="text" id="attZip" size="30" value=""/><br />
			
			attseladdr:<input onclick="SetAddress1()" type="radio" name="attseladdr" value="SelAddr1" />
		</fieldset>
	</form>
</body>
</html>
The second test page gives the form an id and then bases all access to the fields on that form object. It's a little more re-usable and certainly a little less verbose.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
	<meta http-equiv="content-language" content="en">
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>Test 2</title>
	<script type="text/javascript">
		function SetAddress1() {
			var l_oForm = document.getElementById('addressForm');

			l_oForm['attAddr1'].value = l_oForm['hideAddr1Address'].value;
			l_oForm['attCity'].value = l_oForm['hideAddr1City'].value;
			l_oForm['attState'].value = l_oForm['hideAddr1State'].value;
			l_oForm['attZip'].value = l_oForm['hideAddr1Zip'].value;
		}
	</script>
</head>
<body>
	<form action="post" onsubmit="return false" id="addressForm">
		<fieldset>
			<legend>Click the radio button to fill in the details</legend>
			<input type="hidden" name="hideAddr1Address" value="Hidden Address"/>
			<input type="hidden" name="hideAddr1City" value="Hidden City"/>
			<input type="hidden" name="hideAddr1State" value="Hidden State"/>
			<input type="hidden" name="hideAddr1Zip" value="Hidden Zip"/>
	
			attAddr1: <input type="text" name="attAddr1" size="30" value=""/><br />
			attCity: <input type="text" name="attCity" size="30" value=""/><br />
			attState: <input type="text" name="attState" size="30" value=""/><br />
			attZip: <input type="text" name="attZip" size="30" value=""/><br />
			
			attseladdr:<input onclick="SetAddress1()" type="radio" name="attseladdr" value="SelAddr1" />
		</fieldset>
	</form>
</body>
</html>
Give the pages a quick test run... then modify away. Don't get too frustrated, we all started this way... you will never forget this if you learn it the "hard" way [smile]

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
It turns out that my problem was not the script but the fact that I was NOT matching variables' conventions - upper case vs lowercase or up/low combination.

Coming from a *nix environment I can really deal with that. It also teaches me to pay attention to basics.

Thank you so much for taking the time to assist me with this.

Regards,


Jose Lerebours

KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
175
gmmastros
gmmastros
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
732
Kennelbloke
Kennelbloke
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
577
coldbohemia
coldbohemia
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
199
gmmastros
gmmastros
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
572
rogerte
rogerte

Part and Inventory Search

Sponsor

Back
Top