How to pass a value into a javascript function within an aspx page onClientClick

Question

I want to check the textbox value before postback occurs. I set the onClientClick value to my function but I don't know how to pass the data to check, in this case I want to check the txt1 entered text.

<asp:textbox id="txt1" runat="server />

<asp:LinkButton ID="LinkButton1"
                runat="server"
                Text="Save" 
                onclick="Save"
                OnClientClick="javascript:check(WANT TO PUT TEXTBOX VALUE HERE);"
                />

My javascript:

function check(txt) {
 var pattern = /^[0-9]{1,11}(,[0-9]{0,2})?$/;
 if (!pattern.test(txt)) {
    return false;
 }
 else {
    return true;
 }
}

The issue is that this check function is used along the keypress event of the txt1 so I cant use:

function check(){
    var txt=$('#txt1').val();
}

The whole JS code:

$('#txt1').keypress(function (e) {
    var key = String.fromCharCode(e.which);
    var txt = $(this).val() + key;
    if (check(txt)) {
        // do sth
    } else {
        e.preventDefault();
        // do sth
    }
});

How can I tell the OnclientCLick function to get the txt1 value?

Thank you.

Answer 1

Something like that :

<asp:textbox id="txt1" runat="server />

<asp:LinkButton ID="LinkButton1"
                runat="server"
                Text="Save" 
                onclick="Save"
                OnClientClick="check(document.getElementById('<%=txt1.ClientID%>').value;)"
                />

---

Edit:
Other methods :

1. You can add it on server side : LinkButton1.OnClientClick="check(document.getElementById('" + txt1.ClientID + "').value;)";

2. If you want to remain in the aspx page, you have to put a name of a javascript function in the OnClientClick and implement the javascript function in a script tag :

   <asp:LinkButton ID="LinkButton1"
                   runat="server"
                   Text="Save" 
                   OnClientClick="validate();"
                   />
   <script type="text/javascript">
       function validate() {
           alert(document.getElementById('<%=txt1.ClientID%>').value);
           return false;
       }
   </script>
   

Answer 2

You have several approaches.

First Approach:

function sayHello(obj){
   alert(obj.id + " says 'Hello!'");
};

<asp:Button runat="server" ID="btnApproach1" OnClientClick="sayHello(this)"
 Text="Say Hello" />

This will pass the Button control (actually, just an <input element) to the function and you can then work on it however you please.

Second Approach:

function checkValue(e) {

    //If it has a target, use it. Otherwise, use srcElement (for IE)
    var ctrl = e.target || e.srcElement;

    //Do whatever you need to with the text, no button necessary.

};

function bindEvent(ctrl, event, handler, propagates) {
    if (ctrl.addEventListener) {
        ctrl.addEventListener(event, handler, propagates);
    }
    else {
        ctrl.attachEvent("on" + event, handler);
    }
};

window.onload = function () {

var myCtrl = document.getElementById('<%=txtToValidate.ClientID%>');

bindEvent(myCtrl, "keydown", checkValue, false);

};

<asp:Button runat="server" ID="btnApproach2" Text="Say Hello" />

Here, you are binding the events to the controls behind the scenes (preferable) and removing that logic from your presentation layer (your .aspx).

Both approaches will work, but I'd suggest going with option two for separation of concerns.