locked
dynamically create an asp.net button in JavaScript RRS feed

  • Question

  • User2015884762 posted

    Hi, would like to check if there is a way to dynamically create an asp.net button via JavaScript.

    I have got some buttons that are created dynamically using JavaScript and I would need to create a submit to database feature in one those buttons. I tried the following method, but it does not work. 

     submitbtn = document.createElement("BUTTON");
        submitbtn.setAttribute("id", "submittodb0");
        //submitbtn.setAttribute("type", "submit");// Create a <button> element
        //submitbtn.setAttribute("value", "SUBMIT");
        submitbtn.innerHTML = "SUBMIT";
        submitbtn.className = "submitbutton";
        submitbtn.setAttribute("OnClick", "Submittodb");
        submitbtn.setAttribute("runat", "server");

    Sunday, April 26, 2020 11:17 PM

Answers

  • User-1330468790 posted

    Hi callykalpana,

      

    I tried the following method, but it does not work. 

    I think you have mixed the concepts about the server controls and HTML elements.

    The first one is created on the server side, which has some attributes such as "runat", "OnClick".

    However, here you want to create them from client side with above JavaScript codes, which is obviously not possible.

      

    I have got some buttons that are created dynamically using JavaScript and I would need to create a submit to database feature in one those buttons

    I am not sure what purposes you want to achieve but here is a workaround that could post the data back to the server side and trigger (manually) the click event.

    The base of the implementation is the __doPostBack function of the webform framework.

      

    You could refer to below code to find more details.

    .aspx Page:

    <head runat="server">
        <title></title>
        <script type="text/javascript">
            window.addEventListener('load', function () {
                var submitbtn = document.createElement("INPUT");
                submitbtn.setAttribute("id", "button2");
                submitbtn.type = "submit";
                submitbtn.value = "SUBMIT2";
                submitbtn.addEventListener("click", postbackfunction);
                document.getElementById('form1').appendChild(submitbtn);
    
            });
    
            function postbackfunction() {
                console.log("Heihei");
                __doPostBack("submit", "");
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <div>
                <asp:Button ID="button1" runat="server" OnClick="button1_Click" Text="SUBMIT1" />
    
                <asp:TextBox ID="text1" runat="server"></asp:TextBox>
            </div>
        </form>
    </body>

    Code behind:

    protected void Page_Load(object sender, EventArgs e)
            {
                string target = Request.Params.Get("__EVENTTARGET");
                if(target != null && target == "submit")
                {
                    button2_Click(sender, e);
                }
            }
    
            protected void button1_Click(object sender, EventArgs e)
            {
                text1.Text = "Button 1 Post Successful!";
            }
    
            protected void button2_Click(object sender, EventArgs e)
            {
                text1.Text = "Button 2 Post Successful!";
            }

    Demo:

     

      

    Here is more information about "__doPostBack".

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 27, 2020 8:34 AM