Why is my JavaScript code not working on my ASP.NET web forms page?

Question

I am running into a problem with a form submit in my web forms page. I have a function in place that should after confirming by selecting OK, do a document.forms.submit and send the user to another page.

I am not getting any error for the JavaScript when attempting to debug in Chrome and I am not getting an exception at all when trying to step through the C# function. Can someone with more experience with JavaScript input submit forms assist on this or show me a better way with the given code?

protected virtual void WriteCancelDiv(string claim_id, string promotion_id)
{
    string innerHtml = "<form action=\"TestPath/claim_cancel.aspx\" method=post><input type='hidden' name='claim_id' value='" + claim_id + "'><input type='hidden' name='promotion_id' value='" + promotion_id + "'>";
    innerHtml += @"<script> 
                   debugger;
                   function Clicked(){
                       var b = confirm(""This cannot be undone.  Are you sure you want to cancel?"");
                       if (!b) {return;}
                       else {document.forms[0].submit();}
                   }
                   </script>
                   <input class=""btn btn-sm btn-primary"" type=""submit"" value=""Cancel Claim"" onClick=""Clicked();"">
                </form>";
    cancel_div.InnerHtml = innerHtml;
}

Answer 1

Mixing client side logic into ASP.NET web forms can be quite an arduous thing to do. In your code you are injecting HTML (including a form element) into a div. The problem with this is that every ASP.NET web control (including your div) is already inside a huge wrapping form element that ensures the post back of these controls.

ASP.NET web forms renders to simple HTML on the client side and this is how it works. There is always one huge form element around everything that you see. Unfortunately adding a form element into another form element is not valid HTML. So your approach is not going to work.

I won't provide any code here, but give you a description on how I would go about solving this.

So this is what you are trying to achieve, if I am not mistaken:

When button A is clicked another button B shows up. Clicking that button B first a confirmation dialog asks the used wheter he/she really wants to perform that task. If so, the user is redirected to another page.

I would do it like this:

1. You add button B as another server side control with visibility hidden.
2. In the click event handler of button A, you set the visibility of button B to visible.
3. You can add the confirm dialog to the onClientClick attribute of button B.
4. In the click event handler of button B, you do a redirect to the desired page.