Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Cameron Maciel
Cameron Maciel
1,433 Points

How to get a table to display, depending on the inputs of the type of shirt and number of colors on front or back.

Here is what i have so far, what i want to do is when someone selects the brand of shirt they want and style, once they chose a number of colors on front it will display a table showing the prices per shirt which the number of Qty

here is what is have so far

` <!DOCTYPE html> <html>

<body>


    <div class='right' id='estimator_spinner' style='display: none;'>
    <img alt="Bluespinner small" src="/assets/bluespinner-small-baa23f90833ab3d7007d90289f08b518.gif" />
    </div>
    </h2>
    <form>
    <div class='row'>
    <div class='columns medium-6 large-12'>
    <select class="estimator-field" id="estimator_brand" name="estimator_brand"><option value="">Select Brand</option><option value="10">Alstyle</option>
    <option value="5">Alternative Apparel</option>
    <option value="8">American Apparel</option>
    <option selected="selected" value="9">Anvil</option>
    <option value="23">Augusta Sportswear</option>
    <option value="11">Bella</option>
    <option value="22">Canvas</option>
    <option value="13">Devon &amp; Jones</option>
    <option value="24">Dickies</option>
    <option value="14">Fruit of the Loom</option>
    <option value="15">Gildan</option>
    <option value="16">Hanes</option>
    <option value="17">Independent Trading Co</option>
    <option value="18">Izod</option>
    <option value="19">Jerzees</option>
    <option value="12">Jonathan Corey</option>
    <option value="26">LAT</option>
    <option value="20">Next Level</option>
    <option value="27">Rabbit Skins</option>
    <option value="25">Royal Apparel</option>
    <option value="21">Tultex</option></select>
    </div>
    <div class='columns medium-6 large-12'>
    <select class="estimator-field" id="estimator_style" name="estimator_style"><option value="">Select Style</option><option value="75">420</option>
    <option value="83">880</option>
    <option value="103">990B</option>
    <option value="74">490</option>
    <option value="162">2184</option>
    <option value="207">923</option>
    <option value="267">71000</option>
    <option value="268">939 (Camo)</option>
    <option selected="selected" value="56">980</option>
    <option value="333">986</option>
    <option value="332">71000FL</option>
    <option value="331">71600FL</option>
    <option value="330">71600</option>
    <option value="241">982</option>
    <option value="99">705B</option></select>
    </div>
    <div class='columns medium-6 large-12'>
    <select class="estimator-field" id="estimator_num_colors_front" name="estimator_num_colors_front"><option value=""># of Colors (Front)</option><option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option></select>
    <input class='estimator-field' id='estimator_jumbo_front' type='checkbox'>
    <label for='estimator_jumbo_front'>
    Front is a
    <span class='has-tip' data-tooltip='' title='Any prints larger than 14in x 17in, up to 17.25in x 23.5in - Only available on Quantity 50 or higher.'>Jumbo Print</span>
    </label>
    </input>
    </div>
    <div class='columns medium-6 large-12'>
    <select class="estimator-field" id="estimator_num_colors_back" name="estimator_num_colors_back"><option value=""># of Colors (Back)</option><option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option></select>
    <input class='estimator-field' id='estimator_jumbo_back' type='checkbox'>
    <label for='estimator_jumbo_back'>
    Back is a
    <span class='has-tip' data-tooltip='' title='Any prints larger than 14in x 17in, up to 17.25in x 23.5in - Only available on Quantity 50 or higher.'>Jumbo Print</span>
    </label>
    </input>
    </div>
    <!-- .columns.large-12 -->
    <!-- %a{:href => '#', :class => 'small button expand'} Show Estimate -->
    <div class='columns large-12'>
    <div class='alert alert-box radius' id='estimator_alert' style='display: none;'>
    You left out a required field!
    </div>
    </div>
    <div class='columns small-12'>
    <div id='estimator_no_info'>
    <p>Please make your selections above to see pricing.</p>
    </div>

`

Mark Casavantes
Mark Casavantes
Courses Plus Student 13,401 Points

Cameron,

On about line 9 I could not find your <h2> tag. On about line 67 and around line 85 I could not find your <input> tag. On your last line do your start divs match your ending divs?

I hope this is helpful.

2 Answers

Warren Leyes
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Warren Leyes
Front End Web Development Techdegree Graduate 31,808 Points
Warren Leyes
.a{fill-rule:evenodd;}techdegree seal-36
Warren Leyes
Front End Web Development Techdegree Graduate 31,808 Points

In order change image based on selected I believe you would need to do a little php or maybe JavaScript targeting the option value. Unfortunately I am not at my comp right now in order to provide a couple examples. PHP would be my choice.

Cameron Maciel
Cameron Maciel
1,433 Points

I would love to see some examples

Warren Leyes
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Warren Leyes
Front End Web Development Techdegree Graduate 31,808 Points
Warren Leyes
.a{fill-rule:evenodd;}techdegree seal-36
Warren Leyes
Front End Web Development Techdegree Graduate 31,808 Points

haven't tried this out yet but i would imagine something along the lines of the following should work: since I haven't tried it out you might need to debug a bit in order to make this work

<php?
//insert this where you want to add image, make value = file name w/out extension (make sure all have same extension type)
if (isset($_POST['estimator_num_colors_back']){  // you might want to use a friendlier name
    $selected = $_POST['estimator_num_colors_back'];
echo "<img alt=\"{$selected}-small.gif\"" . " src=\"/assets/{$selected}.gif\" />"
}
?>
if the extensions do not match you might need to try php switch/case
switch ($i) {
   case 0:
         echo "i=0";
         break;
   case 1:
         echo "i=1";
         break;
   case 2:
         echo "i=2";
         break;
}
Cameron Maciel
Cameron Maciel
1,433 Points

yeah i tried playing with it but i dont much about php. but thanks for tryin tp help, i look in to the php lessons on tree house