My main query is how can I trigger a button click event in javascript.
I am aware of using document.getElementById("btnSubmit").click();, but it does not seem to execute the onClientClick javascript function as well.
Environment:
I am working with ASP.NET using C# and javascript.
Situation: I have an input text area where I want users to input at least one character before enabling the submit button. I achieved this by using onkeypress="validateTxt();" which calls the following function
function validateTxt() {
var input = document.getElementById("<%=txtUserName.ClientID %>").value;
if(input.length > 1)
{
document.getElementById("btnSubmit").disabled = false;
}
else
{
document.getElementById("btnSubmit").disabled = true;
}
}
The only issue is that it doesn't recognize backspace key press.
To resolve this, I came across this solution online
<script type="text/javascript">
document.getElementsByName('txtUserName')[0].onkeydown = function (event) {
if (event === undefined) event = window.event;
if (event.keyCode === 8)
validateTxt();
if (event.keyCode === 13) {
document.getElementById("btnSubmit").click();
}
};
Now whenever the user hits the backspace key, my javascript function is invoked. This worked perfectly, until I discovered that pressing enter from the text area did not call my javascript function.
Here is all the relevant code...
<script type="text/javascript">
function InformUser()
{
window.document.getElementById("loadingMessageDIV").style.display = "block";
<%=Page.GetPostBackEventReference(btnSubmit as Control)%>
document.getElementById("btnSubmit").disabled = true;
}
function validateTxt() {
var input = document.getElementById("<%=txtUserName.ClientID %>").value;
if(input.length > 1)
{
document.getElementById("btnSubmit").disabled = false;
}
else
{
document.getElementById("btnSubmit").disabled = true;
}
}
</script>
This is the text area along with the javascript binding function
<asp:TextBox ID="txtUserName" runat="server" Font-Size="11pt" onkeypress="validateTxt();"></asp:TextBox>
<script type="text/javascript">
//Binding the textbox to this function so that when the backspace key is pressed, it will trigger validateTxt
document.getElementsByName('txtUserName')[0].onkeydown = function (event) {
if (event === undefined) event = window.event;
if (event.keyCode === 8)
validateTxt();
if (event.keyCode === 13) {
document.getElementById("btnSubmit").click();
}
};
</script>
This is the submit button
<asp:Button ID="btnSubmit" runat="server" OnClientClick="InformUser();" OnClick="btnSubmit_Click"
Text="Login" Font-Bold="True" Enabled="True" />
<script type="text/javascript">
//Disabling the button until actual input is provided
document.getElementById("btnSubmit").disabled = true;
</script>
In summary, the button is being clicked but failing to disable also. I even attempted calling InformUser directly upon hitting enter and then clicking the button, but that didn't work either.
I suspect the issue lies in how I bound the javascript function to the text area because removing it makes everything work as expected.
Thank you for your assistance