Executing the JavaScript code to open the modal dialog

I have created a Modal Dialog (popup) using only CSS3 on my asp page for user registration: HTML :

<%-- Modal PopUp starts here--%>
    <div id="openModal" class="modalDialog">
        <div>   <a href="#close" title="Close" class="close" onclick="DisableAllPopUpTxt()">X</a>

            <table style="width:100%;">
                <tr>
                    <td style="text-align: center; width: 100%;"></td>
                </tr>
                <tr>
                    <td style="text-align: center; width: 100%;">
                        <asp:Label ID="lblErrorMSG2" runat="server" Font-Bold="True" ForeColor="#FF3300" Text="Email ID Already Taken " Visible="False"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center; width: 100%;">
                        <input id="txtCustFName" name="txtCustFName" type="text" required placeholder="Enter Your First Name" style="width: 80%" />
                    </td>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center; width: 100%;">
                        <input id="txtCustLName" name="txtCustLName" type="text" required placeholder="Enter Your Last Name" style="width: 80%" />
                    </td>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center; width: 100%;">
                        <input id="txtCustREmail" name="txtCustREmail" type="email" required placeholder="Enter Valid Email ID" style="width: 80%" />
                    </td>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center; width: 100%;">
                        <input id="txtCustRPwd" name="txtCustRPwd" type="password" required placeholder="Enter Password" style="width: 80%" />
                    </td>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center; width: 100%;">
                        <input id="txtCustRePwd" name="txtCustRePwd" type="password" required placeholder="ReType Password" style="width: 80%" />
                    </td>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center; width: 100%;">
                        <input id="txtCustPh" name="txtCustPh" type="number" size="10" min="10" max="10" required placeholder="Enter Valid Mobile No" style="width: 80%" />
                    </td>
                    </td>
                </tr>
                <tr>
                    <td class="style1" style="text-align: center; width: 100%;" onclick="btnSignUp()">
                        <asp:Button ID="btnSingUp" runat="server" onclick="signUp" Text="Login" />
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center; width: 100%;">&nbsp;</td>
                </tr>
            </table>
        </div>
    </div>
    <%--Modal PopUp Ends Here--%>

CSS :

.modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
        }

    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
        }

    .modalDialog > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
        }

    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;}
    .close:hover { background: #00d9ff; 
                   }

On my asp page, I have an anchor tag that triggers the popup:

<a href="#openModal" id="DialogLink" style="color: #FFFFFF; font-weight: bold">Register</a>

The issue:

For this registration form, I need server-side validation to check if the entered email already exists in the database. If the email is already taken, I want to reopen the modal with an error message stating that the email ID already exists.

I am unable to reopen the dialog box when needed. Is there a way to achieve this using JavaScript?

You can find the tutorial for creating modal dialog windows on this site: click here

To visualize the modal dialog, you can visit this link: click here

Thank you in advance.

c#javascriptasp.nethtmlcss

Answer №1

To accomplish this task, we can utilize ajax....Here is a snippet of code for reference

$("#btnSubmit").live("click",(function(e) {
        var emailAddress = $.trim($('#txtEmailAddress').val());
        try
        { 
          var reqUrl = "http://mysite/Sample/Sample.aspx?post=true";
          var jqXHRresponse;
          var request = $.ajax({
                      url: reqUrl,
                      type: "POST",
                      data: {email:emailAddress},
                      dataType: 'json',
                      success:function (data, status, jqXHR) { 
                              jqXHRresponse = JSON.parse(jqXHR.responseText); 
                              if(jqXHRresponse.result == 'success')
                              {
                                /Do Something/
                              }
                              else if(jqXHRresponse.result == 'emailexist')
                              {
                                 DisplayErrorMessages('Email Already Exist');
                              }
                      });
  return false; }));

C#

protected override void OnInit(EventArgs e)
{
  if (Request.Params["post"] == "true")
  {
    submitValues(Request.Params["email"]);
  }
}

public void submitValues(string email)
{
 string returnValue = string.Empty;
 //Call DB and send response back

 Response.Write("{\"result\":\"" + retrunValue+ "\"}");
 Response.End();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

create a new Vuex.Store and include Mutations

Having trouble using the commit method as described here. I suspect it's because I'm using export default new Vuex.Store instead of export const store = new Vuex.Store. However, when I make this change, I encounter an issue similar to the one in ...

javascriptvue.jsvuex

What is the method to invoke a function within another function in Angular 9?

Illustration ` function1(){ ------- main function execution function2(){ ------child function execution } } ` I must invoke function2 in TypeScript ...

javascriptangulartypescriptangular-servicesnested-function

Creating a unique store previewer customization

Are there any JavaScript libraries available to simulate the CSS image-mask property since it is not widely supported by browsers? I've been experimenting with creating a white image containing transparent areas in the shape of the design elements I w ...

cssimagehtml

React: Improve performance by optimizing the use of useContext to prevent unnecessary re-renders of the entire app or efficiently share data between components without causing all

In my app, I have a Header.tsx component that needs to be accessible on all pages and a Home.tsx component where most of the content resides. The Home.tsx component includes an intersectionObserver that utilizes the useContext hook (called homeLinks) to p ...

javascriptreactjsreact-hooksintersection-observer

Error in material mapping: glDrawElements is trying to access vertices that are out of range in attribute 2

I have developed an algorithm that allows users to input data or a function and then generates a graphical representation of the function. It essentially creates a surface map, similar to the one you can see here. The graphing functionality is working well ...

javascriptthree.js

Constructing a list without a specific order using data from various MySQL databases

I am currently in the process of constructing a menu that will display categories, subcategories, and tertiary categories sourced from three distinct tables within my database. Here is how the data is structured: TABLE A ------------------------ | ID | na ...

phphtmlmysqlwebhtml-lists

Activate the checkbox if the value matches the data retrieved from the database using JavaScript

Hello everyone, I could really use some assistance. I am new to JavaScript and currently have a checkbox with a random value. My goal is to automatically check the checkbox when the data from the database matches the value in the checkbox. This is how my ...

javascriptajaxlaravel

"Implementing a show/hide feature for a DIV based on a selected drop-down value using vanilla JavaScript (without any external libraries

I have different tide tables for various locations, each contained within its own div. The user can select a location from a dropdown menu, and when the page loads, it displays the tide table for the first location by default. Upon changing the location, o ...

javascriptphpjquery

Close the hamburger menu when links are clicked

Recently, I created a basic Hamburger menu that I would like to close when a link is clicked, but I'm struggling with the implementation. Here is a snippet of my HTML: <nav> <div class="nav_top"> <div clas ...

jqueryhtmlhyperlinkhamburger-menu

What is the best way to increase the top padding of an anchor link?

I need to create a padding-top effect for my div when the link to the anchor is clicked: <a href="#myAnchor">Proceed to my anchor</a> ... <div id="myAnchor"> ... </div> The challenge lies in wanting to add the padding only when ...

htmlcss

Is it possible to replace the prototype of an object with a different object?

When an entity is generated, its prototype is established as another entity. Is it possible to alter the prototype of a previously created entity to point to a different object? ...

javascriptprototype

Tips for smoothly transitioning from a simple transform to a rotate effect

I need help with an HTML element that needs to rotate when hovered over. Here is the code I have: The issue I'm facing is that I don't want a transition for translateX, only for the rotation. What steps should I take to achieve this? .cog { ...

css

Using Jquery to dynamically update input values during key events

I am encountering an issue with a select tag. When I use the keydown event to set a value from the dropdown options as follows: $(this).find("option[value='11']").attr('selected', 'selected') The dropdown is displaying 12 in ...

javascriptjqueryhtmlcoffeescript

While typing, React-hook-form is removing the input field when the mode property is enabled

Currently, I am implementing a basic form using react-hook-form version 7 along with Material UI. However, I have encountered an unusual behavior when configuring the mode in useForm({mode: ".."}). Below is a snippet of my code: import { yupResol ...

javascriptreactjsmaterial-uireact-hook-form

Tips for integrating Material-UI's snackbar and input elements within a React application

I recently incorporated Material-UI components into my website design. One of the challenges I encountered was creating a functional interaction between the header component with a search field using mui's InputBase. My goal is to trigger a mui Snackb ...

javascriptreactjsdesign-patternsmaterial-ui

Transitioning to Firebase Authentication

I made the decision to transition away from firebase authentication. To accomplish this, I exported all firebase users along with their email addresses, hashed passwords, salt keys, and other necessary information. Next, I transferred them to a database a ...

javascriptnode.jsfirebase-authenticationscrypt

Shadow border added to each div creates a unique navigation tab for easy access

#container { position: fixed; height: 100%; left: 0px; right: 0px; top: 0px; width: 10%; background-color: blue; } #container>div {} <html> <div id="container"> <div>up</div> <div>down</div> <d ...

htmlcss

onpageshow event behaves as expected exclusively on webkit browsers (triggers function solely when visible on the screen)

I am inserting an HTML file using an object tag. The encompassing div of the object tag is hidden with a display:none property. However, I encounter an issue where the onpageshow event that I placed on the body tag of the HTML object behaves differently a ...

javascripthtmleventswebkitvisible

What is the method for assigning an initial or default value to a date field?

Having trouble implementing a date picker in angularjs and bootstrap due to the following issues: The initial date is not set When trying to open one date picker, all date pickers open Below is my code snippet: http://plnkr.co/edit/elrOTfEOMmUkPYGmKTdW? ...

javascriptangularjsangular-bootstrap

ng filtering with a controller-defined scope

I am currently working on a webpage with AngularJS and I am looking to implement some filters on the site. Here is the HTML code I have: <div ng-repeat="data in datas | filter:{area:course} | filter:{subject:subFilter} | filter:{city:cityFilter}"> ...

javascriptangularjsjson