Как видно из названия, я не могу заставить event.preventDefault работать над отправкой POST-запроса моей формы.
Используя стандартные js, flask, css и html.
АСФАИК нигде нет ошибок.
Если бы я мог просто оставить оверлей там, где он есть, и все равно отправить сообщение обратно в колбу, это помогло бы мне на тонну !! Заранее спасибо.
Вот мои коды ...
Настой
defaultSettings = {'key': 'value'}
@app.route('/', methods=['GET', 'POST'])
def index():
return render_template('index.html', defaultSettings=defaultSettings)
if __name__ == '__main__':
app.run(debug=True)
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="settings" onclick="openSettings()">
<p>Settings</p>
<img src="/static/menu-icon.png" alt="settings">
</div>
<div id="settingsID" class="SettingsMenu">
<div class="saved" id="saved">
<p id="saveText">saved!</p>
</div>
<a href="javascript:void(0)" class="closebtn" onclick="closeSettings()">×</a>
<div class="SettingsMenu_content" id="SettingsMenu_content">
<form method='POST' id="settingsForm">
<div class="menu_div">
<input type="text" name="name" value="{{ defaultSettings['key'] }}">
<div class="configuration">
<input type="button" value="Save" onclick="handleForm()" id="settings_submit">
<input type="button" value="Close" onclick="closeSettings()">
</div>
</form>
</div>
</div>
</body>
</html>
Javascript (проблемная часть!)
"use strict";
function openSettings() {
document.getElementById('settingsID').style.width = "100%";
}
function closeSettings() {
document.getElementById('settingsID').style.width = "0%";
}
function handleForm() {
document.getElementById('settingsForm').submit(function(event) {
event.preventDefault();
event.stopPropagation();
});
}
css (написал как можно меньше, но даже не знаю, актуально ли это ...)
html {
height: 100vh;
width: 100vw;
}
body {
margin: 0;
background: #B0BEC5;
color: #546E7A;
font-family: Century Gothic;
width: 100%;
height: 100%;
padding: 0;
border: none;
}
.settings {
position: absolute;
display: block;
width: 180px;
height: 64px;
right: 20px;
margin: 15px;
transition: 0.3s;
}
.SettingsMenu {
float: right;
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.7);
//background-color: rgba(26,32,38, 0.7);
overflow-x: hidden;
transition: 0.4s;
}
.SettingsMenu_content {
position: relative;
top: 25%;
width: 60%;
text-align: left;
margin: 30px 15% auto 25%;
opacity: 1;
}
.SettingsMenu a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.SettingsMenu .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}