Solved

Check Value and display:none

Posted on 2014-01-14
17
333 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn how to dynamically set the form action using jQuery.

708 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now