jQuery форму заказа, как получить цены в поля ввода? - PullRequest
Новая
       1

jQuery форму заказа, как получить цены в поля ввода?

0 голосов
/ 03 мая 2011

Я делаю эту форму заказа jQuery, и у меня возникают некоторые проблемы, потому что я довольно плохо знаком с JavaScript.

Моя цель: когда кто-то выбирает дополнительные поля, цена будет отображаться в классе= поле ввода "цена товара".Например: кто-то нажимает «8x10», а затем «Без рамки», цена «Без рамки» будет отображаться в поле «цена товара».

У меня есть эти поля, которые вставляются в выбранное из другого поля.Ниже мой HTML и 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" />');});


});

Пожалуйста, помогите.Дайте мне знать, если вам нужно ответить на дополнительные вопросы, чтобы помочь мне в этом.

1 Ответ

0 голосов
/ 03 мая 2011

Мне потребовалось достаточно хорошо, чтобы понять, что вы пытаетесь сделать, и я согласен с Эндрю, есть множество способов сделать это проще.Сначала я скажу вам, в чем заключается проблема (если я правильно понял), а затем покажу вам другой способ сделать то, что вы делаете.Это не половина того, что я бы делал на работе, но, пожалуйста, посмотрите, чтобы вы могли заметить некоторые изменения концепции, которые вам все еще нужно понять.Не волнуйтесь, мы все когда-то были новичками в js и jquery. 1) отсутствующее понятие
большая часть кода внутри $ (document) .ready (function () {, но не все. Некоторый код там сохраняется как «задание», когдапроисходит событие, и оно связано с элементом управления
Если элемент управления отсутствует в коде, в то время, когда документ загружен и готов, тогда не будет никого, кто будет связан с этим условным фрагментом кода (иначе событиеобработчик)
Поскольку вы заменяете участки кода после того, как щелкаете входы из шага 1, HTML-код, необходимый для обработки второго шага вашего процесса, отсутствует при загрузке страницы, и его нельзя назначить с помощью обработчика событий
вы должны прикрепить обработчик события click к кнопке «без фрейма» сразу после того, как вы заменили ее на содержимое страницы, но внутри той же функции
этот фрагмент кода, который я добавил ниже, заботится о добавлении обработчика вправильное время 

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

2) альтернативный код
Не ожидайте, что это будет полностью точным ... это всего лишь небольшая повторная проверкаEring 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...