Locally Override a Remote JavaScript Function

[jcdev]

Hello from the JavaScript newbie,

I'm in process of creating some landing pages for my client's Google AdWords campaign. The landing page has info about the company, a call to action, etc. and lower down on the page is a form for the visitor to use if they would like to schedule an appointment.

The appointment scheduler form comes from a company called DemandForce and as such, the process to embed the form on my page is as follows:

<script type="text/javascript">
     d3cp_bid = '100000932'; // Business ID in DemandforceD3
					
     d3cp_appt_source = "Service Shop Scheduler";
     // Optional. The value will be displayed on D3 as the appointment request source.
					
     d3cp_appt_returnpage = "";
     // Optional. The URL will redirect after the appointment request is submitted. 
     // It can be an absolute URL path and a relative path to your page as well.
     // for example, d3cp_appt_returnpage = "https://www.acme.com/appointment/appointment.aspx".
</script>

The problem I'm having is that the DemandForce JavaScript is setting focus to the 1st form field and because the form is a little bit "below the fold", the page is automatically scrolling to the form when the page loads, thus bypassing all of the info at the top part of the page.

I think I've narrowed it down to the line of code on the DemandForce side. It's in a file called webscheduler.content.jsp:

//set the first input of the form to be focused
d3cp_focusFirstInputOfForm("d3cp_form_appointment");

Because I'm not a JavaScript guru, I'm not really sure of the process of how the remote code is utilized by my page. Does (in effect) the DemandForce code get "sucked into" my page (as if were hard coded) and then executed? Is there a way to locally override the d3cp_focusFirstInputOfForm function that lives on the DemandForce servers so that I don't set focus to the form field? Someone at DemandForce suggested utilizing the following:

<script> window.onload = function() {
document.getElementById("MainHeader").focus();
};
</script>

...but it doesn't work - I'm guessing that in the chain of events the window.onload is happening prior to the DemandForce d3cp_focusFirstInputOfForm function.

Thanks in advance for any help you can give me.

[rnd me]

you might be able to reserve the name before the remote function loads.
so before the external script tag,

Object.defineProperty(window, "d3cp_focusFirstInputOfForm", {value:String});

this may prevent it loading completely, or it may solve your problem without a hitch, good luck.

if nothing else, a script tag at the bottom of your page to move the page back up might work:

document.body.scrollTop=0;
document.documentElement.scrollTop=0;

[jcdev]

Thanks for your reply - I tried to use the 1st option, but I am getting:

A TypeError is thrown when attempts are made to change non-configurable property attributes (besides the writable attribute) unless the current and new values are the same.

(The second option was one I already tried, but the window loads, scrolls down to the form and then jumps back up to the top and ends up looking not so good).

Any suggestions on the error?

[jcdev]

oops - I pasted the wrong error info. Option 1 gives me:

Timestamp: 9/20/2012 5:29:55 PM
Error: TypeError: can't redefine non-configurable property 'd3cp_focusFirstInputOfForm'
Source File: http://www.demandforced3.com/auto/addisonauto/scheduler.widget
Line: 192

Thanks for any help....

[rnd me]

maybe you can add an onscroll event that will let you cancel the scroll by returning false or preventDefault() or something like that...