Retrieve value from javascript funcion on client click

Question

I have a function on JS that must execute before the codebehind, but i'm having trouble retrieving it. It will return a variable that i should use on the codebehind. The function i created is this one:

            <script type="text/javascript" >
                function returnHash() {
                    var checkout = new DirectCheckout('086F7D02A071267FEBF102EB759D9845B8B3333DFA65BC45B807F41A8525AD8D'); /* Em sandbox utilizar o construtor new DirectCheckout('SEU TOKEN PUBLICO', false); */
                    debugger;
                    var month = document.getElementById("txtDataVencUser").value;
                    var year = document.getElementById("txtDataVencUser").value;

                    var cardData = {
                        cardNumber: document.getElementById("txtNumeroCartaoUser").value,
                        holderName: document.getElementById("txtNomeCartaoUser").value,
                        securityCode: document.getElementById("txtCodSegurancaUser").value,
                        expirationMonth: month.substring(0, 2),
                        expirationYear: "20" + year.substring(3, 5)
                    };

                    checkout.getCardHash(cardData, function (cardHash) {
----------------------------> I NEED TO RETRIEVE "cardHash" VALUE IN CODEBEHIND
                    }, function (error) {
                        console.log(error);
                    });
                }
                </script>

I don't know if this step is correct, but i am using the onClientClick to try to execute the JS before the codebehind:

<asp:Button ID="btnFinalizarCompraJunoUser" runat="server" Text="FINALIZAR COMPRA" OnClientClick="returnHash()" OnClick="btnFinalizarCompraJunoUser_Click" Visible="true" />

I am having trouble figuring out what to do next, can someone help me please?

Answer 1

There are a number of ways - perhaps as many flavors of ice cream.

But, since you are going to run a "code behind" stub based on the click?

I would just drop a hidden field on the page, and then just set that value in js

So right below your button - add a hidden field say like this:

<form id="form1" runat="server">
        <br />

    <asp:Button ID="Button1" runat="server" Text="Button" 
        OnClientClick="myfun();return true" Width="68px"
        ClientIDMode="Static"/>

     <asp:HiddenField ID="HiddenField1" runat="server" ClientIDMode="Static" />

  </form>

<script type="text/javascript">

function myfun() {
    // do whatever - walk the dog - have fun!!!

    var f1 = document.getElementById("HiddenField1");
    f1.value = "2222";
}
</script>

So in above I just shove 2222 into the hidden1 field.

Now, in the the code behind button stub, you can do this:

 Debug.Print("my click f1 = " & HiddenField1.Value);

So the code behind will now have a good old regular plane jane control to look at and get the value in question.

So, it depends on how many values - but using a code behind friendly (asp.net) control and setting the value with the js client side code probably is the least effort here.

I also of course used "staticID" for the above. If you for some reason don't like (or want) to use staticID for above, then the js selection would be:

 var f1 = document.getElementById("<%=HiddenField1.Clientid%>");
 f1.value = cardHash;