Как использовать JavaScript / JQuery для отображения сводки всех значений ввода HTML в форме? - PullRequest
Новая
       9

Как использовать JavaScript / JQuery для отображения сводки всех значений ввода HTML в форме?

0 голосов
/ 05 сентября 2018

Я пытаюсь отобразить все свои входные значения HTML на последней странице формы (до нажатия кнопки «Отправить»), однако мне не удается распечатать значения на странице.

Вот то, что я пытался сделать до сих пор, и когда я запускаю это, значения на последней странице отображаются пустыми. Возможно, есть лучший подход, чем этот?

HTML: 

  <div class="tab">
    <label>Start Point</label>
    {{ form.start_point(placeholder="Start point..", oninput="this.className = ''", id="start_point") }}
    <label>QC</label>
    {{ form.qc(placeholder="QC...", oninput="this.className = ''", id="qc") }}
  </div>

  <div class="tab">
    <label>Input S3 Bucket</label>
    {{ form.input_uri(placeholder="(e.g. s3://pipeline-run/fastqs/)...", oninput="this.className = ''", id="input_uri") }}
    <label>Output S3 Bucket</label>
    {{ form.output_uri(placeholder="(e.g. s3://pipeline-run/results/)...", oninput="this.className = ''", id="output_uri") }}
  </div>

JavaScript: 

<script>

$(function() {
    $('#start_point').change(function(){
        $('#start_point_label').text($(this).val());
    });
    $('#qc').change(function(){
        $('#qc_label').text($(this).val());
    });
    $('#input_uri').change(function(){
        $('#input_uri_label').text($(this).val());
    });
    $('#output_uri').change(function(){
        $('#output_uri_label').text($(this).val());
    });
});

</script>

ОБНОВЛЕНИЕ 1 : HTML-результат выполнения «проверки» в области между метками ввода. 

<input id="input_uri" name="input_uri" oninput="this.className = ''" placeholder="(e.g. s3://pipeline-run/fastqs/)..." required="" type="text" value="" class=""> == $0

ОБНОВЛЕНИЕ 2: мой класс Form, где я определяю пользовательские вводы 

from flask_wtf import FlaskForm
from wtforms import StringField, TextField, SubmitField, IntegerField, SelectField, validators
import boto3

s3_client = boto3.client('s3')
ec2_client = boto3.client('ec2')

class InputForm(FlaskForm):

    bucket_choices = [("", "---")] + [("", bucket["Name"]) for bucket in s3_client.list_buckets()["Buckets"]]

    stack_name = StringField('STACK NAME', validators=[validators.required()])
    deploy_bucket = SelectField('PIPELINE DEPLOYMENT BUCKET', validators=[validators.required()], choices=bucket_choices)

    input_uri = StringField('INPUT BUCKET', validators=[validators.required()])
    output_uri = StringField('OUTPUT BUCKET', validators=[validators.required()])

ОБНОВЛЕНИЕ 3: У меня есть несколько входов с выпадающими опциями, но когда они распечатываются на последней странице формы, на каждом из этих входов выводится полный набор выбранных опций.

Как это выглядит: 

Pipeline Deployment Bucket: CFNTemplateClaudia_Sandboxfastq---GRCh38-referencesGRCh38wgs---
Key Pair: CFNTemplateClaudia_Sandboxfastq---GRCh38-referencesGRCh38wgs---
Start Point: CFNTemplateClaudia_Sandboxfastq---GRCh38-referencesGRCh38wgs---
QC: CFNTemplateClaudia_Sandboxfastq---GRCh38-referencesGRCh38wgs---

Как это должно выглядеть: 

Pipeline Deployment Bucket: CFNTemplate
Key Pair: Claudia_Sandbox
Start Point: fastq
QC: ---

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

Как насчет использования $.serialize()?

Это даст вам все переменные со своими значениями в форме, которая будет отправлена ​​при отправке этой формы: 

var Str=$('form').serialize();

Строка будет в URL-синтаксисе (например, генерируется путем отправки формы с method="get").

0 голосов
/ 06 сентября 2018

Может быть, это то, что вы хотите; если вы заполните области input, тег span обновит свое содержимое: 

$(function() {
  $('#my_form').change(function(){
    var str = "First name: " + $( "#name" ).val() + "<br>Last name: " + $( "#surname" ).val() +"<br>";

    $('#check_before_submit').html( str );
  });
});
* {
  border: 0;
  margin: 0;
  padding: 0;
}
form {
  margin: 20px;
}
label, input {
  margin-bottom: 10px;
}
#check_before_submit {
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Form</h2>

<form id="my_form" action="/action_page.php">
  <label for="name">First name: </label><input type="text" id="name" name="firstname" value="" placeholder="Your name here...">
  <br>
  <label for="surname">Last name: </label><input type="text" id="surname" name="lastname" value="" placeholder="Your surname here...">
  <br>
  <input type="submit" value="Submit">
</form>

<span id="check_before_submit"></span>

JSFiddle демо

Стилизованный макет на CodePen

...