What is the difference between code in javascript onchange and the same code in a function?

Question

I am a novice at Javascript. But I have to use it in one of my projects.

I have a tabbed control that sets the value of a hidden control from various events on the page (tab clicks and dropdowns). The hidden control is fed a JSON string, and a button is clicked that executes some server side code and populates data in the page controls.

When I run this code directly in the onchange event of the hidden input, the behavior is different than when I pull out the Javascript and put it in a function.

I need to pull it out so I can do a couple of other minor things in the function that seem to complex for the inline code in the onchagne event.

Here is the code that functions properly.

<input type="hidden" id="<%= ASP_SSRS.ClientID %>_tracDatState" 
onchange="$('#<%= ASP_SSRS.ClientID %>').val(this.value); 
document.getElementById('<%= btnSendHiddenField.ClientID %>').click();" />

COMPARED TO THIS CODE. Which has a different affect.

<input type="hidden" id="<%= ASP_SSRS.ClientID %>_tracDatState" onchange="compareUnitValues(this.value)" />


    <script type ="text/javascript">
        function compareUnitValues(args) {
            $('#<%= ASP_SSRS.ClientID %>').val(args);               
            document.getElementById('<%= btnSendHiddenField.ClientID %>').click();
        }
    </script>

Thanks in advance for any insight. Tom

Answer 1

ok, let's break it by parts and I'm going to assume that ASP_SSRS is inside a control, that is why you have a bit more of an overhead.

when you call directly:

$('#<%= ASP_SSRS.ClientID %>').val(this.value); 
document.getElementById('<%= btnSendHiddenField.ClientID %>').click();

you have in that like the correct client elements... as you are putting your method away from that line, you loose them completely, in other words, by the time the ASP.NET renders your new method, it does not know the ASP_SSRS and/or btnSendHiddenField .

The only way, is to pass these into the method it self.

if you write your method signature as:

function compareUnitValues(elmt, value1, value2)

you can then, inside, request their properties and assign any value you want, so let's wrap it up:

<input type="hidden" id="<%= ASP_SSRS.ClientID %>_tracDatState" 
       onchange="compareUnitValues(this.id, '<%= ASP_SSRS.ClientID %>', '<%= btnSendHiddenField.ClientID %>');" />

this way, your passing the input <%= ASP_SSRS.ClientID %>_tracDatState as this -> this is the element that is associate where the method is fired, in this case, you're calling the method on <%= ASP_SSRS.ClientID %>_tracDatState element.

in our case, it's much easier by just passing the ID as well , you will see when we write the javascript method!

<input type="hidden" id="<%= ASP_SSRS.ClientID %>_tracDatState" 
       onchange="compareValues('<%= ASP_SSRS.ClientID %>_tracDatState', '<%= ASP_SSRS.ClientID %>', '<%= btnSendHiddenField.ClientID %>');" />

you are also passing the correct elements id 's for the elements you want to manipulate, as by that line the ASP.NET Render Engine knows exactly hat is ASP_SSRS and btnSendHiddenField .

your method call, after rendered, will look something like:

onchange="compareValues('Ctrl001_ASP_SSRS_tracDatState', 'Ctrl001_ASP_SSRS', 'Ctrl001_btnSendHiddenField');"

and witch such values, you can do plenty now:

function compareUnitValues(elemt, value1, value2) {

     var state   = $("#" + elemt),
         ssrs    = $("#" + value1),
         btnSend = $("#" + value2);

     // assign state value to ssrs
     ssrs.val(state.val());

     // trigger the send button
     btnSend.trigger("click");
}