0

I'm making this jQuery order form and I'm having some challenges because I'm fairly new to JavaScript.

My goal: When someone selects the secondary fields the price will show up in the class="item-price" input field. For instance: Someone clicks "8x10" and then "No Frame" the price for No Frame will show up in "item-price" field.

I have these fields that are put in on selected of another field. Below is my HTML and JavaScript:

<form action="" method="post" class="form" name="form">
<div class="selection">
<div class="selection-announcement">Select Your Size</div>
<div class="selection-announcement-hidden">Select Your Frame</div>
<div class="selection-announcement-hidden2">Select Your Giclee Type</div>
</div>
<div class="input" id="8x10">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="8x10" />
        <h2>8x10</h2>
    </label>
    <div><span></span></div>
</div>

<div class="input" id="12x16">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="12x16" />
        <h2>12x16</h2>
    </label>
    <div><span></span></div>
</div>

<div class="input" id="16x24">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="16x24" />
        <h2>16x24</h2>
    </label>
    <div><span></span></div>
</div>

<div class="input" id="12x16-giclee">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="12x16 Giclee" />
        <h2>12x16 Giclee</h2>
    </label>
    <div><span></span></div>
</div>

<div class="input" id="16x24-giclee">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="12x16 Giclee" />
        <h2>16x24 Giclee</h2>
    </label>
    <div><span></span></div>
</div>

<div class="input" id="18x36-giclee">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="12x16 Giclee" />
        <h2>18x36 Giclee</h2>
    </label>
    <div><span></span></div>
</div>

<input name="item-name" type="text" value="" class="item-name" />
<input name="item-price" type="text" value="" class="item-price" />

<input name="Next Step" type="submit" value="Next Step" class="next-step" />

<div class="clear"></div>
</form>

jQuery:

$(document).ready(function(){

    var $class = ".input"; // MAIN DIV CLASS
    var $1 = "#8x10"; // FIRST ID
    var $2 = "#12x16"; // SECOND ID
    var $3 = "#16x24"; // THIRD ID
    var $4 = "#12x16-giclee"; // 4TH ID
    var $5 = "#16x24-giclee"; // 5TH ID
    var $6 = "#18x36-giclee"; // 6TH ID

    var $heightA = "130"; //px FOR REGULAR PRINTS
    var $heightB = "110"; //px FOR GICLEE PRINTS

    var $span = "<span></span>"; // ELEMENT TO HOLD HIDDEN FORM FIELDS

    var $a1 = ".selection-announcement"; // FIRST ANNOUNCEMENT ID
    var $a2 = ".selection-announcement-hidden"; // SECOND ANNOUNCEMENT ID
    var $a3 = ".selection-announcement-hidden2"; // THIRD ANNOUNCEMENT ID

    // HIDDEN INPUT FIELDS
    var $8x10 = "<div><label><input class='test1' id='1' name='selectiongroup2' type='radio' value='No Frame' /><h2>No Frame ($19.95)</h2><h3>Shipping, Handling and Insurance: $14.95</h3></label><label><input class='unselected' id='2' name='selectiongroup2' type='radio' value='Metal Frame' /><h2>Metal Frame ($55.95)</h2><h3>Shipping, Handling and Insurance: $29.95</h3></label><label><input class='unselected' id='3' name='selectiongroup2' type='radio' value='Barnwood Frame' /><h2>Barnwood Frame ($169.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div>";

    var $12x16 = "<div><label><input class='unselected' id='4' name='selectiongroup2' type='radio' value='No Frame' /><h2>No Frame ($29.95)</h2><h3>Shipping, Handling and Insurance: $14.95</h3></label><label><input class='unselected' id='5' name='selectiongroup2' type='radio' value='Metal Frame' /><h2>Metal Frame ($89.95)</h2><h3>Shipping, Handling and Insurance: $29.95</h3></label><label><input class='unselected' id='6' name='selectiongroup2' type='radio' value='Barnwood Frame' /><h2>Barnwood Frame ($169.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div>";

    var $16x24 = "<div><label><input class='unselected' id='7' name='selectiongroup2' type='radio' value='No Frame' /><h2>No Frame ($49.95)</h2><h3>Shipping, Handling and Insurance: $14.95</h3></label><label><input class='unselected' id='8' name='selectiongroup2' type='radio' value='Metal Frame' /><h2>Metal Frame ($119.95)</h2><h3>Shipping, Handling and Insurance: $29.95</h3></label><label><input class='unselected' id='9' name='selectiongroup2' type='radio' value='Barnwood Frame' /><h2>Barnwood Frame ($169.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div>";

    var $12x16G = "<div><label><input class='unselected' id='10' name='selectiongroup2' type='radio' value='Stretched Gallery-Wrapped' /><h2>2' Stretched Gallery-Wrapped ($129.95)</h2><h3>Shipping, Handling and Insurance: $39.95</h3></label><label><input class='unselected' id='11' name='selectiongroup2' type='radio' value='Watercolor' /><h2>Watercolor ($99.95)</h2></label><div><label><input name='With Barnwood Frame' type='checkbox' value='With Barnwood Frame'><h2>With Barnwood Frame ($139.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div></div>";

    var $16x24G = "<div><label><input class='unselected' id='12' name='selectiongroup2' type='radio' value='Stretched Gallery-Wrapped' /><h2>2' Stretched Gallery-Wrapped ($189.95)</h2><h3>Shipping, Handling and Insurance: $39.95</h3></label><label><input class='unselected' id='13' name='selectiongroup2' type='radio' value='Watercolor' /><h2>Watercolor ($139.95)</h2></label><div><label><input name='With Barnwood Frame' type='checkbox' value='With Barnwood Frame'><h2>With Barnwood Frame ($189.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div></div>";

    var $18x36G = "<div><label><input class='unselected' id='14' name='selectiongroup2' type='radio' value='Stretched Gallery-Wrapped' /><h2>2' Stretched Gallery-Wrapped ($249.95)</h2><h3>Shipping, Handling and Insurance: $39.95</h3></label><label><input class='unselected' id='15' name='selectiongroup2' type='radio' value='Watercolor' /><h2>Watercolor ($199.95)</h2></label><div><label><input name='With Barnwood Frame' type='checkbox' value='With Barnwood Frame'><h2>With Barnwood Frame ($249.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div></div>";

    /* FIRST STAGE */
    $($1+' input').click(function() {$($1+' input').removeClass('unselected');$($1+' input').addClass('selected');});   
    $($2+' input').click(function() {$($1+' input').removeClass('selected');$($1+' input').addClass('unselected');});   
    $($3+' input').click(function() {$($1+' input').removeClass('selected');$($1+' input').addClass('unselected');});   
    $($4+' input').click(function() {$($1+' input').removeClass('selected');$($1+' input').addClass('unselected');});   
    $($5+' input').click(function() {$($1+' input').removeClass('selected');$($1+' input').addClass('unselected');});   
    $($6+' input').click(function() {$($1+' input').removeClass('selected');$($1+' input').addClass('unselected');});       

    $($2+' input').click(function() {$($2+' input').removeClass('unselected');$($2+' input').addClass('selected');});   
    $($1+' input').click(function() {$($2+' input').removeClass('selected');$($2+' input').addClass('unselected');});   
    $($3+' input').click(function() {$($2+' input').removeClass('selected');$($2+' input').addClass('unselected');});   
    $($4+' input').click(function() {$($2+' input').removeClass('selected');$($2+' input').addClass('unselected');});   
    $($5+' input').click(function() {$($2+' input').removeClass('selected');$($2+' input').addClass('unselected');});   
    $($6+' input').click(function() {$($2+' input').removeClass('selected');$($2+' input').addClass('unselected');});       

    $($3+' input').click(function() {$($3+' input').removeClass('unselected');$($3+' input').addClass('selected');});   
    $($1+' input').click(function() {$($3+' input').removeClass('selected');$($3+' input').addClass('unselected');});   
    $($2+' input').click(function() {$($3+' input').removeClass('selected');$($3+' input').addClass('unselected');});   
    $($4+' input').click(function() {$($3+' input').removeClass('selected');$($3+' input').addClass('unselected');});   
    $($5+' input').click(function() {$($3+' input').removeClass('selected');$($3+' input').addClass('unselected');});   
    $($6+' input').click(function() {$($3+' input').removeClass('selected');$($3+' input').addClass('unselected');});       

    $($4+' input').click(function() {$($4+' input').removeClass('unselected');$($4+' input').addClass('selected');});   
    $($1+' input').click(function() {$($4+' input').removeClass('selected');$($4+' input').addClass('unselected');});   
    $($2+' input').click(function() {$($4+' input').removeClass('selected');$($4+' input').addClass('unselected');});   
    $($3+' input').click(function() {$($4+' input').removeClass('selected');$($4+' input').addClass('unselected');});   
    $($5+' input').click(function() {$($4+' input').removeClass('selected');$($4+' input').addClass('unselected');});   
    $($6+' input').click(function() {$($4+' input').removeClass('selected');$($4+' input').addClass('unselected');});       

    $($5+' input').click(function() {$($5+' input').removeClass('unselected');$($5+' input').addClass('selected');});   
    $($1+' input').click(function() {$($5+' input').removeClass('selected');$($5+' input').addClass('unselected');});   
    $($2+' input').click(function() {$($5+' input').removeClass('selected');$($5+' input').addClass('unselected');});   
    $($3+' input').click(function() {$($5+' input').removeClass('selected');$($5+' input').addClass('unselected');});   
    $($4+' input').click(function() {$($5+' input').removeClass('selected');$($5+' input').addClass('unselected');});   
    $($6+' input').click(function() {$($5+' input').removeClass('selected');$($5+' input').addClass('unselected');});       

    $($6+' input').click(function() {$($6+' input').removeClass('unselected');$($6+' input').addClass('selected');});   
    $($1+' input').click(function() {$($6+' input').removeClass('selected');$($6+' input').addClass('unselected');});   
    $($2+' input').click(function() {$($6+' input').removeClass('selected');$($6+' input').addClass('unselected');});   
    $($3+' input').click(function() {$($6+' input').removeClass('selected');$($6+' input').addClass('unselected');});   
    $($4+' input').click(function() {$($6+' input').removeClass('selected');$($6+' input').addClass('unselected');});   
    $($5+' input').click(function() {$($6+' input').removeClass('selected');$($6+' input').addClass('unselected');});       

    /* SECOND STAGE */
    $($1+' input').click(function() {$($1).addClass('input-hover');$($1+' div').animate({height: $heightA},800);}); 
    $($2+' input').click(function() {$($1).removeClass('input-hover');$($1+' div').animate({height: 0},800);}); 
    $($3+' input').click(function() {$($1).removeClass('input-hover');$($1+' div').animate({height: 0},800);}); 
    $($4+' input').click(function() {$($1).removeClass('input-hover');$($1+' div').animate({height: 0},800);}); 
    $($5+' input').click(function() {$($1).removeClass('input-hover');$($1+' div').animate({height: 0},800);}); 
    $($6+' input').click(function() {$($1).removeClass('input-hover');$($1+' div').animate({height: 0},800);}); 

    $($2+' input').click(function() {$($2).addClass('input-hover');$($2+' div').animate({height: $heightA},800);}); 
    $($1+' input').click(function() {$($2).removeClass('input-hover');$($2+' div').animate({height: 0},800);}); 
    $($3+' input').click(function() {$($2).removeClass('input-hover');$($2+' div').animate({height: 0},800);}); 
    $($4+' input').click(function() {$($2).removeClass('input-hover');$($2+' div').animate({height: 0},800);}); 
    $($5+' input').click(function() {$($2).removeClass('input-hover');$($2+' div').animate({height: 0},800);}); 
    $($6+' input').click(function() {$($2).removeClass('input-hover');$($2+' div').animate({height: 0},800);}); 

    $($3+' input').click(function() {$($3).addClass('input-hover');$($3+' div').animate({height: $heightA},800);}); 
    $($1+' input').click(function() {$($3).removeClass('input-hover');$($3+' div').animate({height: 0},800);}); 
    $($2+' input').click(function() {$($3).removeClass('input-hover');$($3+' div').animate({height: 0},800);}); 
    $($4+' input').click(function() {$($3).removeClass('input-hover');$($3+' div').animate({height: 0},800);}); 
    $($5+' input').click(function() {$($3).removeClass('input-hover');$($3+' div').animate({height: 0},800);}); 
    $($6+' input').click(function() {$($3).removeClass('input-hover');$($3+' div').animate({height: 0},800);}); 

    $($4+' input').click(function() {$($4).addClass('input-hover');$($4+' div').animate({height: $heightB},800);}); 
    $($1+' input').click(function() {$($4).removeClass('input-hover');$($4+' div').animate({height: 0},800);}); 
    $($2+' input').click(function() {$($4).removeClass('input-hover');$($4+' div').animate({height: 0},800);}); 
    $($3+' input').click(function() {$($4).removeClass('input-hover');$($4+' div').animate({height: 0},800);}); 
    $($5+' input').click(function() {$($4).removeClass('input-hover');$($4+' div').animate({height: 0},800);}); 
    $($6+' input').click(function() {$($4).removeClass('input-hover');$($4+' div').animate({height: 0},800);}); 

    $($5+' input').click(function() {$($5).addClass('input-hover');$($5+' div').animate({height: $heightB},800);}); 
    $($1+' input').click(function() {$($5).removeClass('input-hover');$($5+' div').animate({height: 0},800);}); 
    $($2+' input').click(function() {$($5).removeClass('input-hover');$($5+' div').animate({height: 0},800);}); 
    $($3+' input').click(function() {$($5).removeClass('input-hover');$($5+' div').animate({height: 0},800);}); 
    $($4+' input').click(function() {$($5).removeClass('input-hover');$($5+' div').animate({height: 0},800);}); 
    $($6+' input').click(function() {$($5).removeClass('input-hover');$($5+' div').animate({height: 0},800);}); 

    $($6+' input').click(function() {$($6).addClass('input-hover');$($6+' div').animate({height: $heightB},800);}); 
    $($1+' input').click(function() {$($6).removeClass('input-hover');$($6+' div').animate({height: 0},800);}); 
    $($2+' input').click(function() {$($6).removeClass('input-hover');$($6+' div').animate({height: 0},800);}); 
    $($3+' input').click(function() {$($6).removeClass('input-hover');$($6+' div').animate({height: 0},800);}); 
    $($4+' input').click(function() {$($6).removeClass('input-hover');$($6+' div').animate({height: 0},800);}); 
    $($5+' input').click(function() {$($6).removeClass('input-hover');$($6+' div').animate({height: 0},800);}); 

    /* THIRD STAGE */
    $($1+' input').click(function() {$($1+' div span').replaceWith($8x10);})
    $($2+' input').click(function() {$($1+' div div').replaceWith($span);});
    $($3+' input').click(function() {$($1+' div div').replaceWith($span);});
    $($4+' input').click(function() {$($1+' div div').replaceWith($span);});
    $($5+' input').click(function() {$($1+' div div').replaceWith($span);});
    $($6+' input').click(function() {$($1+' div div').replaceWith($span);});

    $($2+' input').click(function() {$($2+' div span').replaceWith($12x16);})
    $($1+' input').click(function() {$($2+' div div').replaceWith($span);});
    $($3+' input').click(function() {$($2+' div div').replaceWith($span);});
    $($4+' input').click(function() {$($2+' div div').replaceWith($span);});
    $($5+' input').click(function() {$($2+' div div').replaceWith($span);});
    $($6+' input').click(function() {$($2+' div div').replaceWith($span);});

    $($3+' input').click(function() {$($3+' div span').replaceWith($16x24);})
    $($1+' input').click(function() {$($3+' div div').replaceWith($span);});
    $($2+' input').click(function() {$($3+' div div').replaceWith($span);});
    $($4+' input').click(function() {$($3+' div div').replaceWith($span);});
    $($5+' input').click(function() {$($3+' div div').replaceWith($span);});
    $($6+' input').click(function() {$($3+' div div').replaceWith($span);});

    $($4+' input').click(function() {$($4+' div span').replaceWith($12x16G);})
    $($1+' input').click(function() {$($4+' div div').replaceWith($span);});
    $($2+' input').click(function() {$($4+' div div').replaceWith($span);});
    $($3+' input').click(function() {$($4+' div div').replaceWith($span);});
    $($5+' input').click(function() {$($4+' div div').replaceWith($span);});
    $($6+' input').click(function() {$($4+' div div').replaceWith($span);});

    $($5+' input').click(function() {$($5+' div span').replaceWith($16x24G);})
    $($1+' input').click(function() {$($5+' div div').replaceWith($span);});
    $($2+' input').click(function() {$($5+' div div').replaceWith($span);});
    $($3+' input').click(function() {$($5+' div div').replaceWith($span);});
    $($4+' input').click(function() {$($5+' div div').replaceWith($span);});
    $($6+' input').click(function() {$($5+' div div').replaceWith($span);});

    $($6+' input').click(function() {$($6+' div span').replaceWith($18x36G);})
    $($1+' input').click(function() {$($6+' div div').replaceWith($span);});
    $($2+' input').click(function() {$($6+' div div').replaceWith($span);});
    $($3+' input').click(function() {$($6+' div div').replaceWith($span);});
    $($4+' input').click(function() {$($6+' div div').replaceWith($span);});
    $($5+' input').click(function() {$($6+' div div').replaceWith($span);});

    /* ANNOUNCEMENT CHANGE */
    $($1+' input').click(function() {$($a1).fadeOut("slow"); $($a3).fadeOut("slow"); $($a2).fadeIn("slow");});
    $($2+' input').click(function() {$($a1).fadeOut("slow"); $($a3).fadeOut("slow"); $($a2).fadeIn("slow");});
    $($3+' input').click(function() {$($a1).fadeOut("slow"); $($a3).fadeOut("slow"); $($a2).fadeIn("slow");});
    $($4+' input').click(function() {$($a1).fadeOut("slow"); $($a2).fadeOut("slow"); $($a3).fadeIn("slow");});
    $($5+' input').click(function() {$($a1).fadeOut("slow"); $($a2).fadeOut("slow"); $($a3).fadeIn("slow");});
    $($6+' input').click(function() {$($a1).fadeOut("slow"); $($a2).fadeOut("slow"); $($a3).fadeIn("slow");});

    /* GET THE VALUES TO THE NEXT STAGE */
    $('.test1').click(function() {$('.item-price').replaceWith('<input name="item-price" type="text" value="34.90" class="item-price" />');});


});

Please help. Let me know if you need more questions answered to help me with this.

3
  • @user713052: Is the only place the price is showing up inside the dynamically added HTML? Is there any way you could place it on a data-* attribute? Also, ids are not allowed to start with numbers. May 3, 2011 at 0:45
  • well the actual "item-price" input field isn't dynamically put in. Only the secondary selections. Is it possible for jQuery to work with dynamically added HTML once its already been added in?
    – user713052
    May 3, 2011 at 0:52
  • @user713052: Yes, it's possible, but there's probably an easier way. I guess what I'm getting at is--Is there a way that items in your HTML are associated with the prices? Also, is there a reason you couldn't hide the sub-levels of inputs and just show them instead of inserting the content into the page? May 3, 2011 at 0:56

1 Answer 1

0

It took me quite well to understand what you where trying to do, and I agree with Andrew, there are a bunch of ways to do this easier.
First I'll tell you what is the problem that you are having (If I got it right), then I will show you a different way to do what you are doing. It is not a half of what I'd do at work, but please take a look so you may notice some concept changes that you still have to understand.
Don't worry we were all once new to js and jquery
1) the missing concept
most of the code inside $(document).ready(function(){ , but not all. Some code in there stays saved as a 'to-do' when an event occurs and it is linked to a control
If the control is not present in the code, at the time the document is loaded and ready, then there will be no one to be linked with this conditional piece of code (a.k.a. event handler)
Since you are replacing sections of code once the inputs from step1 are clicked, the html needed to handle the second step of your process is not there when the page loads and it can't be assigned with the event handler
you should attach the click event handler to the 'no-frame' button right after you replaced it INTO the page's content, but inside the same function
this piece of the code I added bellow takes care of adding the handler in the right time

    $(this).replaceWith(eval(replaceMeWith));
    $('.test1').click(
        function() {
            $('.item-price').val($(this).attr('totalprice'));
        }
    );

2)the code alternative
Don't expect this to be fully accurate... it is just a small test re-engineering

<html>
    <head>
    <style>
        .unselected{color:red;}
        .selected{color:green;}
    </style>
        <script src="jquery-1.5.js"></script>
        <script>
$(document).ready(function(){

    var $class = ".input"; // MAIN DIV CLASS
    var $1 = "#8x10"; // FIRST ID
    var $2 = "#12x16"; // SECOND ID
    var $3 = "#16x24"; // THIRD ID
    var $4 = "#12x16-giclee"; // 4TH ID
    var $5 = "#16x24-giclee"; // 5TH ID
    var $6 = "#18x36-giclee"; // 6TH ID

    var $heightA = "130"; //px FOR REGULAR PRINTS
    var $heightB = "110"; //px FOR GICLEE PRINTS

    var $span = "<span></span>"; // ELEMENT TO HOLD HIDDEN FORM FIELDS

    var $a1 = ".selection-announcement"; // FIRST ANNOUNCEMENT ID
    var $a2 = ".selection-announcement-hidden"; // SECOND ANNOUNCEMENT ID
    var $a3 = ".selection-announcement-hidden2"; // THIRD ANNOUNCEMENT ID

    // HIDDEN INPUT FIELDS
    var $8x10 = "<div style='background-color:red'><label><input class='test1' id='1' name='selectiongroup2' type='radio' value='No Frame' totalprice='US$ 34.90' /><h2>No Frame (<span role='actualprice'>$19.95<span>)</h2><h3>Shipping, Handling and Insurance: $14.95</h3></label><label><input class='unselected' id='2' name='selectiongroup2' type='radio' value='Metal Frame' /><h2>Metal Frame ($55.95)</h2><h3>Shipping, Handling and Insurance: $29.95</h3></label><label><input class='unselected' id='3' name='selectiongroup2' type='radio' value='Barnwood Frame' /><h2>Barnwood Frame ($169.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div>";

    var $12x16 = "<div><label><input class='unselected' id='4' name='selectiongroup2' type='radio' value='No Frame' /><h2>No Frame ($29.95)</h2><h3>Shipping, Handling and Insurance: $14.95</h3></label><label><input class='unselected' id='5' name='selectiongroup2' type='radio' value='Metal Frame' /><h2>Metal Frame ($89.95)</h2><h3>Shipping, Handling and Insurance: $29.95</h3></label><label><input class='unselected' id='6' name='selectiongroup2' type='radio' value='Barnwood Frame' /><h2>Barnwood Frame ($169.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div>";

    var $16x24 = "<div><label><input class='unselected' id='7' name='selectiongroup2' type='radio' value='No Frame' /><h2>No Frame ($49.95)</h2><h3>Shipping, Handling and Insurance: $14.95</h3></label><label><input class='unselected' id='8' name='selectiongroup2' type='radio' value='Metal Frame' /><h2>Metal Frame ($119.95)</h2><h3>Shipping, Handling and Insurance: $29.95</h3></label><label><input class='unselected' id='9' name='selectiongroup2' type='radio' value='Barnwood Frame' /><h2>Barnwood Frame ($169.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div>";

    var $12x16G = "<div><label><input class='unselected' id='10' name='selectiongroup2' type='radio' value='Stretched Gallery-Wrapped' /><h2>2' Stretched Gallery-Wrapped ($129.95)</h2><h3>Shipping, Handling and Insurance: $39.95</h3></label><label><input class='unselected' id='11' name='selectiongroup2' type='radio' value='Watercolor' /><h2>Watercolor ($99.95)</h2></label><div><label><input name='With Barnwood Frame' type='checkbox' value='With Barnwood Frame'><h2>With Barnwood Frame ($139.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div></div>";

    var $16x24G = "<div><label><input class='unselected' id='12' name='selectiongroup2' type='radio' value='Stretched Gallery-Wrapped' /><h2>2' Stretched Gallery-Wrapped ($189.95)</h2><h3>Shipping, Handling and Insurance: $39.95</h3></label><label><input class='unselected' id='13' name='selectiongroup2' type='radio' value='Watercolor' /><h2>Watercolor ($139.95)</h2></label><div><label><input name='With Barnwood Frame' type='checkbox' value='With Barnwood Frame'><h2>With Barnwood Frame ($189.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div></div>";

    var $18x36G = "<div><label><input class='unselected' id='14' name='selectiongroup2' type='radio' value='Stretched Gallery-Wrapped' /><h2>2' Stretched Gallery-Wrapped ($249.95)</h2><h3>Shipping, Handling and Insurance: $39.95</h3></label><label><input class='unselected' id='15' name='selectiongroup2' type='radio' value='Watercolor' /><h2>Watercolor ($199.95)</h2></label><div><label><input name='With Barnwood Frame' type='checkbox' value='With Barnwood Frame'><h2>With Barnwood Frame ($249.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div></div>";

    /* FIRST STAGE */
    $("[role=step1]").click(
    function(){
        var activeId=$(this).attr('id');
        $("[role=step1]").each(
            function(){
                if($(this).attr("id")!=activeId){
                    $(this).removeClass('selected');
                    $(this).addClass('unselected');
                    $(this).removeClass('input-hover');//step2
                    $(this).css("display","none");//Step3
                }

            }
        );
        $(this).removeClass('unselected');
        $(this).addClass('selected');
        $(this).addClass('input-hover');
        var replaceMeWith=$(this).attr("replacemewith");
        $(this).replaceWith(eval(replaceMeWith));
        $('.test1').click(
            function() {
                $('.item-price').val($(this).attr('totalprice'));
                alert('Pick it up and spare shipping, you would pay only '+ 
                    $(this).parent().find('[role=actualprice]').text());

            }
        );

    }
    );

    /* SECOND STAGE */
    //$($1+' input').click(function() {$($1).addClass('input-hover');$($1+' div').animate({height: $heightA},800);}); 
    //$($2+' input').click(function() {$($1).removeClass('input-hover');$($1+' div').animate({height: 0},800);}); 

    //$($2+' input').click(function() {$($2).addClass('input-hover');$($2+' div').animate({height: $heightA},800);}); 
    //$($1+' input').click(function() {$($2).removeClass('input-hover');$($2+' div').animate({height: 0},800);}); 



    /* THIRD STAGE */
    //$($1+' input').click(function() {$($1+' div span').replaceWith($8x10);})
    //$($2+' input').click(function() {$($1+' div div').replaceWith($span);});

    //$($2+' input').click(function() {$($2+' div span').replaceWith($12x16);})
    //$($1+' input').click(function() {$($2+' div div').replaceWith($span);});


    /* ANNOUNCEMENT CHANGE */
    $($1+' input').click(function() {$($a1).fadeOut("slow"); $($a3).fadeOut("slow"); $($a2).fadeIn("slow");});
    $($2+' input').click(function() {$($a1).fadeOut("slow"); $($a3).fadeOut("slow"); $($a2).fadeIn("slow");});

    /* GET THE VALUES TO THE NEXT STAGE */


});
        </script>
    </head>
    <body>
<form action="" method="post" class="form" name="form">
<div class="selection">
<div class="selection-announcement">Select Your Size</div>
<div class="selection-announcement-hidden">Select Your Frame</div>
<div class="selection-announcement-hidden2">Select Your Giclee Type</div>
</div>
<div class="input" id="8x10" role="step1" replacemewith="$8x10">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="8x10" />
        <h2>8x10</h2>
    </label>
    <div><span></span></div>
</div>

<div class="input" id="12x16" role="step1">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="12x16" />
        <h2>12x16</h2>
    </label>
    <div><span></span></div>
</div>


<input name="item-name" type="text" value="" class="item-name" />
<input name="item-price" type="text" value="" class="item-price" />

<input name="Next Step" type="submit" value="Next Step" class="next-step" />

<div class="clear"></div>
</form>
    </body>
</html>
1
  • mainly I edited to change the way that I get the var name that contains the html that the original HTML will be replaced with. I also changed the way how the item-price is read and showed an alert with some extra info...
    – Nicolás
    May 3, 2011 at 5:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.