Incorporate user input into Alert Dialog Boxes

Would you be able to assist me in displaying the input value from the "email" field in my alert box?
The code seems to be working fine, but I'm having trouble getting the alert box to show the email form value.
I decided to use Bootstrap for some stylish design enhancements.

<!doctype html>
<html lang="en>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
   <div class="container">
      <div class="box">
<form class="text-center border border-light p-5">

    <p class="h4 mb-4">CHANGE E-MAIL</p>

    <p>Input Old E-mail and New E-mal</p>
    <!-- Name -->
    <input type="email" id="email1" class="form-control mb-4" placeholder="E-mail">

    <!-- Email -->
    <input type="email" name="email" id="email" class="form-control mb-4" placeholder="E-mail">

    <!-- Sign in button -->
    <button class="btn btn-dark btn-block" id="tombol_form" type="submit" onclick = "check();">SUBMIT</button>
</form>
</div>
      </div>       
      </div>
  </div>

    <!-- Optional JavaScript -->
    <script type="text/javascript">
        var email=document.getElementById("email").value;

      function check() {
        alert ("Success your email change to: " +email)
       
      
        }
    </script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Answer №1

To ensure that the input value is captured correctly in your check function, make sure to retrieve it within the function itself. Otherwise, it will only capture the input when the website loads, not when you click the button.

<!doctype html>
<html lang="en>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
   <div class="container">
      <div class="box">
<form class="text-center border border-light p-5">

    <p class="h4 mb-4">CHANGE E-MAIL</p>

    <p>Input Old E-mail and New E-mal</p>
    <!-- Name -->
    <input type="email" id="email1" class="form-control mb-4" placeholder="E-mail">

    <!-- Email -->
    <input type="email" name="email" id="email" class="form-control mb-4" placeholder="E-mail">

    <!-- Sign in button -->
    <button class="btn btn-dark btn-block" id="tombol_form" type="submit" onclick = "check();">SUBMIT</button>
</form>
</div>
      </div>       
      </div>
  </div>

    <!-- Optional JavaScript -->
    <script type="text/javascript">
        

      function check() {
        var email=document.getElementById("email").value; //Make sure to include this inside the 'check' function
        alert ("Success your email change to: " +email)     
      }
    </script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

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

Exploring the distinctions between ajax, await, async, and

English is not my strong suit, so please bear with me if my writing seems odd. We have discovered two methods for transitioning from asynchronous ajax calls to synchronous ones. Using async: false Utilizing await Both achieve the same outcome, but I am ...

Having trouble with the functionality of my JavaScript slider

After attempting to incorporate a slider into my website, I encountered an issue where the slider was not functioning as expected. The slider I tried to implement can be found here: https://codepen.io/amitasaurus/pen/OMbmPO The index of the site can be a ...

How to Retrieve the Following Element in a Table Using Javascript

https://jsfiddle.net/en6jh7pa/1/ I am encountering an issue with accessing the next element, as it is returning null. When I pass "this" as the onclick parameter, I expect to be able to grab the next element using this keyword. However, it seems to be re ...

Designing an architecture for a Java, Android, and database application - what will the final app's appearance be

I am currently working on a website where users need to complete tasks using an Android device: Fill out a simple HTML document. Sign the document on their Android device. Save the data entered into a database on the website. Some key points to consider ...

Tailored Filtering and Sorting Features for Material Table

In the table, there is a column labeled Active which contains data represented as 1 or 0 for active and inactive states. Instead of displaying the values as 1 or 0, a function called generateFlagText uses the render prop to show an MUI Chip component base ...

Gradually bringing a tag into view, gently fading it away, and then altering the text before beginning the cycle anew

I have a situation where an tag's content is being dynamically changed with jQuery and then faded in and out using the Velocity JS library along with the setInterval function. Initially, everything works smoothly for about 30 seconds. However, after ...

The pageSize in React's Material Table does not reflect dynamic updates

Currently, I am attempting to implement pagination for material table data using TablePagination. One issue I am facing is that the pageSize property, initially defined as a state variable, does not update when the selected pageSizeOptions change. Despite ...

Resolving the issue of "Cannot set properties of null (setting 'innerHTML') at HTMLInputElement.loader" involves identifying the root cause and implementing

Need assistance with this code. Although I believe everything is correct, it still isn't working as expected. The error mentioned in the title comes up whenever I try to use it. I've made multiple modifications to the code but it's still not ...

What causes the gap between a parent div and inner div in react components?

I have a relatively simple React component that I'm working on. Even though I am quite new to React, I have tried various methods to eliminate the white space issue but so far have been unsuccessful in determining what is causing it. Negative margin s ...

arrow function implemented in a React hook for handling onClick event

From my understanding, placing an arrow function in the JSX creates a new reference of a new function each time it is triggered. For example: <p onClick={() => handleClick() /> In older versions of React with classes, we could do this: <p onCl ...

Selecting the parent span element using jQuery

Is there a better way to display text in the parent <div>'s <span>? I'm having trouble with using spans and .parent(), any advice would be appreciated. HTML: <div> <span></span> <!--the span where I need to show ...

Ways to convert asynchronous operations of Node.js into synchronous operations in Node.js

Using node js, I am making multiple AWS API calls within a for loop. var prodAdvOptions = { host : "webservices.amazon.in", region : "IN", version : "2013-08-01", path : "/onca/xml" }; prodAdv = aws.createProdAdvCli ...

JavaScript - the global and local variable dilemma

REVISED2: I'm encountering an issue with converting images to canvas using Pixastic in HTML5. How can I 'return' this converted image back to a global variable? Any suggestions? <img id="mainIllustration" alt="main illustration" src="Img ...

Utilizing jQuery to compute dynamic fields depending on selection in a dropdown menu

Creating a Ruby app for tracking bets, I have designed a small form that captures various details including date and match. However, the most crucial components of this form are the "stake" and "odd" text fields. To enhance user experience, I have incorpor ...

Contact on the go with our handy mobile contact form

Having some difficulties with the contact form on my website. The link to the form is: here. I am currently working on making the form mobile-friendly (the rest of the site scales down using @mobile screen tags in the CSS). The form is stacked, so there ...

Settings for the packaging of web components

Is there a way to configure a web component in vue.config.js and separate the iconfont.css section when building? I am using the vue-cli-service build --target wc-async --name chat-ui src/views/Chat/Launcher.vue --report command to package the web compon ...

Generate random div elements and insert them dynamically into a fixed-sized container using AngularJS. The number of div elements created can range anywhere from 0 to

Within a div of fixed size, dynamically generated div elements are displayed using ng-repeat. The inner divs should adjust their size to accommodate the number of child divs present - for example, if only one div is present, it should take up 100% of the s ...

Two elements occupy the rest of the vertical space

In the center, there is a div with content inside. I want the top and bottom divs to occupy the remaining space. Similar to this example <div class="container"> <div class="top"> </div> <div class="middle"> C ...

only a single backdrop filter can be in use at any given moment

Experimenting with backdrop-filter in Chrome 76. I'm working on a menu with 2 divs, each with a backdrop-filter applied. The first div is displaying the filter effect perfectly, but the second one isn't. Interestingly, when I remove the filter fr ...

Utilizing JavaScript to Retrieve Selected Parameter in SSRS Report

Currently, I am incorporating an SSRS report into my website using Iframe. I aim to share a link to the specific filtered report, which is why I require knowledge of the report's parameters. My query pertains to how I can identify these parameters (e ...