JavaScript/HTML: How to display all input values before hitting "submit" button?

Question

I have a multi-step form and on the final page, I want to display all of the user's inputs from the previous pages (before clicking the "submit" button). How can I do this with JavaScript? I've tried the following, but the input values on the final page still show up as blank.

HTML/JS

{% extends 'layout.html' %}

{% block body %}

<form method="POST" id="regForm" action="{{ url_for('pipeline') }}">

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

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

<!-- Review page where I want all the input values to be displayed -->

  <div class="tab">
    <h3>Review</h3>
        <label>Start Point: <span id="start_point_label">{{ START_POINT }}</span></label>
        <label>QC: <span id="qc_label">{{ QC }}</span></label>
        <label>Input S3 Bucket: <span id="input_uri_label">{{ INPUT_URI }}</span></label>
        <label>Output S3 Bucket: <span id="output_uri_label">{{ OUTPUT_URI }}</span></label>
  </div>
</form>

<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>

{% endblock %}

UPDATE 1

i) Updated the inputs to have an id:

  <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>

ii) Updated the JS to put the # inside the quotes

<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>

Should be seeing errors in browser console from code shown. Fix the `#` outside quotes in your selectors and it should work — charlietfl, Aug 31 '18 at 22:22
@charlietfl: are you saying the `#` needs to be inside the quotes or outside the quotes? — claudiadast, Aug 31 '18 at 22:24
Inside... selectors are strings and strings must be quoted. Am also assuming the server side code generates the id's shown for the inputs. Don't see those ID's in the markup — charlietfl, Aug 31 '18 at 22:24
I tried that and it didn't change anything. And the IDs are coming from the `` in the HTML code. — claudiadast, Aug 31 '18 at 22:29
@charlietfl: Oh I see. I added Ids for the inputs and am still having the same problem (see updates above). — claudiadast, Aug 31 '18 at 22:37
Ok but ID's must be unique and the ones in your jquery aren't the same as `input_uri` — charlietfl, Aug 31 '18 at 22:41
@charlietfl: Do you mind demonstrating what you mean via code? — claudiadast, Sep 04 '18 at 17:59

score 0 · Answer 1 · answered Sep 07 '18 at 23:32

$(function() {
 $('#my_form').change(function(){
  var str = "<em>First name:</em><strong> " + $( "#name" ).val() + "</strong><br><em>Last name:</em><strong> " + $( "#surname" ).val() + "</strong><br><em>My car:</em><strong> " + $( "select#cars option:selected" ).text() + "</strong><br><em>My country:</em><strong> " + $( "select#countries option:selected" ).text() + "</strong>";

  $('#check_before_submit').html( str );
 });

 $( "#my_form" ).on( "submit", function( event ) {
  event.preventDefault();
  var str = "<em>First name:</em><strong> " + $( "#name" ).val() + "</strong><br><em>Last name:</em><strong> " + $( "#surname" ).val() + "</strong><br><em>My car:</em><strong> " + $( "select#cars option:selected" ).text() + "</strong><br><em>My country:</em><strong> " + $( "select#countries option:selected" ).text() + "</strong><br><em>Form's query-string:</em><strong> " + $( this ).serialize() + "</strong>"; // the query-string will use the "name" attribute as key and the "value" attribute as value

  $('#check_before_submit').html( str );
 });
});

@import url('https://fonts.googleapis.com/css?family=Roboto');

* {
 border: 0;
 margin: 0;
 padding: 0;
}
body {
 padding: 20px;
 background: #e2e1e0;
 font-family: 'Roboto', sans-serif;
}
form {
 margin: 20px;
}
/*https://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff/18853002#18853002*/
select {
 width: 70px;
 padding: 5px;
 border: none;
 border-bottom: 1px solid rgba(0,0,0, 0.12);
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 -ms-border-radius: 0;
 -o-border-radius: 0;
 border-radius: 0;
 box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

 color: #5c616c;
 color: rgba(0,0,0,0);
 text-shadow: 0 0 0 #5c616c;

 -webkit-transition: box-shadow 0.6s ease-in-out;
 -moz-transition: box-shadow 0.6s ease-in-out;
 -ms-transition: box-shadow 0.6s ease-in-out;
 -o-transition: box-shadow 0.6s ease-in-out;
 transition: box-shadow 0.6s ease-in-out;
}
@-moz-document url-prefix() {
 ::-moz-focus-inner {border: none}
 select:-moz-focusring {
  color: transparent;
  text-shadow: 0px 0px 0px #5c616c;
 }
}
a, a:visited, a:focus, a:active {
 text-decoration: none;
 color: #718e9e;
 outline: 0;
}
.sliding-middle-out {
 display: inline-block;
 position: relative;
 padding-bottom: 1px;
}
.sliding-middle-out:after {
 content: '';
 display: block;
 margin: auto;
 height: 1px;
 width: 0px;
 background: transparent;

 -webkit-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
 -moz-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
 -ms-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
 -o-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
 transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
}
.sliding-middle-out:hover:after {
 width: 100%;
 background: #718e9e;
 outline: 0;
}
select, select:active, select:focus, select:hover {
 outline: 0;
}
select:hover {
 box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
/* Use custom arrow */
.mdl-selectfield select {
 -webkit-appearance: none;
   -moz-appearance: none;
    appearance: none;
}
.mdl-selectfield {
 position: relative;
}
.mdl-selectfield:after {
 position: relative;
 top: 1em;
 right: 1em;
 /* Styling the down arrow */
 width: 0;
 height: 0;
 padding: 0;
 content: '';
 border-left: .25em solid transparent;
 border-right: .25em solid transparent;
 border-top: 0.375em solid rgba(0,0,0, 0.12);
 pointer-events: none;
}
input {
 padding: 5px;
 box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 -ms-border-radius: 0;
 -o-border-radius: 0;
 border-radius: 0;

 -webkit-transition: box-shadow 0.6s ease-in-out;
 -moz-transition: box-shadow 0.6s ease-in-out;
 -ms-transition: box-shadow 0.6s ease-in-out;
 -o-transition: box-shadow 0.6s ease-in-out;
 transition: box-shadow 0.6s ease-in-out;
}
input:hover {
 box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
label, input, form, select {
 margin-bottom: 10px;
}
h6 {
 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">
 <label for="name">First name: </label>
 <input type="text" id="name" name="Firstname" value="" placeholder="Type your name here...">
 <br>
 <label for="surname">Last name: </label>
 <input type="text" id="surname" name="Lastname" value="" placeholder="Type your surname here...">
 <br>
 <div class="mdl-selectfield">
  <span>
   My car: <select id="cars" name="Cars">
    <option value="Volvo">Volvo</option>
    <option value="Saab">Saab</option>
    <option value="Fiat">Fiat</option>
    <option value="Audi">Audi</option>
   </select>
  </span>
 </div>

 <div class="mdl-selectfield">
  <span>
   My country: <select id="countries" name="Countries">
    <option value="USA">USA</option>
    <option value="UK">UK</option>
    <option value="Spain">Spain</option>
    <option value="Italy">Italy</option>
   </select>
  </span>
 </div>
 <br>
 <input type="submit" value="Submit" title="Get form's query-string">
</form>

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

The final query-string, on submit, can be used to manipulate the user's choices

JavaScript/HTML: How to display all input values before hitting "submit" button?

1 Answers1