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

catch onchange in a form 1

Status
Not open for further replies.
ThorO

ThorO

Programmer
Sep 28, 2002
20
NO
Hi Guys

I am going to develop many forms in IE and have been looking for a way to trigger if ANY field in the form has been changed (so I can ask for a 'save' during unload.)

It does not look like IE works for onchange in the form element for e.g. a radio, so does anybody have an alternative way of solving this? Hopefully which could work without having to take attention on each field during the user input.

Thanks
ThorO
 
Sort by date Sort by votes
Jeff,

i think he is trying to call the onchange event of the form itself, not an input element.

as we all know, this is not possible.



*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
Sorry guys, I was not explaining correctly, because onchange does not work on the form itself. What I did was to use onkeydown, which work and I could live with, except radio/checkboxes would normally be choosen by mouseclick, so I gave up that too.

I have also been thinking of a loop on 'onload' to set up all values for all controls and then validate them on 'onunload'. I could then develop a script to use on all pages. Can anybody please give me some hints (or more:)..)on how this loop would look like???

Thanks in advance
Thor
 
Upvote 0 Downvote
Code: 
<script type="text/javascript">
var formHasChanged = false;
window.onload = loopThroughFormElements;

function loopThroughFormElements;
  form = document.getElementById('foo');
  elements = form.elements;

  for (i=0;i<elements.length;i++);
    elements[i].onchange = function() {
      var formHasChanged = true;
    }
  }
}
</script>
Questions?

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
Upvote 0 Downvote
wow....that was a quick response...Hardly had time to log out:)

Thanks Marcus, I will give it a shoot tomorrow (past midnight here now), and let you know what happes

Thor
 
Upvote 0 Downvote
I've tried to get this script to work today, but there is something I've done wrong. I'll get an error on the following line:
elements.onchange = function() {

saying elemts[...] is zero or not an object.

I am not sure about the 'foo' either or if I need ID for all input fields?

My simple test looks like this:

Code: 
<html>
<head>
<script type="text/javascript">
function loopThroughFormElements() {;
  var formHasChanged = false;

  form = document.getElementById('foo');
  elements = form.elements;

  for (i=0;i<elements.length;i++);
    elements[i].onchange = function() {
      var formHasChanged = true;
    }
  }
</script>
</head>
<body onload=loopThroughFormElements()> 
<form name=form1 method="post" action="send.htm" id=foo>
Do you like to cahnge the text?<input type=text value=start name=TEST id=2>
<p>Is it weekend soon?<input type="checkbox" name="C1" value="ON" id=3></p>
</form>
<p><input type="submit" value="Send" name="B1"></p>
</form>
</body>
</html>

Can you help me a step further?

Thanks in advance
Thor
 
Upvote 0 Downvote
Hi Thor,

My fault - I included a couple of errors...this works:
Code: 
<html>
<head>

[COLOR=purple]
<script type="text/javascript">
var formHasChanged = false;

function loopThroughFormElements() {;

	form = document.getElementById('foo');
	elements = form.elements;

	for (i=0;i<elements.length;i++) {
		elements[i].onchange = function() {
			formHasChanged = true;
		}
	}
}
</script>
[/color]
</head>

<body onload=loopThroughFormElements()>
	<form name="form1" method="post" action="#" id=foo onsubmit="alert('Has form changed? ' + formHasChanged);">
		Do you like to change the text?
		<input type=text value=start name=TEST id=2>
		
		<p>Is it weekend soon?<input type="checkbox" name="C1" value="ON" id=3></p>
		<p><input type="submit" value="Send" name="B1"></p>
	</form>
</body>
</html>

first of all - as per my original code - I've put the original declaration for the formHasChanged variable outside the function (it's a global variable, not a local function variable).

Starting on my errors, I've changed the for statement:
Code: 
  for (i=0;i<elements.length;i++)[COLOR=red];[/color]
  [COLOR=green]// should be [/color]
  for (i=0;i<elements.length;i++) [COLOR=red]{[/color]

Secondly, I removed the keyword var from within the function call (it needs to reference the global variable, not a local variable).
Code: 
		elements[i].onchange = function() {
			[COLOR=red][s]var[/s][/color] formHasChanged = true;
		}

Lastly, there's a third closing brace (which matches the opening brace I replaced adjacent to the for statement).


The 'foo' is strictly for the form's ID - it's not relevant to any of the elements. It's simply a way to address the document's form object.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
Upvote 0 Downvote
Hi Marcus

THANKS A LOT :)

This was really an early christmas present... I did also figure out how to find the name (e.g.
Code: 
if(elements[i].name == "VF");
, which give me the option to not set the onchange in specific cases, which I also need.

Have a great Christmas and you really earned this (Christmas) star

Thanks
Thor
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
901
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
805
malpa
malpa
TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
391
gmmastros
gmmastros
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top