Kyle Schmelzer Kyle Schmelzer - 26 days ago 9
HTML Question

Inputing info in forms, then recalling it via jquery

I have a page with 3 divs that show one after another.

The first div shows three pictures, you choose which you like best by clicking the link below the picture, which also takes you to div 2.

Div 2 is a bunch of input boxes and a drop down selector. Once you fill out all the forms, click the next link which takes you to div 3.

Div 3 is a review of what you selected. It should show what picture you selected in div 1, and what you put in the text boxes / selector in div 2.

I have no idea how to go about doing this, and im really struggling, any and all help is appreciated.

JSFiddle - https://jsfiddle.net/7yuuz8d4/27/



/* JS - */
$(document).ready(function () {
$('#div1').show();
$('#div2').hide();
$('#div3').hide();

$('#div1').on('click', 'a', function (e) {
$('#div1').hide();
$('#div2').show();
});

$('#div2').on('click', 'a', function (e) {
$('#div2').hide();
$('#div3').show();
});
});

/*$(document).ready(function () {
$('#div1').on('click', 'a', function (e) {
var stylechoice = $(this).attr('value');
});
$("#height").prop(function(){
var height = $('#height').prop('value);
});
});
*/

/*$(document).ready(function () {
if(document.getElement
});
*/

/*if(document.getElementById('.col-md-4').clicked) {
$("#casual").show("#style1");
} else if {
$("#street").show("#style1");
} else if {
$("#classic").show("#style1");
});*/

<!-- Html -->

<!doctype html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>

<div class="container">
<div id="div1">
<h2>Pick your style</h2>



<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="casual">Casual &raquo;</a>
</div><!--Closes Col-md-4-->

<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="street">Street &raquo;</a>
</div><!--Closes Col-md-4-->

<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="classic">Classic &raquo;</a>
</div><!--Closes Col-md-4-->
</div><!--Closes div1-->

<div id="div2">
<h3>Measurements</h3>
<h5>Measurements can be in inches or centimeters, just please notate which you use</h5>
<form>
Height:<br>
<input type="text" name="height" id="height"><br>
Neck:<br>
<input type="text" name="neck" id="neck"><br>
Arms:<br>
<input type="text" name="arms" id="arms"><br>
Waist:<br>
<input type="text" name="waist" id="waist"><br>
Legs:<br>
<input type="text" name="legs" id="legs"><br>
Shoes:<br>
<input type="text" name="shoes" id="shoes"><br>

Shirt size:<br>
<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>
</form>
<a class="btn btn-primary btn-lg" href="#div3" role="button">Next &raquo;</a>
</div><!--Closes div2-->


<div id="div3">
<h3>Review</h3>
<p>Here's the info you gave us, please double check it:</p>
<p>Style:</p>
<p>Height:</p>
<p>Neck:</p>
<p>Arms:</p>
<p>Waist:</p>
<p>Legs:</p>
<p>Shoes:</p>
<p>Shirt size:</p>
<p>Finally, any notes for our fashion aids?</p>
<textarea name="message" rows="10" cols="100">
Any other concerns you have we should know about? Do you have big thighs, long neck, big arms, etc. anything and anything that can help with the fitting of your clothing is extremely helpful!
</textarea>
<div id="display">
<a class="btn btn-primary btn-lg" href="success.html" role="button">Submit &raquo;</a>
</div>

</div><!--Closes div3-->
</div><!--Closes container-->

</body>





Note: I commented out what i have been trying to work on, and failing with. I have the
div
show/hide jquery working, im just putting it in here so that you know what i have so far, and that the solution anybody provides doesnt break that code in the meantime.

Answer

Hopefully this should get you started:

https://jsfiddle.net/xszmdx3a/

Create some empty tags in your third div to hold the content:

<p>Style:<span id="style-d3"></span></p>
<p>Height: <span id="height-d3"></span></p>

I added an extra class to your links in the first div:

<a class="btn btn-primary btn-lg picture-link" href="#div2" role="button" value="casual">Casual &raquo;</a>

And then add an event handler for the image:

        $('.picture-link').click(function() {
            var imgTag = $(this).parent().find('img')[0];
          $(imgTag).clone().appendTo('#style-d3');
        });

Similarly for the other fields:

        $('#height').change(function() {
            $('#height-d3').html($(this).val());
        });
Comments