How to get current input value in a div list with javascript button?
Question
I spent many time and I read a lot of articles here, but unfortunately I am still in trouble.
In the following code, how can I assign the correct input value to correct button?
My trials below return "always first input" or "undefined".
Many thanks,
Murat
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
document.getElementById("test2").onclick = function() {searchin()};
function searchin() {
// I tried every row below independently, not all of them at once (with or w/o "var" at the beginning):
metin2 = $(this).parent().find('input[name="metin2"]').val();
metin2 = $('input[name="metin2"]').val();
var metin2 = $(this).closest('.results').attr('data-artnr');
var metin2 = $(this).closest('.results').find('input[name="metin2"]').val();
// I tried every row above independently, not all of them at once:
alert(metin2);
}
</script>
</head>
<body>
<div class="results" data-artnr="1111">
<input type="text" class="test1" name="metin2" value="1111"><br><br>
<input type="button" class="test2" value="Suche (Basic)" onclick="searchin()"><br><br>
</div>
<hr>
<div class="results" data-artnr="2222">
<input type="text" class="test1" name="metin2" value="2222"><br><br>
<input type="button" class="test2" value="Suche (Basic)" onclick="searchin()"><br><br>
</div>
<hr>
<div class="results" data-artnr="3333">
<input type="text" class="test1" name="metin2" value="3333"><br><br>
<input type="button" class="test2" value="Suche (Basic)" onclick="searchin()"><br><br>
</div>
</body>
</html>
3 answers
solution1
0 ACCPTED 2018-10-03 12:21:33
- You try to access test2 before it exists
- You load jQuery, so why not use it? This is not jQuery
document.getElementById("test2").onclick = function() {searchin()};whereas this is:$(".test2").on("click", function() { - Don't use inline event handling (onclick="searchin()") and for sure not at the same time as assigning event handlers in script
All your selectors work when the wrapping code works
I would personally use $(this).prevAll("input").val()
Here is the preferred and recommended method to assign event handlers using jQuery
$(function() { // when page loads $(".test2").on("click", function() { // click any class="test2" var metin2a = $(this).parent().find('input[name="metin2"]').val(); var metin2b = $('input[name="metin2"]').val(); var metin2c = $(this).closest('.results').attr('data-artnr'); var metin2d = $(this).closest('.results').find('input[name="metin2"]').val(); var metin2e = $(this).prevAll("input").val(); // my preference var metin2f = $(this).prevAll(".test1").val(); // or this console.log("a",metin2a,"b",metin2b,"c",metin2c,"d",metin2d,"e",metin2e,"f",metin2f); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="results" data-artnr="1111"> <input type="text" class="test1" name="metin2" value="1111"><br><br> <input type="button" class="test2" value="Suche (Basic)" ><br><br> </div> <hr> <div class="results" data-artnr="2222"> <input type="text" class="test1" name="metin2" value="2222"><br><br> <input type="button" class="test2" value="Suche (Basic)" ><br><br> </div> <hr> <div class="results" data-artnr="3333"> <input type="text" class="test1" name="metin2" value="3333"><br><br> <input type="button" class="test2" value="Suche (Basic)" ><br><br> </div>
solution2
0 2018-10-03 12:30:47
When function called from onclick attribute onclick="searchin()" inside her hot defined variable this . Therefore all methods with this variable returning undefined .
You must pass this variable explicit like onclick="searchin.apply(this)" or assign onClick event handler with jQuery
jQuery(function($) { $('.test2').click(function() { var metin2 = $(this).parent().find('input[name="metin2"]').val(); console.log('Parent.Find: ' + metin2); metin2 = $('input[name="metin2"]').val(); console.log('Global: ' + metin2); metin2 = $(this).closest('.results').attr('data-artnr'); console.log('data-artnr: ' + metin2); var metin2 = $(this).closest('.results').find('input[name="metin2"]').val(); console.log('Closest.Find: ' + metin2); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="results" data-artnr="1111"> <input type="text" class="test1" name="metin2" value="1111"><br><br> <input type="button" class="test2" value="Suche (Basic)"><br><br> </div> <hr> <div class="results" data-artnr="2222"> <input type="text" class="test1" name="metin2" value="2222"><br><br> <input type="button" class="test2" value="Suche (Basic)"><br><br> </div> <hr> <div class="results" data-artnr="3333"> <input type="text" class="test1" name="metin2" value="3333"><br><br> <input type="button" class="test2" value="Suche (Basic)"><br><br> </div>
solution3
0 2018-10-03 12:47:36
You are importing jQuery in the project. Make the most out of it. write a jQuery click handler and access '$(this)' element and find the input inside the parent. I highly suggest using a button instead of an input element.
Check this codepen for the complete solution.
// Button click event handler
$(".test2").click(function() {
alert($(this).parent().find(".test1").val());
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.