0

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").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() {
            $("input[id^='field'][id$='A']").val(text);    
        });
    });
});

(Full code below in the snippet)

How can I edit this selector, to inserting chosen value only to input which I clicked? 

input[id^='field'][id$='A']

Every ID is unique.

$("input[id^='field'][id$='A']").on('click', function() {
    $("#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() {
            $("input[id^='field'][id$='A']").val(text);    
        });
    });
});

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

$("#modalB img").on('click', function() {
    var text = $(this).siblings('.descr').text();
    $("#modalB").fadeOut(400, function() {
        $("#bgB").fadeOut(400, function() {
            $("input[id^='field'][id$='B']").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;}
#modal div {display: inline-block;}
#modal img {height; 180px; width: 180px; opacity: 0.8; cursor: pointer; }
#modal img: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;}
#modalB div {display: inline-block;}
#modalB img {height; 180px; width: 180px; opacity: 0.8; cursor: pointer; }
#modalB img:hover {opacity: 1;}

.descr {position: relative; width: 180px; padding: 0 0 0 70px ;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1A <input type="text" class="field" id="field1A" />
<br>
1B <input type="text" class="field" id="field1B" />
<br>
2A <input type="text" class="field" id="field2A" />
<br>
2B <input type="text" class="field" id="field2B" />
<br>
3A <input type="text" class="field" id="field3A" />
<br>
3B <input type="text" class="field" id="field3B" />


<div id="bg"></div>
<div id="modal">
    <div>Select an animal !</div>
    <br><br>
    <div>
        <img src="http://www.bestcatanddognutrition.com/wp-content/uploads/2011/06/cat-teeth.jpg" /><br>
        <span class="descr">cat</span>
    </div>
    <div>
        <img src="https://www.what-dog.net/Images/faces2/main009.jpg" /><br>
        <span class="descr">dog</span>
    </div>
    <div>
        <img src="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br>
        <span class="descr">cow</span>
    </div>
</div>

<div id="bgB"></div>
<div id="modalB">
    <div>Select an animal !</div>
    <br><br>
    <div>
        <img src="http://www.bestcatanddognutrition.com/wp-content/uploads/2011/06/cat-teeth.jpg" /><br>
        <span class="descr">cat</span>
    </div>
    <div>
        <img src="https://www.what-dog.net/Images/faces2/main009.jpg" /><br>
        <span class="descr">dog</span>
    </div>
    <div>
        <img src="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br>
        <span class="descr">cow</span>
    </div>
</div>

Thanks

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
David
  • 35
  • 8
  • "How can I edit this selector, to inserting chosen value only to input which I clicked?"...but in the part where you run `$("input[id^='field'][id$='A']").val(text); `, you didn't click on the input, you clicked on an image. So your request doesn't entirely make sense. You'll have to locate the correct input via some other means - e.g. position in the dom, data-attribute or something else. – ADyson Mar 08 '18 at 14:10
  • I click to input before open modal. Image is in modal. - try JSFiddle ;) – David Mar 08 '18 at 14:13
  • Please don't link to your executable code with a 3rd party link as links can die over time. Just place your code into a "code snippet" right here in SO. – Scott Marcus Mar 08 '18 at 14:14
  • "I click to input before open modal. Image is in modal." Yes but that event is long gone. There's no implicit connection between the first click and the second. As per the accepted answer you have to make that connection yourself. – ADyson Mar 08 '18 at 14:33

3 Answers3

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

void
  • 36,090
  • 8
  • 62
  • 107
0

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;
}

#modal div {
  display: inline-block;
}

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

#modal img: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;
}

#modalB div {
  display: inline-block;
}

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

#modalB img:hover {
  opacity: 1;
}

.descr {
  position: relative;
  width: 180px;
  padding: 0 0 0 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1A <input type="text" class="field" id="field1A" />
<br> 1B <input type="text" class="field" id="field1B" />
<br> 2A <input type="text" class="field" id="field2A" />
<br> 2B <input type="text" class="field" id="field2B" />
<br> 3A <input type="text" class="field" id="field3A" />
<br> 3B <input type="text" class="field" id="field3B" />


<div id="bg"></div>
<div id="modal">
  <div>Select an animal !</div>
  <br><br>
  <div>
    <img src="http://www.bestcatanddognutrition.com/wp-content/uploads/2011/06/cat-teeth.jpg" /><br>
    <span class="descr">cat</span>
  </div>
  <div>
    <img src="https://www.what-dog.net/Images/faces2/main009.jpg" /><br>
    <span class="descr">dog</span>
  </div>
  <div>
    <img src="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br>
    <span class="descr">cow</span>
  </div>
</div>

<div id="bgB"></div>
<div id="modalB">
  <div>Select an animal !</div>
  <br><br>
  <div>
    <img src="http://www.bestcatanddognutrition.com/wp-content/uploads/2011/06/cat-teeth.jpg" /><br>
    <span class="descr">cat</span>
  </div>
  <div>
    <img src="https://www.what-dog.net/Images/faces2/main009.jpg" /><br>
    <span class="descr">dog</span>
  </div>
  <div>
    <img src="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br>
    <span class="descr">cow</span>
  </div>
</div>
Nope
  • 22,147
  • 7
  • 47
  • 72
0

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;
}

#modal div {
  display: inline-block;
}

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

#modal img: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;
}

#modalB div {
  display: inline-block;
}

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

#modalB img:hover {
  opacity: 1;
}

.descr {
  position: relative;
  width: 180px;
  padding: 0 0 0 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
1A <input type="text" class="field" id="field1A" />
<br> 1B <input type="text" class="field" id="field1B" />
<br> 2A <input type="text" class="field" id="field2A" />
<br> 2B <input type="text" class="field" id="field2B" />
<br> 3A <input type="text" class="field" id="field3A" />
<br> 3B <input type="text" class="field" id="field3B" />


<div id="bg"></div>
<div id="modal">
  <div>Select an animal !</div>
  <br><br>
  <div>
    <img src="https://www.petmd.com/sites/default/files/petmd-cat-happy.jpg" /><br>
    <span class="descr">cat</span>
  </div>
  <div>
    <img src="https://www.what-dog.net/Images/faces2/main009.jpg" /><br>
    <span class="descr">dog</span>
  </div>
  <div>
    <img src="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br>
    <span class="descr">cow</span>
  </div>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236