Solved

Check Value and display:none

Posted on 2014-01-14
17
338 Views
Last Modified: 2014-01-14
I have a form field:
<input type="text" class="input-text" name="billing_postcode" id="billing_postcode" placeholder="Postcode / Zip" value="10024" autocomplete="no">

Open in new window


I want to check it with jquery.  If value=10024 then I want it to hide another div.

The style code to execute is:
<style>
#shipping_method_fedexfedex_ground
{
display:none;
}
</style>

I also need to hide <label for="shipping_method_fedexfedex_ground">FedEx Ground: <span class="amount">$7.68</span></label> this label, but not sure how you call that in CSS to do so.
0
Comment
Question by:N R
  • 9
  • 8
17 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39780545
And how would you be calling the jquery?


if($("#billing_postcode").val()=="10024"){
     $("[for=shipping_method_fedexfedex_ground]").hide()
     $("#shipping_method_fedexfedex_ground").hide()
}
0
 
LVL 11

Author Comment

by:N R
ID: 39780569
Not sure.  As they enter their billing information they then hit update to get their shipping results.  So I would think on the page load it will check this right?
0
 
LVL 11

Author Comment

by:N R
ID: 39780577
Tried document ready but doesn't seem to work.
<script>
jQuery(document).ready(function(){
if($("#billing_postcode").val()=="10024"){
     $("[for=shipping_method_fedexfedex_ground]").hide()
     $("#shipping_method_fedexfedex_ground").hide()
}
}
</script>

Open in new window

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 58

Expert Comment

by:Gary
ID: 39780585
What cart are you using?
We can probably just initiate it on a change


$(function() {
$("#billing_postcode").change(function(){
if($(this).val()=="10024"){
     $("[for=shipping_method_fedexfedex_ground]").hide()
     $("#shipping_method_fedexfedex_ground").hide()
}
})
})
0
 
LVL 11

Author Comment

by:N R
ID: 39780587
It's woocommerce.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39780590
Just try the code above, I just did edit it slightly.
0
 
LVL 11

Author Comment

by:N R
ID: 39780601
Ah it works if it's changed.  I would prefer on page load if the field = 10024 then just to hide it.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39780612
$(function() {
$("#billing_postcode").change()
$("#billing_postcode").change(function(){
if($(this).val()=="10024"){
     $("[for=shipping_method_fedexfedex_ground]").hide()
     $("#shipping_method_fedexfedex_ground").hide()
} 
})
}) 

Open in new window

0
 
LVL 11

Author Comment

by:N R
ID: 39780628
Hmm...still hides it on change, but when the page loads the option is not hidden even though the value is 10024.

Here is how I added the jquery:
  <script>
$(function() {
$("#billing_postcode").change()
$("#billing_postcode").change(function(){
if($(this).val()=="10024"){
     $("[for=shipping_method_fedexfedex_ground]").hide()
     $("#shipping_method_fedexfedex_ground").hide()
} 
})
}) 
</script>

Open in new window

0
 
LVL 11

Author Comment

by:N R
ID: 39780645
This may help, put up the code example here, I would like on load that it auto hides it.

http://jsfiddle.net/9swr7/
0
 
LVL 58

Expert Comment

by:Gary
ID: 39780648
Got a link to the page? It probably doesn't exist at page load and is loaded with ajax.
0
 
LVL 11

Author Comment

by:N R
ID: 39780651
Sure thing, http://goo.gl/t4nnUC
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39780662
My mistake setting a change before the function
<script>
$(function() {
$("#billing_postcode").change(function(){
if($(this).val()=="10024"){
     $("[for=shipping_method_fedexfedex_ground]").hide()
     $("#shipping_method_fedexfedex_ground").hide()
} 
})
$("#billing_postcode").change()
}) 
</script>

Open in new window

0
 
LVL 11

Author Comment

by:N R
ID: 39780673
That worked thanks!  If I want to do multiple can I use || as or like in php ?

<script>
$(function() {
$("#billing_postcode").change(function(){
if($(this).val()=="10024" || $(this).val()=="10025"){
     $("[for=shipping_method_fedexfedex_ground]").hide()
     $("#shipping_method_fedexfedex_ground").hide()
} 
})
$("#billing_postcode").change()
}) 
</script>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39780677
Spot on!
0
 
LVL 11

Author Comment

by:N R
ID: 39780682
Ok one last question, can open a new on if it's too unrelated.

What if I want to do a range of them?  Like 04300-04400
0
 
LVL 58

Expert Comment

by:Gary
ID: 39780701
if($(this).val()>=4300 && $(this).val()<=4400){
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question