jQuery on element unhidden, populate a div with text

Question

I have a div that displays information based on what options are chosen. Basically there's a few divs on the page that are set to hidden, when the user selects options from the dropdown that aren't the holding text (like "please select..." or some variant) the price div populates itself with the price. IDs and classes of the options can change and there's no way to determine them before hand (dynamically populated).

I've got another div on the page that I'm looking to populate when that first price div becomes visible, extract the amount from it, perform some calculation on it and display it.

I was thinking about something along the lines of this:

jQuery( "form.variations_form cart" ).children("div.single_variation").change(
   function(){ 
        /* update the div */
   }
);

I've put everything down on the jsfiddle so you can see it but please note the comments. Here's a link to jsfiddle: http://jsfiddle.net/Scott_McGready/h3G6A/1/

Any idea on how to monitor that initial box, pull through the price and display it on the other one?

Not quite going to flag this as a duplicate, but take a look at: http://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible — Paul Roub, Sep 03 '13 at 17:57
It's fairly easy to do what you're asking with jQuery, `$("#price").html()` would give you the contents of a `div` with an ID of `price`, for example, and your code above would work fine. But I'd be surprised if there isn't a better way to do this by restructuring your code so that you don't put values into html, then extract them out later. — Ed_, Sep 03 '13 at 18:54

score 1 · Accepted Answer · answered Sep 03 '13 at 19:02

Working DEMO

Try this

I have also edited your html

html

<fieldset class="variations">
    <div> <span class="select_label">Colour</span>

        <select id="colour-33" name="tax_colour-33">
            <option value="">Choose an option …</option>
            <option value="100">White/High Gloss Black</option>
        </select>
    </div>
    <div>   <span class="select_label">Installation</span>

        <select id="installation-61" name="tax_installation-61">
            <option value="">Choose an option …</option>
            <option value="200">Delivery only</option>
            <option value="300">Installation required</option>
        </select>
    </div>
</fieldset>
<!-- Initial state of single_variation is as follows. This changes as options are chosen and works well. <div class="single_variation" style="display: none;"></div>
-->
<!-- this version of single_variation only displays if all options are chosen -->
<div class="single_variation" style="display: block;"><span>£</span><span class="price">579.00</span>

    <p class="stock ">In Stock</p>
</div>
<div class="boxthis" style="width: 100%; border: 1px solid black;"> <span id="disctext">
    <p>You need to choose some options first so that we can calculate your price.</p>
    </span>

</div>

code

$(document).ready(function () {
    var price = parseFloat($(".price").text())
    var val1;
    var val2;
    $("#colour-33").change(function () {
        if (parseFloat($("#colour-33 option:selected").val())) {
            val1 = parseFloat($("#colour-33 option:selected").val());
            price = price + val1;
            $(".price").text(price);
        } else {
            price = price - val1;
            $(".price").text(price);
        }
    });

    $("#installation-61").change(function () {
        if (parseFloat($("#installation-61 option:selected").val())) {
            val2 = parseFloat($("#installation-61 option:selected").val());
            price = price + val2;
            $(".price").text(price);
        } else {
            price = price - val2;
            $(".price").text(price);
        }
    });
});

Hope this helps,Thank you

This will work, but totally doesn't cover the scenario that I'm talking about where classes change dependent on db extract, the span is hidden initially etc. etc. — ScottMcGready, Sep 03 '13 at 19:58

score 0 · Answer 2 · answered Sep 03 '13 at 18:01

0

you could use a if statement to check if the first div is visible.

to get value use document.getElementsByTagName('select').innerHTML

do calculation and display in the div

answered Sep 03 '13 at 18:01

Andrew Johnson

446
3
11

That's a great suggestion but you've effectively just rephrased my question! I'm struggling to work out how to check if the div is visible. – ScottMcGready Sep 03 '13 at 18:22

jQuery on element unhidden, populate a div with text

2 Answers2

html

code