CODEWITHSUNDEEP
javascripthtmljquery
Lorenzo Donadio
Lorenzo Donadio

Reputation: 63

filter function with radio button

All I need is a function to filter my page based on the text contained in the div class desc that is the word PROD or test. I had thought of something like the one contained in the script tags but I can't get it to work.

 $(function () {
      $('input[name="test"]').on("click", function (a, b) {
        var value = this.value;
        $("#elenco > .desc").hide();
        if (value == "All") {
          $("#elenco > .desc").show();
        } else if (value == "PROD") {
          $("#elenco > .desc")
            .filter(function (a, b) {
              var v = b.value;
              return this.value;
            })
            .show();
        } else if (value == "TEST") {
          $("#elenco > .desc")
            .filter(function (a, b) {
              var v = b.value;
              return this.value;
            })
            .show();
        }
      });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" value="All" checked name="test" /><label>All</label>
<input type="radio" value="PROD" name="test" /><label> PROD</label>
<input type="radio" value="TEST" name="test" /><label>TEST</label>

<div id="elenco">
      <div class="cliente">
        cliente
        <div class="desc" value="PROD">
          betafrik prod <br />
          <img src="" />
        </div>
        <div class="funzioni">
          INDIRIZZI IP
          <button type="button" onclick="managerBetafrikP()" id="m1">manager</button>
          <button type="button" onclick="reloadmemBetafrikP()" id="r1">reload</button>
          <br />
          <ul>
            <li>
              <button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
              <div class="resultVersion" id="UpVersioneBetafrikP">Risultato</div>
            </li>
            <li>
              <button type="button" onclick="reloadmem()" class="rs1">10.13.1.47</button>
              <div class="result" id="resultBetafrikP1">Risultato</div>
            </li>
            <li>
              <button type="button" onclick="reloadmem()" class="rs1">10.13.1.48</button>
              <div class="result" id="resultBetafrikP2">Risultato</div>
            </li>
          </ul>
        </div>
      </div>

      <div class="cliente">
        cliente
        <div class="desc" value="TEST">
          betitaly test <br />
          <img src="" />
        </div>
        <div class="funzioni">
          INDIRIZZI IP
          <button type="button" onclick="managerBetitalyT()" id="m1">manager</button>
          <button type="button" onclick="reloadmem()" id="r1">reload</button>
          <br />
          <ul>
            <li>
              <button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
              <div class="resultVersion" id="UpVersioneBetitalyT">Risultato</div>
            </li>
            <li>
              <button type="button" onclick="reloadmem()" class="rs1">10.57.0.71</button>
              <div class="result" id="resultBetitalyT">Risultato</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="cliente">
        cliente
        <div class="desc">
          vincitù test <br />
          <img src="" />
        </div>
        <div class="funzioni">
          INDIRIZZI IP
          <button type="button" onclick="managerVincituT()" id="m1">manager</button>
          <button type="button" onclick="reloadmem()" id="r1">reload</button>
          <br />
          <ul>
            <li>
              <button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
              <div class="resultVersion" id="UpVersioneVincituT">Risultato</div>
            </li>
            <li>
              <button type="button" onclick="reloadmem()" class="rs1">10.55.0.71</button>
              <div class="result" id="resultVincituP">Risultato</div>
            </li>
          </ul>
        </div>
      </div>

      <div class="cliente">
        cliente
        <div class="desc" value="TEST">
          betitaly test <br />
          <img src="  " />
        </div>
        <div class="funzioni">
          INDIRIZZI IP
          <button type="button" onclick="managerBetitalyT()" id="m1">manager</button>
          <button type="button" onclick="reloadmem()" id="r1">reload</button>
          <br />
          <ul>
            <li>
              <button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
              <div class="resultVersion" id="UpVersioneBetitalyT">Risultato</div>
            </li>
            <li>
              <button type="button" onclick="reloadmem()" class="rs1">10.57.0.71</button>
              <div class="result" id="resultBetitalyT">Risultato</div>
            </li>
          </ul>
        </div>
      </div>
    </div>

I tried the function above which I can't get it to work. In practice, based on the selection button, only the results associated with it must appear and by default, the selected button must be ALL.

Upvotes: 3

Views: 235

Answers (2)

fdomn-m
fdomn-m

Reputation: 28611

A quick auto-format of your code shows that, where you have indentation indicating a child, .cliente is not a child of #elenco because you have <div id="elenco"></div>.

Your HTML:

<div id="elenco"></div>
    <div class="cliente">
    </div>
</div>

(with an error on the last </div>)

reformats as

<div id="elenco"></div>
<div class="cliente">
</div>
</div>

so it's easier to see that cliente is not a child of elenco.

Secondly, your selector is $("#elenco > .desc") where > means a direct-descendent (immediate child or similar term).

This is the same as $("#elenco").children().filter(".desc")

But .cliente is the direct-child and .desc is a child of .cliente - so your selector needs to be #elenco .desc or #elenco > .cliente > .desc

Thirdly, you filter by checking .desc .value is <10 - but the .value is "PROD" or "TEST", not numeric.

Question was updated:

Thirdly, you filter by return this.value

However, .filter requires a boolean to filter, so "truthy" this.value will always be true.

Looks like you just need to compare, as in:

var v = b.value;
return this.value == v;

For the snippet below I've changed this to just match on value using an attribute selector rather than filter.

Matching on attribute doesn't need the if (value== as it could be just

$("#elenco .desc[value='" + this.value + '"]").show();

but left as 2x if in the snippet in case there's some other filter to be applied.

$(function() {
  $('input[name="test"]').on('change', function(a, b) {
    var value = this.value;
    console.log(value)
    $('#elenco .desc').hide();
    if (value == 'All') {
      $('#elenco .desc').show();
    }
    if (value == 'PROD') {
      //$('#elenco .desc').filter(function(a, b) {
      //  var v = b.value;
      //  return 10 > v;
      //}).show();
      $('#elenco .desc[value="PROD"]').show();
    }
    if (value == 'TEST') {
      //$('#elenco .desc').filter(function(a, b) {
      //  var v = b.value;
      //  return v >= 10 && v <= 20;
      //}).show();
      $('#elenco .desc[value="TEST"]').show();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<input type="radio" value="All" checked name="test"><label>All</label>
<input type="radio" value="PROD" name="test"><label> Under 10$</label>
<input type="radio" value="TEST" name="test"><label>Between 10$ - 20$</label>

<div id="elenco">
  <div class="cliente">
    cliente
    <div class="desc" value="PROD">
      betafrik prod <br>
      <img src="">

    </div>
    <div class="funzioni">
      INDIRIZZI IP
      <button type="button" onclick="managerBetafrikP()" id="m1">manager</button>
      <button type="button" onclick="reloadmemBetafrikP()" id="r1">reload</button>
      <br>
      <ul>
        <li><button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
          <div class="resultVersion" id="UpVersioneBetafrikP">Risultato</div>
        </li>
        <li><button type="button" onclick="reloadmem()" class="rs1">10.13.1.47</button>
          <div class="result" id="resultBetafrikP1">Risultato</div>
        </li>
        <li><button type="button" onclick="reloadmem()" class="rs1">10.13.1.48</button>
          <div class="result" id="resultBetafrikP2">Risultato</div>
        </li>
      </ul>

    </div>
  </div>

  <div class="cliente">
    cliente
    <div class="desc" value="TEST">
      betitaly test <br>
      <img src="">

    </div>
    <div class="funzioni">
      INDIRIZZI IP
      <button type="button" onclick="managerBetitalyT()" id="m1">manager</button>
      <button type="button" onclick="reloadmem()" id="r1">reload</button>
      <br>
      <ul>
        <li><button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
          <div class="resultVersion" id="UpVersioneBetitalyT">Risultato</div>
        </li>
        <li><button type="button" onclick="reloadmem()" class="rs1">10.57.0.71</button>
          <div class="result" id="resultBetitalyT">Risultato</div>
        </li>
      </ul>

    </div>
  </div>

  <div class="cliente">
    cliente
    <div class="desc">
      vincitù test <br>
      <img src="">

    </div>
    <div class="funzioni">
      INDIRIZZI IP
      <button type="button" onclick="managerVincituT()" id="m1">manager</button>
      <button type="button" onclick="reloadmem()" id="r1">reload</button>
      <br>
      <ul>
        <li><button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
          <div class="resultVersion" id="UpVersioneVincituT">Risultato</div>
        </li>
        <li><button type="button" onclick="reloadmem()" class="rs1">10.55.0.71</button>
          <div class="result" id="resultVincituP">Risultato</div>
        </li>
      </ul>

    </div>
  </div>

  <div class="cliente">
    cliente
    <div class="desc" value="TEST">
      betitaly test <br>
      <img src="  ">

    </div>
    <div class="funzioni">
      INDIRIZZI IP
      <button type="button" onclick="managerBetitalyT()" id="m1">manager</button>
      <button type="button" onclick="reloadmem()" id="r1">reload</button>
      <br>
      <ul>
        <li><button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
          <div class="resultVersion" id="UpVersioneBetitalyT">Risultato</div>
        </li>
        <li><button type="button" onclick="reloadmem()" class="rs1">10.57.0.71</button>
          <div class="result" id="resultBetitalyT">Risultato</div>
        </li>
      </ul>

    </div>
  </div>
</div>

Upvotes: 4

Delano van londen
Delano van londen

Reputation: 416

try changing the 'change' to click like i did here below and adding else if, instead of 3 'if' s

 $(function () {
            $('input[name="test"]').on('click', function (a, b) {
                var value = this.value;
                $('#elenco > .desc').hide();
                if (value == 'All') {
                    $('#elenco > .desc').show();
                }
               else if (value == 'PROD') {
                    $('#elenco > .desc').filter(function (a, b) {
                        var v = b.value;
                        return 10 > v;
                    }).show();
                }
              else if (value == 'TEST') {
                    $('#elenco > .desc').filter(function (a, b) {
                        var v = b.value;
                        return v>=10 && v <= 20;
                    }).show();
                }
            });
        });

Upvotes: 0

Related Questions