How to display multiple elements on clicking a link
Question
I have more than 1 link in my page. When I click the link, the input element shows up as shown in the demo below. However, if I put 2 links it doesn't work. I am pretty sure that problem is that I am repeating the id="barcode", which supposed to be used only once, but I couldn't find how I can resolve this.
https://jsfiddle.net/w3oz0txq/4/
<script type="text/javascript"> function show() { document.getElementById("barcode").style.display = "block"; } </script> <br> <a href="javascript:void(0);" onclick="show();">Please type barcode 1</a> <div id="barcode" style="display: none"> <input type="text" name="barcode_values[]"> </div> <br> <a href="javascript:void(0);" onclick="show();">Please type barcode 2</a> <div id="barcode" style="display: none"> <input type="text" name="barcode_values[]"> </div>
5 answers
solution1
1 ACCPTED 2018-06-29 12:50:41
Since jQuery is tagged, I use a jQuery solution.
You are right, an id should only be used once. It needs to be unique. So instead, use classes. Or search up/ down the DOM tree.
$(function(){ $('.show_barcode').on('click', function(e) { e.preventDefault; /* disable default click action */ $(this).next('div').show(); /* or if you want to hide the input after another click, then use next line $(this).next('div').toggle(); */ }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="show_barcode">Please type barcode 1</a> <div style="display: none"> <input type="text" name="barcode_values[]" /> </div> <br> <a href="#" class="show_barcode">Please type barcode 2</a> <div style="display: none"> <input type="text" name="barcode_values[]" /> </div>
This function only works if the div is directly after the link.
So, if you want to move your elements around it might not work afterwards. You can change that by using data-* attributes. An example:
$(function(){ $('.show_barcode').on('click', function(e) { e.preventDefault; /* disable default click action */ var item = $(this).data('showitem'); $('[data-input='+item+']').show(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="display: none" data-input="1"> <input type="text" name="barcode_values[]" value="first input" /> </div> <br> <div style="display: none" data-input="2"> <input type="text" name="barcode_values[]" value="second input" /> </div> <a href="#" class="show_barcode" data-showitem="1">Please type barcode 1</a> <a href="#" class="show_barcode" data-showitem="2">Please type barcode 2</a>
solution2
0 2018-06-29 12:53:06
try to assign and pass different ids in show() as shown below
<script type="text/javascript"> function show(id) { document.getElementById(id).style.display = "block"; } </script> <br> <a href="javascript:void(0);" onclick="show('barcode');">Please type barcode 1</a> <div id="barcode" style="display: none"> <input type="text" name="barcode_values[]"> </div> <br> <a href="javascript:void(0);" onclick="show('barcode2');">Please type barcode 2</a> <div id="barcode2" style="display: none"> <input type="text" name="barcode_values[]"> </div>
solution3
0 2018-06-29 13:00:19
As per the Rule Id should be unique for each element in HTML.
Use Jquery and play with Class attribute of element. Have changed the structure of body, Keeping anchor and input in a div together. When the anchor element is clicked, the input box enclosed within its div block is showed and rest are hidden.
Here is the JS fiddle for same : https://jsfiddle.net/w3oz0txq/30/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ele a").click(function(){
$(".barcode").hide(); //hide all barcode input
$(this).parent(".ele").children(".barcode").show(); // show the input box for link clicked
});
});
</script>
<head>
<body>
<div class="ele">
<a href="javascript:void(0);" >Please type barcode 1</a>
<div class="barcode" style="display: none">
<input type="text" name="barcode_values[]" value="Bar 1">
</div>
</div>
<div class="ele">
<a href="javascript:void(0);" >Please type barcode 2</a>
<div class="barcode" style="display: none">
<input type="text" name="barcode_values[]" value="Bar 2">
</div>
</div>
<div class="ele">
<a href="javascript:void(0);" >Please type barcode 3</a>
<div class="barcode" style="display: none">
<input type="text" name="barcode_values[]" value="Bar 3">
</div>
</div>
</body>
</html>
solution4
0 2018-06-29 13:02:29
use different IDs for each input and pass them in show() function to identify which input should be displayed.
<script type="text/javascript"> function show(id) { document.getElementById(id).style.display = "block"; } </script> <br> <a href="javascript:void(0);" onclick="show('barcode1');">Please type barcode 1</a> <div id="barcode1" style="display: none"> <input type="text" name="barcode_values[]"> </div> <br> <a href="javascript:void(0);" onclick="show('barcode2');">Please type barcode 2</a> <div id="barcode2" style="display: none"> <input type="text" name="barcode_values[]"> </div>
solution5
0 2018-06-29 13:02:33
Just another approach using class instead of id.
var barcodes = document.getElementsByClassName("barcode"); for (let i = 0; i < (barcodes.length); i++) { barcodes[i].addEventListener("click", function(t) { var vis = this.nextSibling.nextSibling.style.display; if (this.nextSibling.nextSibling.style.display == "none") { this.nextSibling.nextSibling.style.display = "block"; } else { this.nextSibling.nextSibling.style.display = "none"; } }); }
<a class="barcode" href="javascript:void(0);">Please type barcode 1</a> <div style="display: none"> <input type="text" name="barcode_values[]"> </div> <br> <a class="barcode" href="javascript:void(0);">Please type barcode 2</a> <div style="display: none"> <input type="text" name="barcode_values[]"> </div>
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.