I'm using a web page which contains a form loaded with an external script using the command 'script src'.

I created a function to populate some fields from url parameters and also hide some of them.

Here is the code.

<script type="text/javascript">
<!-- Hide Form Field -->
function hideFormField(name) {
    var list = document.getElementsByName(name);
    for (i = 0; i < list.length; i++) {
      list[i].style.display = 'none';
      list[i].style.visible = 'false';
      list[i].type = 'hidden';
    }
}
<!-- Customize form -->
function CustomizeForm()
{
  // Set Field Value
  hideFormField('custom_11');
  hideFormField('custom_12');
  hideFormField('custom_13');
  hideFormField('custom_14'); 
  hideFormField('custom_15');
}
// call it
CustomizeForm();
</script>

The fields are populated but not hidden.

When I debug, the form fields appear to disappear briefly but then they reappear.

It looks like the form is being refreshed afterwards.

1. To hide fields, which specific command is best and should I use out of those three? I'm tried them separately but it didn't seem to solve my problem.

field.style.display = 'none';
field.style.visible = 'false';
field.type = 'hidden';

2. Where should I put the call to the function to hide fields?

3. Assuming I don't control where the code is being added exactly in my designer (only in which section: header, body or footer), is there another alternative that would work every time? For example, can I attach to an event (which one) that might get called after all the loading and refresh is done.

4. Can I somehow debug or trace what is happening and why the fields do reappear?

Thank you in advance!