Connecting Tech Pros Worldwide Help | Site Map

enable submit when all fields are popuplated

Mel
Guest
 
Posts: n/a
#1: Jul 23 '05
i want to diable all submit_buttons untill all my form elements are
populated.

how can i do that ?
thanks


RobG
Guest
 
Posts: n/a
#2: Jul 23 '05

re: enable submit when all fields are popuplated


Mel wrote:[color=blue]
> i want to diable all submit_buttons untill all my form elements are
> populated.
>
> how can i do that ?
> thanks
>
>[/color]

Have an onload function that sets the submit button's disabled
attribute to true.

<body onload="document.forms['formA'].elements['sB'].disabled=true;">

Put an onblur or onfocus attribute on all your form elements that
calls a script to validates the form (you may want to attach this using
JavaScript when you disable the submit button to save code). When the
form passes validation, set the submit button's disabled attribute to
false.

The script below puts an onblur function on the text and textarea
elements, as well as adding an onsubmit function on the form. It
disables the submit button, and only re-enables it if the form passes
validation. The form is validated again when submitted.

Note that you should also validate at the server, do not trust that the
client-side script has actually done the job or that the user has not
subverted it.


<head>

...

<script type="text/javascript">
function initForm(f){
if ( f = document.forms[f] ) {
f.onsubmit = function() {return checkForm(this)};
} else {
return;
}
var el, els = f.elements;
for (var i=0, j=els.length; i<j; i++) {
el = els[i];
if ( 'text' == el.type ||
'TEXTAREA' == el.nodeName ){
el.onfocus = function() {checkForm(this.form)};
} else if ('submit' == el.type) {
el.disabled = true;
}
}
}

function checkForm(f){
var el, els = f.elements, i=els.length;
while (i--) {
el = els[i];

// Do vaildation on 'el'. If no good, return false
// If passes validation, allow script to continue

if ('submit' == el.type) {
el.disabled = false;
return; // Assuming there is only one submit button
}
}
}
</script>
</head
<body onload="initForm('formA');">
<form action="" name="formA">
<textarea></textarea>
<input type="text" size="10">
<input type="submit">
</form>
</body>




Realise that anyone with JavaScript disabled will be able to submit
your form anyway. If you make the submit button disabled using the
HTML source and enable it using JavaScript as suggested above, users
with JavaScript disabled will not be able to submit your form at all.




--
Rob
RobG
Guest
 
Posts: n/a
#3: Jul 23 '05

re: enable submit when all fields are popuplated


RobG wrote:
[...][color=blue]
> if ( 'text' == el.type ||
> 'TEXTAREA' == el.nodeName ){
> el.onfocus = function() {checkForm(this.form)};[/color]

Agggh, that should be onblur of course.

el.onblur = function() {checkForm(this.form)};

[color=blue]
> } else if ('submit' == el.type) {
> el.disabled = true;
> }[/color]
[...]


--
Rob
Closed Thread