Jquery Selector - Inserting Value Only To Selected Id

I have form with many inputs. And in JavaScript I have script for open modal window and choose options. $('input[id^='field'][id$='A']').on('click', function() { $('#bg').fade

Solution 1:

You can store the id in a variable. Set it once you open the model and use it when you are setting the value.

var inputAId = "";
$("input[id^='field'][id$='A']").on('click', function() {
  // Set it here...
  inputAId = this.id;
  $("#bg").fadeIn(400, function() {
    $("#modal").fadeIn(400);
  });
});

$("#modal img").on('click', function() {
  var text = $(this).siblings('.descr').text();
  $("#modal").fadeOut(400, function() {
    $("#bg").fadeOut(400, function() {
      // Later use it here...
      $("#" + inputAId).val(text);
    });
  });
});

Updated fiddle

Solution 2:

Store a reference to the jQuery wrapped element:

var $theTarget;

$("input[id^='field'][id$='A']").on('click', function() {
  $theTarget = $(this);
  $("#bg").fadeIn(400, function() {
    $("#modal").fadeIn(400);
  });
});

$("input[id^='field'][id$='B']").on('click', function() {
  $theTarget = $(this);
  $("#bgB").fadeIn(400, function() {
    $("#modalB").fadeIn(400);
  });
});

$("#modal img").on('click', function() {
  var text = $(this).siblings('.descr').text();
  $("#modal").fadeOut(400, function() {
    $("#bg").fadeOut(400, function() {
      $theTarget.val(text);
    });
  });
});

$("#modalB img").on('click', function() {
  var text = $(this).siblings('.descr').text();
  $("#modalB").fadeOut(400, function() {
    $("#bgB").fadeOut(400, function() {
      $theTarget.val(text);
    });
  });
});

.field {
  margin: 10px;
}

#bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  display: none;
}

#modal {
  position: absolute;
  height: 300px;
  width: 600px;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -300px;
  background: #fff;
  display: none;
}

#modaldiv {
  display: inline-block;
}

#modalimg {
  height;
  180px;
  width: 180px;
  opacity: 0.8;
  cursor: pointer;
}

#modalimg:hover {
  opacity: 1;
}

#bgB {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  display: none;
}

#modalB {
  position: absolute;
  height: 300px;
  width: 600px;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -300px;
  background: #fff;
  display: none;
}

#modalBdiv {
  display: inline-block;
}

#modalBimg {
  height;
  180px;
  width: 180px;
  opacity: 0.8;
  cursor: pointer;
}

#modalBimg:hover {
  opacity: 1;
}

.descr {
  position: relative;
  width: 180px;
  padding: 00070px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1A <inputtype="text"class="field"id="field1A" /><br> 1B <inputtype="text"class="field"id="field1B" /><br> 2A <inputtype="text"class="field"id="field2A" /><br> 2B <inputtype="text"class="field"id="field2B" /><br> 3A <inputtype="text"class="field"id="field3A" /><br> 3B <inputtype="text"class="field"id="field3B" /><divid="bg"></div><divid="modal"><div>Select an animal !</div><br><br><div><imgsrc="http://www.bestcatanddognutrition.com/wp-content/uploads/2011/06/cat-teeth.jpg" /><br><spanclass="descr">cat</span></div><div><imgsrc="https://www.what-dog.net/Images/faces2/main009.jpg" /><br><spanclass="descr">dog</span></div><div><imgsrc="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br><spanclass="descr">cow</span></div></div><divid="bgB"></div><divid="modalB"><div>Select an animal !</div><br><br><div><imgsrc="http://www.bestcatanddognutrition.com/wp-content/uploads/2011/06/cat-teeth.jpg" /><br><spanclass="descr">cat</span></div><div><imgsrc="https://www.what-dog.net/Images/faces2/main009.jpg" /><br><spanclass="descr">dog</span></div><div><imgsrc="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br><spanclass="descr">cow</span></div></div>

Solution 3:

This is more elegant in my opinion

$(".field").on('click', function() {
  $("#modal img").data("currID", this.id);
  $("#bg").fadeIn(400, function() {
    $("#modal").fadeIn(400);
  });
});

$("#modal img").on('click', function() {
  var text = $(this).siblings('.descr').text(),
    inputAId = $(this).data("currID");
  console.log(inputAId)
  $("#modal").fadeOut(400, function() {
    $("#bg").fadeOut(400, function() {
      $("#" + inputAId).val(text);
      $("#modal img").data("currID", "");
    });
  });
});

.field {
  margin: 10px;
}

#bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  display: none;
}

#modal {
  position: absolute;
  height: 300px;
  width: 600px;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -300px;
  background: #fff;
  display: none;
}

#modaldiv {
  display: inline-block;
}

#modalimg {
  height;
  180px;
  width: 180px;
  opacity: 0.8;
  cursor: pointer;
}

#modalimg:hover {
  opacity: 1;
}

#bgB {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  display: none;
}

#modalB {
  position: absolute;
  height: 300px;
  width: 600px;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -300px;
  background: #fff;
  display: none;
}

#modalBdiv {
  display: inline-block;
}

#modalBimg {
  height;
  180px;
  width: 180px;
  opacity: 0.8;
  cursor: pointer;
}

#modalBimg:hover {
  opacity: 1;
}

.descr {
  position: relative;
  width: 180px;
  padding: 00070px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
1A <inputtype="text"class="field"id="field1A" /><br> 1B <inputtype="text"class="field"id="field1B" /><br> 2A <inputtype="text"class="field"id="field2A" /><br> 2B <inputtype="text"class="field"id="field2B" /><br> 3A <inputtype="text"class="field"id="field3A" /><br> 3B <inputtype="text"class="field"id="field3B" /><divid="bg"></div><divid="modal"><div>Select an animal !</div><br><br><div><imgsrc="https://www.petmd.com/sites/default/files/petmd-cat-happy.jpg" /><br><spanclass="descr">cat</span></div><div><imgsrc="https://www.what-dog.net/Images/faces2/main009.jpg" /><br><spanclass="descr">dog</span></div><div><imgsrc="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br><spanclass="descr">cow</span></div></div>