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!

target all fields in form 1

Status
Not open for further replies.
dkemas

dkemas

Programmer
Mar 22, 2012
70
GB
I have written a little script that enables the submit button when the user changes the data in a form. There are lots of fields over lots of pages, is there a way in javascript to target every form element so I don't have to put onchange='enableSubmit()' onto every field?

Here's what I have

Code: 
<!DOCTYPE html>
<html xmlns='[URL unfurl="true"]http://www.w3.org/1999/xhtml'[/URL] xml:lang='en'>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<title>Colour submit button</title>
<style>
.grey {background-color: grey}
.blue {background-color: blue}
</style>
<script type='text/javascript'>
function enableSubmit() {
	//document.getElementById("submitButton").setAttribute("class", "blue");
	document.getElementById('submitButton').disabled="";
}
</script>
</head>
<body>

<form action=''>
<input type='text' name='foo' onchange='enableSubmit()' />
<select name='footwo' onchange='enableSubmit()'>
<option>Something</option>
<option>Something</option>
</select>
<input type='submit' id='submitButton' disabled='disabled' />
</form>

</body>
</html>
 
Sort by date Sort by votes
Hi

dkemas said:
is there a way in javascript to target every form element so I don't have to put onchange='enableSubmit()' onto every field?
Click to expand...
No. You have to set in to every element. However is not necessary to set it "manually". You can automate it :
JavaScript: 
window[teal].[/teal]onload[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]document[teal].[/teal]forms[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal]
    [b]for[/b] [teal]([/teal][b]var[/b] j[teal]=[/teal][purple]0[/purple][teal],[/teal]l2[teal]=[/teal]document[teal].[/teal]forms[teal][[/teal]i[teal]].[/teal]elements[teal].[/teal]length[teal];[/teal]j[teal]<[/teal]l2[teal];[/teal]j[teal]++)[/teal]
      document[teal].[/teal]forms[teal][[/teal]i[teal]].[/teal]elements[teal][[/teal]j[teal]].[/teal]onchange[teal]=[/teal]enableSubmit
[teal]}[/teal]

Of course, this could be written less verbosely with the help of a JavaScript framework.

Feherke.
[link feherke.github.com/][/url]
 
Upvote 0 Downvote
That works for me thank you. I am using jquery on the pages so will look for something to help now that I have a basis to work from.
 
Upvote 0 Downvote
Hi

Code: 
$[teal]([/teal]document[teal]).[/teal][COLOR=darkgoldenrod]ready[/color][teal]([/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
  $[teal]([/teal][green][i]'input,select,textarea'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]on[/color][teal]([/teal][green][i]'change'[/i][/green][teal],[/teal]enableSubmit[teal])[/teal]
[teal]}[/teal][teal])[/teal]

Feherke.
[link feherke.github.com/][/url]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
347
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
390
xwb
xwb
markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
138
feherke
feherke
CrxC01
  • Locked
  • Question
Sum of All Primes
Replies
0
Views
89
CrxC01
CrxC01
CrxC01
  • Locked
  • Question
Sum of all primes numbers
Replies
6
Views
158
CrxC01
CrxC01

Part and Inventory Search

Sponsor

Back
Top