Form conditions not working

JavaScript
1

Hi i have a standard HTML form on an asp page and i need to have my submit button be disabled but visible, but when the required fields on the form have been filled in i want the button to change image and become active. This needs to happen without the user having to press anything.

Any ideas and examples would be appreciated, im also open to any programming methods which are compatable with asp.

Thank you.

2

This isn’t an ASP issue. You can do this type of control through javascript. You may want to move this post to a javascript forum.

3

I’m using the code below to check through my form to see when the user has entered data into all of my required fields, then this makes the submit button active. This works as such apart from a user can enter text into the email field and the submit button becomes active, without any of the other required fields being filled in. If i take the value out of the email field and enter values into the other required fields nothing happens unless i enter something into the email field.

Please take a look at the code below,

<script type=“text/javascript”>
function variableCheck() {
document.getElementById(“myButton”).disabled=true;
}
function getElements(event) {
var x=document.forms[“form1”][“fname”].value;
if (x==null || x==“”)
{
}
var x=document.forms[“form1”][“sname”].value;
if (x==null || x==“”)
{
}
var x=document.forms[“form1”][“pharmacy”].value;
if (x==null || x==“”)
{
}
var x=document.forms[“form1”][“add1”].value;
if (x==null || x==“”)
{
}
var x=document.forms[“form1”][“city”].value;
if (x==null || x==“”)
{
}
var x=document.forms[“form1”][“county”].value;
if (x==null || x==“”)
{
}
var x=document.forms[“form1”][“pcode”].value;
if (x==null || x==“”)
{
}
var x=document.forms[“form1”][“telephone”].value;
if (x==null || x==“”)
{
}
var x=document.forms[“form1”][“member”].value;
if (x==null || x==“”)
{
}
var x=document.forms[“form1”][“emailx”].value;
if (x==null || x==“”)
{

document.getElementById(“myButton”).disabled=true
document.getElementById(“myButton”).src=“images/submit_non_active.gif”;
} else {
document.getElementById(“myButton”).disabled=false
document.getElementById(“myButton”).src=“images/submit_active.gif”;
}
}
</script>

4

I now have an idea of what the problem is, basically the script is just looking at the last form field which i have coded in the function. i need this to check all of the form fields.

5

See the following code, i have simplified it as your current code is very redundant.

// Assign the fields we want to validate in the following array
var form   = document.forms['form1'],
    button = document.getElementById('myButton'),
    check  = ['fname', 'sname', 'pharmacy', 'add1', 'city', 'country', 'pcode', 'telephone', 'member', 'emailx'],
    errors = 0;

function getElements() {
    for (var i = 0; i < check.length; i++) {
        // Check if the field has a valid value
        var value = form[check[i]].value;
        
        if (value === null || value === '' || !value.length) {
            errors++;
        }
    }
    
    button.disabled = (errors > 0) ? true : false;
    button.src      = 'images/' + (errors > 0) ? 'submit_non_active.gif' : 'submit_active.gif';
    
    // Reset the errors counter
    errors = 0;
}
6

Thanks for much cleaner code.