JQuery function to show element dependent on the value of hidden HTML input element

Question

Just to preface my answer, I'm an absolute novice when it comes to JQUERY.

I'm trying to create a DOM ready function which takes the value of a hidden HTML input field and if the value is ... (something) then show a certain <div> class.

Here's my code:

JS - UPDATED

   $(document).ready(function(){

    var money = 19.95;

    /* not sure if this is written correctly, but this is supposed to
    check whether the hidden input element value is equal to var money */

   if ($("input[id='VAT_shipping'][type='hidden']").val() == money )  {

    $("#ac-wrapper").show(); 
    $("#popup").show();

    };

    // hide popup when user clicks on close button
    $(".close-btn").click(function(){
        $("#ac-wrapper").hide();
         // hide 
    });

    // hides the popup if user clicks anywhere outside the container
    $("#ac-wrapper").click(function(){
        $("#popup").hide();
    })

    // prevents the overlay from closing if user clicks inside the popup overlay
    $("#ac-wrapper.").click(function(e) {
    e.preventDefault();         
    var $this = $(this);
    var horizontalPadding = 30;
    var verticalPadding = 30;     
    });
});

HTML

<input type="hidden" id="VAT_shipping" value="<? print $shipping; ?>" />

<div id="ac-wrapper">
    <div id="popup">
      <center>
        <p>
       <strong> You have selected World Free Tax Zone - £19.95 for shipping. </strong>

        We will automatically remove the VAT - 20% from your order.

        Please click close to return to review your order.

        </p>
        <button class="close-btn">Close</button>
      </center>
    </div>
      </div>

CSS

#ac-wrapper {
    display:none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.6);
    z-index: 1001;
    }
#popup {

    width: 555px;
    height: 375px;
    background: #FFFFFF;
    border: 5px solid #000;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    box-shadow: #64686e 0px 0px 3px 3px;
    -moz-box-shadow: #64686e 0px 0px 3px 3px;
    -webkit-box-shadow: #64686e 0px 0px 3px 3px;
    position: relative;
    top: 200px; left: 375px;
    font-size: 16px;
    font-family: 'Oxygen', sans-serif;
    text-align: center
}

    .close-btn {
        cursor: pointer;
    font-family:Tahoma, Geneva, sans-serif;
    border: 1px solid #000000;
    color: #ffffff;
    background-color: #AC9E33;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 0 1px 1px #000000;
    font: bold 11px Sans-Serif;
    text-transform:none;
    padding: 7px 12px;
    margin:0;
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
    background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
    background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
    background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    -ms-transition: background-color 0.3s;
    transition: background-color 0.3s;
}
    .close-btn:hover {
    font-family:Tahoma, Geneva, sans-serif;
    border: 1px solid #000000;
    color: #ffffff;
    background-color: #515280;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 0 1px 1px #000000;
    font: bold 11px Sans-Serif;
    text-transform:none;
    padding: 7px 12px;
    margin:0;
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
    background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
    background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
    background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    -ms-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

So the jQuery function checks the value of the shipping input field and if it is equal to var money = 19.95 then the ac-wrapper and nested popup is shown. The client can then close this window, using the `close-btn' or by clicking outside of the element.

Can somebody explain how to do this please.

Answer 1

Your first problem is

if ($("input[name='shipping']").val(money); )  {

should be

if ($("input[id='shipping']").val() == money )  {

OR

    if ($("input[id='shipping'][type='hidden']").val() == money )  {

Answer 2

From the looks of things you're trying to determine whether or not to show a pop-up based on the value of a drop-down (says in your code). For that you'd need a dropdown.

<select id="shipping_dropdown" name="shipping_dropdown" required>
    <option value="">Select shipping method</option>
    <option value="25.00">Not this one</option>
    <option value="19.95">This one</option>
</select>

Next you say that you want to read the value from a hidden <input> field. Why? This seems unnecessary. You could do the following to read a users' selection.

<script type="text/javascript">
    $(document).ready(function({
        $("#shipping_dropdown").change(function(){
            //Handler for when the value of this ID (shippping_dropdown) changes
            if( $(this).val() == "19.95" ){
                //Replace alert() with your pop-up
                alert("You have selected World Free Tax Zone - £19.95 for shipping."); 
            }
        });
    });
</script>

See about the .change() function here .

Answer 3

Your code

if ($("input[name='shipping']").val(money); )  {
        //code

    $('.ac-wrapper').show().css({'height' : docHeight}); 
    $('.popup').css({'top': scrollTop+20+'px'});
});

two syntax error

• first line: if ($("input[id='shipping']").val()==money ) {
• last line: }