Question

I try to activate my first buttons click/command using the second button
in order to activate my Login Command and Group Validation

what am I doing wrong?

first button

<asp:Button ID="LoginButtonInvis" runat="server"  CommandName="Login"
           ValidationGroup="Login1"
                visible ="false"/>
                </asp:Button>

second button

          <button name="submit" runat="server"onclick="document.getElementById('LoginButtonInvis').Click();">                
                <i class="icon-arrow-right icon-large"></i>
            </Button>

the error im getting:

Microsoft JScript runtime error: Unable to get value of the property 'Click': object is null or undefined

Answer 1

By default, ASP.NET is appending parents ID’s to controls to maintain unique ID to elements. This is proper behavior.

In addition, JavaScript is case sensitive. Events all start with small letters. Some browsers have .click() and others have .onclick() so the below code is the best I can offer without changes in other parts of your code:

onclick="var b = document.getElementById('<%=LoginButtonInvis.ClientID%>'); if (b.click) b.click(); else if (b.onclick) b.onclick();"

Also make sure the second button is not submit button by adding type="button" otherwise it will cause the form to be submitted twice.

Edit: this will work only if the first button is present in the document. With your current code, it’s not present due to the Visible="false" you have. To send it while still keeping it hidden, remove the Visible="false" and add this in your code behind:

LoginButtonInvis.Style["display"] = "none";

Or alternatively apply CSS class with “display: none;” rule.

To avoid having inline JavaScript, plus better cross browser support (IE, yes) you better add JavaScript block in your page: (no matter where)

<script type="text/javascript">
function SimulateClick(buttonId) {
    var button = document.getElementById(buttonId);
    if (button) {
        if (button.click) {
            button.click();
        }
        else if (button.onclick) {
            button.onclick();
        }
        else {
            alert("DEBUG: button '" + buttonId + "' is not clickable");
        }
    } else {
        alert("DEBUG: button with ID '" + buttonId + "' does not exist");
    }
}
</script>

Now have only this in the second button:

<button name="submit" onclick="SimulateClick('<%=LoginButtonInvis.ClientID%>');"><i class="icon-arrow-right icon-large"></i></button>

Note also that you don’t need runat="server" for the second button, it will just cause <%= to not work and complicate things.