CODEWITHSUNDEEP
javascriptjqueryhtml
sayo9394
sayo9394

Reputation: 485

Hide/Show div element depending on text in input field

First let me start by that i'm like fish out of water when it comes to Web development. I am a C/C++, Labview developer who never had to touch HTML, JQuery code.

I've developed a logger to display errors, warnings, and other info in an HTML file. I've successfully managed to write the JQuery code to show/hide divs depending on button clicks. eg; Error Button only shows errors in red font etc..

Now i'm trying to introduce a text box that will show/hide divs depending on text value. I have some code implemented but not working. here is the code;

<button id="showError">Show Error</button> 
<button id="showDebug">ShowDebug</button>
<button id="showAll">Show All</button>
<input type="text" name="keywords">

<script>
  $("#showError").click(function () {  
    $('div[id^="error"]').show();
    $('div[id^="debug"]').hide();
  });
  $("#showDebug").click(function () {  
    $('div[id^="error"]').hide();
    $('div[id^="debug"]').show();
  });
  $("#showAll").click(function () {  
    $('div[id^="error"]').show();
    $('div[id^="debug"]').show();
  });  

  // this is where i need the help! I can't 
  // the regular expression to execute. 
  $('.keywords').keyup(function() {
      var value = $(this).val();
      var exp = new RegExp('^' + value, 'i');

      $('div[id^="error"]').each(function() {
          var isMatch = exp.test($(this).text());
          $(this).toggle(isMatch);
      });
  });
  // End of problem
</script>
<div style="color: rgb(51, 51, 255);" id="error">20140124_145317 -    MainLoop:  LoadTestStationConfiguration   </div>
<div style="color: rgb(51, 51, 0);" id="debug">20140124_145338 -    MainLoop:  ReadConfigData   </div>
<div style="color: rgb(51, 51, 255);" id="error">20140124_145338 -    SecondLoop:  CheckForNewSoftwareVersion   </div>

So if the input text value = SecondLoop, then only the last div element would show. if input text value = MainLoop, then first 2 elements will show up.

Thank you for taking your time reading this, and again, this is my first time ever programming in the browser! ( so different to C++ ;) )

Upvotes: 1

Views: 3033

Answers (3)

Travesty3
Travesty3

Reputation: 14489

First problem, you're using $('.keywords'). The . prefix gets an element by class, not name. To get the element with the name 'keywords', you would use $('[name="keywords"]').

Second, it looks like you're a bit confused as to which attributes to use for which cases. One big rule is that you should never have more than one element on the page with the same ID. So the fact that you have two <div> elements with the id of 'error' is invalid. These should probably be classes instead of ids. The name attribute is used for elements within a form. When the form is submitted, the values are sent to the web server with the name attribute as their key.

Now that we've cleared up when to use id vs. class vs. name, it might make more sense for you to use an id attribute for the 'keywords' element. It looks like there will only ever be one 'keywords' element and I don't see a form.

The selectors you're using, like $('div[id^="error"]'), aren't really useful for your scenario. What this selector is doing, is getting any <div> element with an id attribute starting with the string 'error'. So it would get any of the following elements:

<div id="error"></div>
<div id="error2"></div>
<div id="errorblahzasoidjren"></div>

I don't see any cases like this in your code, so it would be the same to just use $('#error'), although if you followed my previous suggestion, you would have switched those to class attributes instead and would be using $('.error').

Another thing is that it looks like you're relying on the user to type the correct text into the box in order to trigger an action. A more straightforward approach might be to use a <select> element instead. This will define exactly which values can be entered and let the user simply click to choose which one they want. Here is your code, cleaned up with these suggestions:

<button id="showError">Show Error</button> 
<button id="showDebug">ShowDebug</button>
<button id="showAll">Show All</button>
<select id="keywords">
    <option>MainLoop</option>
    <option>SecondLoop</option>
</select>

<script>
    $("#showError").click(function () {  
        $('.error').show();
        $('.debug').hide();
    });
    $("#showDebug").click(function () {  
        $('.error').hide();
        $('.debug').show();
    });
    $("#showAll").click(function () {  
        $('.error').show();
        $('.debug').show();
    });  

    $('#keywords').change(function() {
        var value = $(this).val();
        var exp = new RegExp('^' + value, 'i');

        $('.error').each(function() {
            var isMatch = exp.test($(this).text());
            $(this).toggle(isMatch);
        });
    });
</script>
<div style="color: rgb(51, 51, 255);" class="error">20140124_145317 -    MainLoop:  LoadTestStationConfiguration   </div>
<div style="color: rgb(51, 51, 0);" class="debug">20140124_145338 -    MainLoop:  ReadConfigData   </div>
<div style="color: rgb(51, 51, 255);" class="error">20140124_145338 -    SecondLoop:  CheckForNewSoftwareVersion   </div>

Upvotes: 2

leo108
leo108

Reputation: 817

$('.keywords')

wrong use of selector,change to this

$('input[name=keywords]')

Upvotes: 3

Deryck
Deryck

Reputation: 7668

$('.keywords').keyup(function() {

This isn't going to select your text input because your input is identified with name not class.

This is what you want:

$('input[name=keywords]').keyup(function() {

Unrelated, you have more than one <div> at the end of your code with the same ID. Only the first one will be affected unless you either change the IDs or use class="error" instead of id="error"

Upvotes: 2

Related Questions