how to post a chosen link/text input as an output answer

Question

Quite simple, if I have two pics to choose from, and a text box and selector. I want an output showing what pic i clicked, what was entered in the text box, and what option i selected. For example:

JSFiddle - https://jsfiddle.net/vdqz2esz/2/

<!--STYLE-->
    <img src="Images/casual3.jpg">
        <a class="btn btn-primary btn-lg" href="#div2" role="button" value="casual" id="casual">Casual &raquo;</a>

    <img src="Images/Street2.jpg">
        <a class="btn btn-primary btn-lg" href="#div2" role="button" value="street" id="street">Street &raquo;</a>

<!--height-->
    <form>
                  Height:<br>
                  <input type="text" name="height" id="height"><br>
    </form>

<!--shirt size-->
    <select>
                      <option value="small" id="small">Small</option>
                      <option value="medium" id="medium">Medium</option>
                      <option value="large" id="large">Large</option>
                      <option value="xlarge" id="xlarge">X-Large</option>
                      <option value="xxlarge" id="xxlarge">XX-Large</option>
    </select> 
<a class="btn btn-primary btn-lg" href="#" role="button">Submit &raquo;</a>
<!--output here-->
<p id="style1">Style:</p>
<p id="height1">Height:</p>
<p id="shoes1">Shoes:</p>

Using Jquery, how would i go about doing this?

Was trying some stuff like this, but wasnt working. Im grasping at straws here...

$('#height1').html("#height");

Thank you as usual.

Answer 1

There is a lot missing from the code.

No Jquery reference in the Fiddle is just the beginning

Try this Updated Fiddle for the solution

Firstly add some <span> inside your output <p> tags

<!--output here-->
<p id="style1">Style:<span></span></p>
<p id="height1">Height:<span></span></p>
<p id="shoes1">Shoes:<span></span></p>

Your JQuery code should look like

$('.submit').click(function(){
  $('#height1 span').text($('select option:selected').val());
  $('#shoes1 span').text($('#height').val());
});

Answer 2

Please see the snippet below, which shows how to display the value of the input field and select box. This approach will not work for the images though, because they are no form elements. For how to make images behave like radio buttons, you could see this question on SO.

$('.submit').click(function() {
  $('#height1').html($('input#height').val())
  $('#shoes1').html($('select').val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--STYLE-->
<img src="Images/casual3.jpg">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="casual" id="casual">Casual &raquo;</a>

<img src="Images/Street2.jpg">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="street" id="street">Street &raquo;</a>

<!--height-->
<form>
  Height:
  <br>
  <input type="text" name="height" id="height">
  <br>
</form>

<!--shirt size-->
<select>
  <option value="small" id="small">Small</option>
  <option value="medium" id="medium">Medium</option>
  <option value="large" id="large">Large</option>
  <option value="xlarge" id="xlarge">X-Large</option>
  <option value="xxlarge" id="xxlarge">XX-Large</option>
</select>
<a class="btn btn-primary btn-lg submit" href="#" role="button">Submit &raquo;</a>
<!--output here-->
<p id="style1">Style:</p>
<p>Height: <span id="height1"></span></p>
<p>Shoes: <span id="shoes1"></span></p>

Also, i would recommend to improve structure your HTML a bit. All form elements like input and select should be children of the form tag.