Question

I have 3rd party user control (a captcha control), which has a captcha image, a text box within it.

I am using the above user control in my webpage. I have a 3 submit buttons on my webpage (Validate Captcha, Submit Page, Add User). When I click the Validate Captcha submit button using the mouse, I am validating whether captcha is empty and showing a javascript alert.

The problem comes when I enter the valid captcha text in the textbox and hit enter key when the cursor is in the textbox. The page just refreshes. I am unable to add keypress event to textbox and call Validate Captcha button event as I am using the 3rd party user control which I cannot modify.

Also, Page.ClientScript.RegisterHiddenField(…) will not work in my case as I have two other submit button inside the same page.

Only option left is to enclose these in panels and set default button.

Please let me know if anyone has any better options for achieving this.

Answer 1

Greetings! I too use alot of third party controls. The thing to remember about these controls, it that in the end they just emit HTML. This means you can use the DOM to access and attach event handlers such as onKeyPress. The trick is to identify how your control creator named the control you are looking for, in this case a {textbox}. The easiest way to achieve this is to simply run the page and view the page source. It is there that you can find the name as it is rendered and sent to the browser, after that all you have to do us use document.getElementByID to get the object and setup your handler

Example:

<script> 
     //Place this AFTER your textbox control is declared in the HTML
     //Get the textbox
     var textbox = document.getElementById('nameOfRenderedControlHere');
     //Assign the event handler and function you want it to call
     textbox.onclick = function() { validateCaptcha(); };

     function validateCaptcha()
     { //Do your Stuff here  }
</script>

That should be it..havent tested, let me knwo if you run into questions.