stifling certain form elements at load

[Beau]

I've found countless examples and tutorials on disabling parts of a form AFTER it's loaded, but not one that deals with disabling parts of a form WHEN it's loaded.

I have a form with bill-to address and ship-to address sections in it. Between the two sections is a checkbox called "Ship to Billing". When the form initially loads, I have this checkbox checked by default under the assumption that most customers will have their order sent to the same address as their bill goes to. Likewise if someone with an existing membership logs in and they have not previously entered seperate shipping information for their account, the checkbox is also checked by default.

All of this works as expected, but the customers continue to fill in seperate shipping information without first unchecking that "Ship to billing" box which the system uses to make packing slips, invoices, etc. What this means is that we end up shipping the product to their billing address instead of the shipping address. To try and stem this problem, I want to disable the "Ship-to" section of the form so that in order to add different shipping information the customer has to uncheck that box first. That means that that part of the form has to load onto the page disabled, but only if it's a new entry or a returning customer that has no Shipping Info saved.

Here is the simple Javascript I am using to check the status of that checkbox and setting the necessary form objects to disabled or otherwise.


<script>
<!--
function shipToToggle()
{
if (document.customerInfoForm.shiptobilling.checked == 1)
{
document.customerInfoForm.sh_firstname.disabled = true;
document.customerInfoForm.sh_lastname.disabled = true;
document.customerInfoForm.sh_corpname.disabled = true;
document.customerInfoForm.sh_street1.disabled = true;
document.customerInfoForm.sh_street2.disabled = true;
document.customerInfoForm.sh_city.disabled = true;
document.customerInfoForm.sh_statenr.disabled = true;
document.customerInfoForm.sh_zip.disabled = true;
document.customerInfoForm.sh_countrynr.disabled = true;
document.customerInfoForm.sh_phone1.disabled = true;
document.customerInfoForm.sh_phone2.disabled = true;
document.customerInfoForm.sh_fax.disabled = true;
document.customerInfoForm.sh_email.disabled = true;
}
else
{
document.customerInfoForm.sh_firstname.disabled = false;
document.customerInfoForm.sh_lastname.disabled = false;
document.customerInfoForm.sh_corpname.disabled = false;
document.customerInfoForm.sh_street1.disabled = false;
document.customerInfoForm.sh_street2.disabled = false;
document.customerInfoForm.sh_city.disabled = false;
document.customerInfoForm.sh_statenr.disabled = false;
document.customerInfoForm.sh_zip.disabled = false;
document.customerInfoForm.sh_countrynr.disabled = false;
document.customerInfoForm.sh_phone1.disabled = false;
document.customerInfoForm.sh_phone2.disabled = false;
document.customerInfoForm.sh_fax.disabled = false
document.customerInfoForm.sh_email.disabled = false;
}
}

//-->
</script>


What happens is that the script works fine once the page is loaded. In otherwords, I can turn on and off that part of the form with the checkbox after the page has loaded. What I cannot get it to do though is evaluate the script when it's loading and turn off that part of the form initially if necessary. I've tried an onLoad event handler to fire the script when the form loads, when the checkbox loads and even when the table it's in closes, but none have had any impact.

Seems like I've run into a similar problem before when trying to evaluate the initial status of a checkbox, but that was easily solved with PHP. Now though, I really need the Javascript to work and I'm not sure how where to go with it from here. So my challenge to you is, how do I get the Shipping section of the form to load onto the page disabled?

Thanks!

[joh6nn]

you put the javascript right after the form. that way, the form finishes loading, and the next thing the browser parses is the javascript.

eg:

<form>
...
</form>
<script>
if (document.customerInfoForm.shiptobilling.checked == 1) {
document.customerInfoForm.sh_firstname.disabled = true;
...
}
</script>

[Beau]

Still works the same way. It'll work once the checkbox it fiddled with, but it still doesn't disable that part of the form when the page loads. Do I need to call the function somewhere after I declare it?

[ConfusedOfLife]

Can we see your work? The onload trigger and also putting your code after the form are both right and it should work! Put the whole code that we see what we can do!

[joh6nn]

yeah, sorry, i thought that was clearer.

what i meant was to not put it in a function, to just have it as code to be run through after the form finished loading. if you take a closer look at my example, you'll see what i mean.

but i had forgotten that you need this to toggle whenever the checkbox is clicked. so, define the function in the head of the of the document, the way you normally would, and then call it right after the form. that should do the trick.

eg:

<form>
...
</form>
<script>
shipToToggle();
</script>

[Beau]

Shazam! Thanks john6nn.

I'm a scripting blockhead and that's one of those things that makes perfect sense to me once I see it AND it works.

thanks all for the input.