Вы не используете форму правильно, и я не уверен, чего вы пытаетесь достичь, но вот как вы должны использовать форму
В вашем HTML
<form method="POST" id="regForm" action="{{url_for('pipeline')}}">
<h1>Pipeline Input</h1>
<div class="tab">
<h3>Pipeline Infrastructure:</h3>
<label>Stack Name</label>
{{ form.stack_name(placeholder='yourplaceholder', oninput="this.className....") }}
<label>Pipeline Deployment S3 Bucket</label>
{{ form.bucket(placeholder='bucket name')}}
<label>Key Pair</label>
{{ form.key_pair }}
<!-- Current attempt at accessing the input data -->
<div class="tab">
<h3>Pipeline Input Review:</h3>
<label>Stack Name: <span id="stack_label">{{ STACK_NAME }}</span></label>
<label>Pipeline Deployment S3 Bucket: <span id="bucket_label"> {{ BUCKET }}</span></label>
<label>Key Pair: <span id="key_pair_label">{{ KEY_PAIR }}</span></label>
</div>
</form>
В вашем app.py
@app.route('/', methods=['GET', 'POST'])
def pipeline():
form = InputForm(request.form)
STACK_NAME = ''
BUCKET = ''
KEY_PAIR = ''
if request.method == 'POST':
STACK_NAME = request.form['stack_name'] # this is how you access the value of the input
BUCKET = request.form['bucket']
KEY_PAIR = request.form['key_pair']
return render_template('pipeline-alt.html',
title='Pipeline Input',
form=form,
STACK_NAME=STACK_NAME,
BUCKET=BUCKET,
KEY_PAIR=KEY_PAIR
)
Если вы хотите использовать WTForm в своем шаблоне, вы можете получить доступ к входам, используя {{form.input_name}}. Это отобразит тег HTML <input> в вашей форме (или <select> в зависимости от определения формы). Не используйте {{form.inpute_name.data}}
По вашему мнению, для доступа к данным, отправленным с помощью формы, которую вы используете request.form['input_name'], если метод формы имеет тип POST или request.args.get('input_name'), если метод формы имеет тип GET
UPDATE
Вы должны убедиться, что первый элемент вашего выбора кортежа не является пустой строкой, поскольку это значение передается вашему представлению при отправке формы.
попробуйте изменить его следующим образом:
class InputForm(FlaskForm):
bucket_choices = [("", "---")] + [('bucket["Name"]', bucket["Name"]) for bucket in s3_client.list_buckets()["Buckets"]]
ref_choices = [("", "---")] + [('bucket["Name"]', bucket["Name"]) for bucket in s3_client.list_buckets()["Buckets"]]
key_choices = [("", "---")] + [('pair["KeyName"]', pair["KeyName"]) for pair in ec2_client.describe_key_pairs()["KeyPairs"]]
stack_name = StringField('STACK NAME', validators=[validators.required()])
bucket = SelectField('PIPELINE DEPLOYMENT BUCKET', validators=[validators.required()], choices=bucket_choices)
key_pair = SelectField('KEY PAIR', validators=[validators.required()], choices=key_choices)
ОБНОВЛЕНИЕ № 2
Вы не указали в исходном вопросе, что хотите отразить изменение ввода непосредственно перед отправкой формы. Это возможно только с использованием JavaScript.
Добавьте приведенный ниже код JavaScript в ваш HTML. Это прослушиватели событий, которые прослушивают любые изменения в ваших входах формы. Каждый раз, когда обнаруживается изменение, соответствующий текст метки будет меняться соответственно. Также проверьте обновленный HTML-код выше. Я добавил <span> теги внутри ваших ярлыков, чтобы отразить изменения из кода JavaScript
$(function(){
$('#stack_name').on('change keyup paste', function(){
$(#'stack_label').text($(this).val());
});
$('#bucket').change(function(){
$(#'bucket_label').text($(this).val());
});
$('#key_pair').change(function(){
$(#'key_pair_label').text($(this).val());
});
});