1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

A little help required urgently

Discussion in 'jQuery' started by hallianonline, Dec 4, 2013.

  1. #1
    I am creating a little template for my website but getting an error i think so in jquery actually i want to repeat the price terms toggle option multiple times on a single page e.g. 1 month 6 months 12 months term. All is ok but on 2nd tab when i select any option it comes the first group moves and merge into the second group i tried to find out but nothing works for me Here is the example og the error. Kindly help me in this
    Before:
    before.jpg

    After:
    after.jpg

    Here is my code:

    JS

            <script type="text/javascript">
    $(document).ready(function() {
        $("div.desc").hide();
        $("div.shared-page-tables-4colmns-button").show();
        $("input[name$='sharedprices']").click(function() {
            var test = $(this).val();
            $("div.desc").hide();
            $("#initial").hide();
            $("#" + test).show();
        });
    });
    </script> 
    Code (markup):

    HTML Code:
     <div class="shared-price-change-main">
                                <ul>
                                <li><input type="radio" name="sharedprices" value="basicterm1"  /> 1 Month <b>$1.99</b>/mo</li>
                                <li><input type="radio" name="sharedprices" value="basicterm2" / 1 /> 6 Months <b>$1.99</b>/mo</li>
                                <li><input type="radio" name="sharedprices" value="basicterm3" / 1 /> 12 Months <b>$1.99</b>/mo</li>
                                </ul> 
                            </div>
                                                      <div id="myRadioGroup" class="shareddetailsplan">
                                        <div id="basicterm1" class="desc">
                                        <label>You Save 0</label>
                                        <div class="shared-page-tables-4colmns-button"><a href="http://google.com">Order Now</a></div>
                                        </div>
                                        <div id="basicterm2" class="desc">
                                        <label>You Save 5%</label>
                                        <div class="shared-page-tables-4colmns-button"><a href="http://msn.com">Order Now</a></div>
                                        </div>
                                        <div id="basicterm3" class="desc">
                                        <label>You Save 10%</label>
                                        <div class="shared-page-tables-4colmns-button"><a href="http://msn.com">Order Now</a></div>
                                        </div>
                                        <div class="shared-page-tables-4colmns-button" id="initial"><label>You Save $0</label><a href="#">Order Now</a></div>
                            </div>
    
    
    
    
    
    <div class="shared-price-change-main">
                                <ul>
                                <li><input type="radio" name="sharedprices" value="standardterm1"  /> 1 Month <b>$1.99</b>/mo</li>
                                <li><input type="radio" name="sharedprices" value="standardterm2" / 1 /> 6 Months <b>$1.99</b>/mo</li>
                                <li><input type="radio" name="sharedprices" value="standardterm3" / 1 /> 12 Months <b>$1.99</b>/mo</li>
                                </ul> 
                            </div>
                                                      <div id="myRadioGroup" class="shareddetailsplan">
                                        <div id="standardterm1" class="desc">
                                        <label>You Save 0</label>
                                        <div class="shared-page-tables-4colmns-button"><a href="http://google.com">Order Now</a></div>
                                        </div>
                                        <div id="standardterm2" class="desc">
                                        <label>You Save 5%</label>
                                        <div class="shared-page-tables-4colmns-button"><a href="http://msn.com">Order Now</a></div>
                                        </div>
                                        <div id="standardterm3" class="desc">
                                        <label>You Save 10%</label>
                                        <div class="shared-page-tables-4colmns-button"><a href="http://msn.com">Order Now</a></div>
                                        </div>
                                        <div class="shared-page-tables-4colmns-button" id="initial"><label>You Save $0</label><a href="#">Order Now</a></div>
                            </div> 
    HTML:

     
    hallianonline, Dec 4, 2013 IP
  2. sibivarman

    sibivarman Greenhorn

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #2
    I think its its because of the name attribute. Have you tried changing the name for the two groups into different .
     
    sibivarman, Dec 6, 2013 IP
  3. hallianonline

    hallianonline Active Member

    Messages:
    104
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #3
    yes but nothing is working
     
    hallianonline, Dec 6, 2013 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Uhm... I have some silly questions...

    What makes those radio buttons be list items? Why don't they have labels? Where are your fieldsets? Why do you have labels without corresponding form elements (since that's what labels are FOR)? Dragging that markup kicking and screaming into something remotely resembling semantics would probably go a long ways towards making whatever it is you're trying to do simpler...

    As to your problem, could you better explain what you want that scripting to actually do as I'm just not getting it. Looks like you're using jquery's stupid show/hide crap for ... well, I'm not even sure what. Like most of the needlessly cryptic jQuery garbage, I get a headache just looking at that mess.
     
    deathshadow, Dec 7, 2013 IP
  5. hallianonline

    hallianonline Active Member

    Messages:
    104
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #5
    if you look in this http://jsfiddle.net/VXK9t/ the code is here
    but the problem is how can i separate You Save % and Order now button for each radio group actually "the plans repeats multiple times for 3 time or 4 time and I require these 3 plan terms for each plan please help
     
    hallianonline, Dec 7, 2013 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    I ALMOST think I'm grasping what you're trying to do, while at the same time feeling like I'm guessing wildly. I think the problem is your markup doesn't even come CLOSE to what you want to do or how it should be done, and you've violating one of the unwritten rules of good scripting when it comes to forms -- particularly things like order forms... If you can't make the page work without scripting FIRST, you have no business adding scripting to it.

    I SUSPECT you should have three separate forms, your anchors should be INPUT[submit], with your radio buttons properly in fieldsets. The only thing I'd have there for a scripting assist would be the % show part, which I'd do by copying a title attribute from the selected input[radio].

    Instead you don't even HAVE a form, or submits, and seem to be screwing around with a bunch of scripting for nothing.

    Though I'm still not sure I'm even understanding what you are trying to do. Might be a language barrier issue. Might also be I'm not seeing enough of the page -- are there headings/related data to those columns of buttons?!?
     
    deathshadow, Dec 7, 2013 IP