Add input value to Alert Dialog Boxes
Question
How i can put the value from input type id "email" to my alert box?
The rest code its working in my opinion,i just cant make the alert box displaying the value from my e-mail form.
Using bootstrap just too make some cool design.
<!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>
2 answers
solution1
1 ACCPTED 2019-03-11 18:39:24
You just need to get the input value inside your check function, since otherwise it's got when you 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; //Moved this into 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>
solution2
1 2019-03-11 19:01:58
I would like to suggest using the [HTML <dialogue> Element] ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog ). Easy to setup and works like a charm!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to disable dialog boxes - alert()?
JQuery Add Value of 2 input boxes to a third
Cannot open dialog or alert boxes in playwright browsers
Add input boxes according to select value of Drop Down
Why does JavaScript dialog boxes (alert, confirm) stop page redrawing?
Multiple Input Boxes in AlertifyJS Prompt dialog
How to alert input value
Dynamically add input boxes into form?
Add onclick to disabled input boxes
How to add errormessages instead of alert boxes in pop up using javascript
Related Tags