У меня есть один div с показанной формой и один div со скрытой таблицей. Когда я нажимал кнопку «СЛЕДУЮЩАЯ», она использовала бы jQuery, чтобы извлечь информацию из формы и заполнить таблицу, одновременно скрывая div формы и показывая div таблицы.
Однако сейчас я пытаюсь подключить его к Flask API, и я получил страницу для отображения, но когда я нажимаю NEXT, div формы скрывается, и таблица заполняется и отображается, но затем она немедленно исчезает и возвращается к форме ( сторона сервера показывает, что выполняет запрос GET сразу после нажатия кнопки «Далее», и заполненная таблица отображается и сразу исчезает). Как я могу остановить его от выполнения запроса GET и просто заполнить таблицу, ожидая другого нажатия кнопки? Является ли запрос GET чем-то, что происходит автоматически, когда я извлекаю данные из формы, используя jQuery?
Вот HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{{ url_for('static', filename='css/jdrequest_form.css') }}">
</head>
<body>
<div class = "header">
<div id=inner> <h1>Grand Valley Water Users Association</h1> </div>
</div>
<form class="grid-container">
<section class="title box"><h3>Water Request</h3></section>
<section class="serial-label spec-label">Serial Number</section>
<section class="serial-input spec-input-serial">
<input type="text" name="serialNum">
</section>
<!-- A BUNCH MORE INPUT BOXES WITH LABELS... -->
<section class="send-request box"><button class="nextBtn">Next</button></section>
</form>
<!--
Start of Confirmation Page
This is hidden by default and appears in place of the Water Request Form
when the "Next" button is clicked (via the JavaScript file)
-->
<div class = "confirm">
<div class = "confirmInstructions">
<p>Please review your order carefully before submitting it.</p>
</div>
<table>
<tbody>
<tr>
<td>Serial Number:</td>
<td id="serial-num"></td>
</tr>
<!-- A BUNCH MORE TABLE ENTRIES -->
</tbody>
</table>
<div class="edit-submit">
<button class="editBtn">Edit Request</button>
<button class="submit-btn" href="/">Submit Request</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{{ url_for('static', filename='js/jdrequest_form.js') }}"></script>
</body>
</html>
Вот jQuery:
/*
* Upon clicking the "Next" button, this will hide the request form
* and copy all of the values from the form into a table for the
* client to review.
*/
$("button.nextBtn").click(function(){
$(".grid-container").hide();
$("#serial-num").text($("[name='serialNum']").val());
/* AND A BUNCH MORE OF THE SAME SORT OF THING*/
$(".confirm").show();
});
$("button.editBtn").click(function(){
$(".confirm").hide();
$(".grid-container").show();
});
И вот что у меня есть Flask:
from flask import Flask, render_template, redirect, request, url_for
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
# initialize database with settings from app
db = SQLAlchemy(app)
class Form_Items(db.Model):
id = db.Column(db.Integer, primary_key=True)
serial_num = db.Column(db.Integer, nullable=False)
# AND A BUNCH OF OTHERS THAT DON'T MATTER
# IGNORE THIS. I HAVEN'T MESSED WITH IT YET
def __repr__(self):
return '<Task %r>' % self.id
@app.route('/', methods=['POST', 'GET'])
def jdrequest_form():
if request.method=='POST':
# A BUNCH OF DATABASE STUFF THAT DOESN'T MATTER
else:
return render_template('jdrequest_form.html')
if __name__ == "__main__":
app.run(debug=True)
Наконец, вот что говорит приложение Flask в терминале, когда я нажимаю кнопку СЛЕДУЮЩАЯ:
127.0.0.1 - - [27 / Mar / 2020 17:45:30] "GET / HTTP / 1.1" 200 - 127.0.0.1 - - [27 / Mar / 2020 17:45:30 ] "GET /static/js/jdrequest_form.js HTTP / 1.1" 200 - 127.0.0.1 - - [27 / Mar / 2020 17:45:30] "GET /static/css/jdrequest_form.css HTTP / 1.1 "200 - 127.0.0.1 - - [27 / Mar / 2020 17:45:48]" GET /? SerialNum = 45645 & meterReading = 456 & requestType = Change & sF = 456 & changefromsF = 456 & changetosF = 456 & date = 2020-03-10 & lateral = 456 & явка = 456 & примечания & xfzgf = zsdfd + asdf HTTP / 1.1 "200 -
Я не хочу, чтобы какие-либо запросы происходили, пока я фактически не нажму кнопку SUBMIT REQUEST (которая в данный момент ничего не делает, но кнопка EDIT REQUEST s должен скрыть таблицу и вернуть форму обратно без запросов, верно?). Если у кого-то есть идея, где я ошибся, я бы хотел услышать это, чтобы я мог продолжить этот проект. Спасибо!