CODEWITHSUNDEEP
htmljquery
Sylwester Marć
Sylwester Marć

Reputation: 36

Set input type hidden value with jQuery using closest() method

I'm trying to set the value of the input[type=hidden] that is closest to the tag <img src="off.png"> or <img src="on.png">

Is there something I don't get. Any suggestions?

$(document).on('click', 'img.toggle', function() {
  var atr = $(this).attr("src");
  var ths = $(this);

  if (atr == "off.png") {
    $(this).attr("src", "on.png");
    $("input[type='hidden']").closest(ths).val("on");
  }

  if (atr == "on.png") {
    $(this).attr("src", "off.png");
    $("input[type='hidden']").closest(ths).val("off");
  }

  console.log($("input[type='hidden']").closest(ths).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
  <legend>Instalacja elektryczna:</legend>
  <div class="separator">
    Posiadana instalacja 3 fazowa 
    <input class="xForm" type="hidden" name="instalacja_trojfazowa" />
    <img class="toggle" src="off.png" />
  </div>
  <div class="separator">
    Instalacja posiada "Neutral" 
    <input class="xForm" type="hidden" name="posiada_neutral" />
    <img class="toggle" src="off.png" />
  </div>
  <div class="separator">
    Instalacja posiada "Uziemienie" 
    <input class="xForm" type="hidden" name="posiada_uziemienie" />
    <img class="toggle" src="off.png" />
  </div>
  <div class="separator">
    Napięcie na 1 fazę +-10%
    <input class="xForm" type="text" name="napiecie_nafaze" />
  </div>
  <div class="separator"> 
    Nie znam tych parametrów 
    <input class="xForm" type="hidden" name="nie_znamparel" />
    <img class="toggle" src="off.png" />
  </div>
</fieldset>

Upvotes: 1

Views: 50

Answers (2)

angel.bonev
angel.bonev

Reputation: 2232

In your structute you need to use siblings , becouse img and input:hidden are at the same level, closest is looking in the parents and returns the first match

$(document).on('click', 'img.toggle', function () {
    var atr = $(this).attr("src");
    var ths = $(this);
    var sibling = $(this).siblings('input:hidden')
    if (atr == "off.png") {
        $(this).attr("src", "on.png");
        $(sibling).val("on");
    }
    if (atr == "on.png") {
        $(this).attr("src", "off.png");
        $(sibling).val("off");
    }

    alert($(sibling).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
    <legend>Instalacja elektryczna:</legend>
    <div class="separator">Posiadana instalacja 3 fazowa <input class="xForm"  type="hidden" name="instalacja_trojfazowa"  /><img class="toggle" src="off.png" /></div>
    <div class="separator">Instalacja posiada "Neutral" <input class="xForm"  type="hidden" name="posiada_neutral"  /><img class="toggle" src="off.png" /></div>
    <div class="separator">Instalacja posiada "Uziemienie" <input class="xForm"  type="hidden" name="posiada_uziemienie" /><img class="toggle" src="off.png" /></div>
    <div class="separator">Napięcie na 1 fazę +-10% <input class="xForm"  type="text" name="napiecie_nafaze"  /></div>
    <div class="separator">Nie znam tych parametrów <input class="xForm"  type="hidden" name="nie_znamparel" /><img class="toggle" src="off.png" /></div>
</fieldset>

Upvotes: 0

Quentin
Quentin

Reputation: 943537

Look at the description of closest:

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

<input> and <img> are both void elements. They can't have children. The <img> therefore cannot be the ancestor of the <input>.

Your elements are siblings. Use the prev method instead.

Better yet, don't use JavaScript at all. Make the hidden input a checkbox and put the image in its <label>

Upvotes: 2

Related Questions