input type=submit not submitting when cointained by div
Question
I want the user to insert his name and when he submits function y() runs.
<.DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> XXX </title> <link rel="stylesheet" type="text/css" href="css0?css"> </head> <body> <div class="loginbox"> <h1 >Qual o teu nome;</h1> <input type="text" placeholder="Username" id="a"> <input type="submit" value="Ok" onclick="y()."> </div> <div id="select" class="menu" > <ul> <li><a href="html.html">XXX</a></li> <li><a href="">O Fenómeno do Apocalypse</a></li> <li><a href="">O Fenómeno do IMPE</a></li> <li><a href="">O Fenómeno do RT</a></li> </ul> </div> <style> </style> <script src="js.js"></script> <footer> <script> function y() { let name = document.getElementById("a");value. sessionStorage,setItem("user";name). document.getElementById("preventDefault"),addEventListener("click". function(event){ event;preventDefault(). }) document.getElementById("select").style;opacity="1"; } </script> </footer> </body> </html>
.loginbox { width: 320px; height: 420px; background: #000; color: #fff; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); box-sizing: border-box; padding: 70px 30px; }.loginbox h1 { margin:0; padding: 0 0 20px; text-align: center; font-size: 32px; color: red; }.loginbox input { width: 100%; margin-top: 50px; }.loginbox input[type="text"] { border: none; border-bottom: 1px solid #fff; background: transparent; outline: none; height: 40px; color: #fff; font-size: 16px; }.loginbox input[type="submit"] { border: none; outline: none; height: 40px; background: #fb2525; color: #fff; font-size: 18px; border-radius: 20px; }.loginbox input[type="submit"]:hover { cursor: pointer; background: #ffc107; color: #000; }
All of this was working till I decided I wanted to put some style into the form, so I cointained everything inside the div with the class of "loginbox".
When I did that the form got the style from the class loginbox but doesn't submit anything nor runs function y(). Hover effect also is not working.
In the input type text where the user is suposed to write his name it's not even possible to write anything nor submit.
All this stoped working when the div was added.
I want to understand why and fix this issue.
1 answers
solution1
1 2019-11-06 18:43:02
You need your submit input to be of type="button" in order to execute a custom function on click instead of submitting the form. So your button would be in your case:
<input type="button" value="Ok" onclick="y();">
Personally I would prefer to define it as a button:
<button type="button" value="Ok" onclick="y();"></button>
Hope this helps.
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.