?
Solved

Check Value and display:none

Posted on 2014-01-14
17
Medium Priority
?
346 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:Nathan Riley
[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 12

Author Comment

by:Nathan Riley
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 12

Author Comment

by:Nathan Riley
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 12

Author Comment

by:Nathan Riley
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 12

Author Comment

by:Nathan Riley
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 12

Author Comment

by:Nathan Riley
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 12

Author Comment

by:Nathan Riley
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 12

Author Comment

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

Accepted Solution

by:
Gary earned 2000 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 12

Author Comment

by:Nathan Riley
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 12

Author Comment

by:Nathan Riley
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…
Suggested Courses

777 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