Using jQuery to show/hide an element if some value is found in document

Question

I'm trying to hide an element if some specific value of input is not found on the site. I can hide an element by:

$(document).ready(function() {
$("#someid").hide();
});

But how to show it, if the value is found? I'm trying to do something like this:

$(document).ready(function() {
$("#someid").hide();
$("input[value$='somevaluetobefound']").ready(function() {
    $("#someid").show();
});
});

What am I doing wrong?

1. Use an `if` statement, not `ready`. 2. Listen on an event. Your current setup checks the value on document ready, then never again. — jmargolisvt, Mar 14 '17 at 13:43
Could you look at my answer what am I doing wrong? @jmargolisvt — katt, Mar 14 '17 at 14:38

score 1 · Answer 1 · answered Mar 14 '17 at 13:54

1

Try this:

$(document).ready(function() {
$("#someid").hide();

$('#inputID').on('input', function() {
 if ( $('input').val() === 'test') {
    $("#someid").show();
 }
  else $("#someid").hide();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type 'test' to show DIV<br>
<input id="inputID" type="text">
<div id="someid">DIV</div>

answered Mar 14 '17 at 13:54

Arkej

2,221
1
14
21

the problem is, my input doesn't have an ID, it's a `value` string which I need to distinguish from another – katt Mar 14 '17 at 14:35
Why can't your input have an id? In most cases it is necessary to have an id, if not for javascript but for CSS too. – DDelgro Mar 14 '17 at 14:40
it's old oscommerce shop engine – katt Mar 14 '17 at 14:43
If it's an old oscommerce shop engine it probably is aspx, correct? And I highly doubt there isn't an ID tag on it, if there is all you have to do in your html markup is grab the ID like so: `$("#<%=inputID.ClientID%>")` – DDelgro Mar 14 '17 at 15:03

score 0 · Answer 2 · answered Mar 14 '17 at 13:43

0

<script type="text/javascript">
 $(document).ready(function () {
   $("input[value=somevaluetobefound]").closest('#someid').hide();
 });
</script>

answered Mar 14 '17 at 13:43

mayersdesign

5,062
4
35
47

While this code may answer the question, providing additional context regarding _how_ and/or _why_ it solves the problem would improve the answer's long-term value. – Dev-iL Mar 14 '17 at 17:19

score 0 · Answer 3 · answered Mar 14 '17 at 13:44

0

you can try this :

$(document).ready(function() {
 $("#someid").hide();

 if($("#someid").val() !=''){
     $("#someid").show();
 }
});

answered Mar 14 '17 at 13:44

gaurav rai

103
2
11

How should I define here ` input[value$='somevaluetobefound'] `? – katt Mar 14 '17 at 14:05

rpabood · Accepted Answer · 2017-03-15T14:44:59.697

0

I had not fully understood what you where trying to acomplish:

$( document ).ready(function() {
 if (!$('input[value="somevaluetobefound"]'))
  $("#someid").hide();

  $(':input').on('keyup', function(){       
   if ($(this).val() == 'somevaluetobefound')  
    {
      $("#someid").show();
    } else {
         $("#someid").hide();
    }
  });
});

I have updated the code here

EDIT: Based on new info provided by OP

$( document ).ready(function() {
  if ($(':radio[value="somevaluetobefound"]').length !== 0)
   $("#someid").show();
  else 
   $("#someid").hide();
});

Sample here

edited Mar 15 '17 at 14:44

answered Mar 14 '17 at 13:45

rpabood

71
5

How should I define here ` input[value$='somevaluetobefound'] `? – katt Mar 14 '17 at 14:05
@katt if you are looking for a specific value it should be: `if ($("#someid").val() == 'somevaluetobefound')` – rpabood Mar 14 '17 at 14:07
could you look at my answer if I do everything right? – katt Mar 14 '17 at 14:19
@katt I have updated my answer so it uses the selector the way you want. – rpabood Mar 14 '17 at 14:40
Thanks for your answer, but that code shows a div even if ` – katt Mar 14 '17 at 14:51
Sorry, I had not fully understood what you where trying to acomplish @katt – rpabood Mar 14 '17 at 15:28
Sadly, still, if I will change the value of input from `somevaluetobefound` to anything other, the div is not being hided. – katt Mar 14 '17 at 17:44
@katt did you check the [updated](https://jsfiddle.net/gatrk7rs/6/) code? If you change the value in the box the div is hidden and shown again when it matches the text again. In case that is not what you want, you should better explain what it is you need. – rpabood Mar 14 '17 at 18:12
Oh, I didn't try that, it actually works :) However, it's not what I need :( My input is radio type, so the value is only an information about kind of input. What I need is to hide div if this `somevaluetobefound` value is not found. – katt Mar 14 '17 at 19:30
You can see what I mean here https://jsfiddle.net/n7nkgbpx/ If first `input` would not be found the div shouldn't be shown. Is it doable by jQuery? – katt Mar 14 '17 at 19:36
I have to start learning jQuery, because it's a really great tool to use on websites. Thank you again :) – katt Mar 15 '17 at 07:12
Oh, i've get little scared, because it worked on my localhost, but didn't in public. Then I realised some problems with using $, so I changed them all to `jQuery` and now everything works :) – katt Mar 15 '17 at 08:08
@kat glad to help! – rpabood Mar 15 '17 at 14:45

score 0 · Answer 5 · edited May 23 '17 at 12:32

Improvising on @Arkej's answer:

$(document).ready(function() {
    $("#someDiv").hide();

    $(':input').on('input', function() {
        if ( $('input').val() === 'somevalue') {
             $("#someDiv").show();
           }
        else $("#someDiv").hide();
         });
    });

Here I am using :input to find all input boxes on the page. Since you need to either have an ID the input field you want or just have all input text boxes be used to show or hide your div depending on what the value you are looking for.

Also refer to this for guidance on getting val from inputs: Get the value in an input text box

Cheers

Using jQuery to show/hide an element if some value is found in document

5 Answers5