Solved

Check Value and display:none

Posted on 2014-01-14
17
340 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Print Rhino Java Array in Javascript 1 36
Navigation Menu Does Not Show on iPad 4 31
Getting selected value using Jquery 3 20
Calculating percentage 2 29
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn how to dynamically set the form action using jQuery.

749 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