How to insert data typed on a TextBox from modal into database

I have a JavaScript modal that opens on a button click and has two text … Read more How to insert data typed on a TextBox from modal into database

I have a JavaScript modal that opens on a button click and has two text boxes and a button. The button has the task to insert the data that has been typed into the text boxes to a database. But, I don’t know why, when I click the button it just refreshes my page and the data is not inserted into the database. I also wrapped two alerts in a try/catch block, thus the one appears if the operation is successful and the other one if not, but for some reason after clicking the button none of them appears (the alert after an unsuccessful operation needs to pop up). I’ve searched the whole Internet but I don’t know why for my certain case I can’t find a thing (most of the solutions were for PHP).

How to make the button that is on the modal functional and to collect the data from the text boxes and insert to the database?

Here is the HTML code of the modal:

<i class="fas fa-info-circle" id="info"></i>
<div class="popup" id="popup">
                            <div class="modal-container" id="modal_container">
                                <div class="popup_left">
                                    <div class="popup-img_container">
                                        <img src="img/database_system.jpg" alt="Database System" class="popup_img" />
                                    </div>
                                </div>
                                <div class="popup_right">
                                    <div class="right_content">
                                        <h1>Can't reach me online?</h1>
                                        <p>Please type your e-mail and provide a brief explanation of your intention/purpose of contacting.</p>
                                        <form method="post" enctype="multipart/form-data">
                                            <asp:TextBox ID="email_textbox" CssClass="popup_form" placeholder="Please enter your e-mail" runat="server" Required="required"></asp:TextBox>
                                            <asp:RegularExpressionValidator ID="validator1" runat="server" ErrorMessage="Invalid character, your e-mail address must contain @" ControlToValidate="email_textbox" ValidationExpression="w+([-+.']w+)*@w+([-.]w+)*.w+([-.]w+)*"></asp:RegularExpressionValidator>
                                            <asp:TextBox ID="email_message" CssClass="popup_form" placeholder="Message" runat="server" Required="required"></asp:TextBox>
                                            <asp:Button ID="Message_button" runat="server" Text="Send" type="button" OnClick="Message_button_Click" />
                                        </form>
                                    </div>
                                </div>
                                <button id="close" type="button">
                                    <div class="popup_close">
                                        <svg>
                                            <use xlink:href="img/sprite.svg#icon-cross"></use>
                                        </svg>
                                    </div>
                                </button>
                            </div>
                        </div>

Here is the C# code:

SqlConnection con = new SqlConnection(@"Data Source=;Initial Catalog=Contacts;Persist Security Info=True;User ID=;Password=");
    protected void Message_button_Click(object sender, EventArgs e)
    {
        con.Open();
        SqlCommand cmd = con.CreateCommand();
        cmd.CommandType = System.Data.CommandType.Text;
        cmd.CommandText = "INSERT INTO ContactsTable VALUES ('"+email_textbox.Text+"','"+email_message.Text+"')";
        cmd.ExecuteNonQuery();

        try
        {
            script += successMessage;
            script += "')};";
            ClientScript.RegisterStartupScript(this.GetType(), "SuccessMessage", script, true);
        }
        catch (Exception)
        {

            script += dbFailMessage;
            script += "')};";
            ClientScript.RegisterStartupScript(this.GetType(), "dbFailMessage", script, true);
        }
        email_textbox.Text = "";
        email_message.Text = "";
    }

Here is the JavaScript code:

const info = document.getElementById('info');
const popup = document.getElementById('popup');
const close = document.getElementById('close');

info.addEventListener('click', () => {
popup.classList.add('show');
});

close.addEventListener('click', () => {
popup.classList.remove('show');
});

Grateful for any help.

Source: JavaSript – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *