JQuery: create link list with two arrays
So I'm trying to write a little jQuery that pulls value and user data (html5) from selected checkboxes to create a list of links. The link text will come from the value, while the link source will come from user data. I've created arrays for both link text and URLs, but when I try to create a link list for the selected options, the URL appears as a single letter. Any thoughts on what I am doing wrong? I created a JSFiddle here: http://jsfiddle.net/3wx6d5cy/
HTML:
<form method="post" id="resources">
<label><input type="checkbox" data-url="http://option1.com" value="Option 1" >Option 1</label>
<label><input type="checkbox" data-url="https://option2.com" value="Option 2" >Option 2</label>
<label><input type="checkbox" data-url="https://option3.com" value="Option 3" >Option 3</label>
<button type="button" id="showResults">Show Resources</button>
</form>
<ul id="results"></ul>
JS:
$("document").ready(function () {
$("#showResults").click(function () {
var linkValues = $('input:checkbox:checked').map(function () {
return this.value;
}).get();
var linkURL = $('input:checkbox:checked').data('url');
// Check if any checkboxes are selected
var ifChecked = $('#resources :checkbox:checked').length;
function switchCheck(n) {
if (n == 0) {
caseNum = 0;
} else {
caseNum = 1;
}
}
switchCheck(ifChecked);
switch (caseNum) {
// Alert if no checkboxes are selected
case (0):
alert("Please select an option.");
break;
// Store value and data attributes in an array
case (1):
$.each(linkValues, function (i, val) {
$("#results").append("<li><a href='" + linkURL[i] + "'>" + val + "</a> ");
});
break;
}
});
});
source to share
First you have to store url in array and after elements are created a
:
$("document").ready(function() {
$("#showResults").click(function() {
var linkValues = $('input:checkbox:checked').map(function() {
return this.value;
}).get();
//here save urls in an array using map
var linkURL = $('input:checkbox:checked').map(function() {
return $(this).data('url');
});
// Check if any checkboxes are selected
var ifChecked = $('#resources :checkbox:checked').length;
function switchCheck(n) {
if (n == 0) {
caseNum = 0;
} else {
caseNum = 1;
}
}
switchCheck(ifChecked);
switch (caseNum) {
// Alert if no checkboxes are selected
case (0):
alert("Please select an option.");
break;
// Store value and data attributes in an array
case (1):
$.each(linkValues, function(i, val) {
$("#results").append("<li><a href='" + linkURL[i] + "'>" + val + "</a> ");
});
break;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="resources">
<label>
<input type="checkbox" data-url="http://option1.com" value="Option 1">Option 1</label>
<label>
<input type="checkbox" data-url="https://option2.com" value="Option 2">Option 2</label>
<label>
<input type="checkbox" data-url="https://option3.com" value="Option 3">Option 3</label>
<button type="button" id="showResults">Show Resources</button>
</form>
<ul id="results">
</div>
The OP's problem is that you get the value from the checkbox and in the loop you are parsing the string. So linkURL[i]
get the value h
. h
- the first line is char from http://option1.com
. You have to store the values in an array and then add to dom.
source to share
The code looks complicated. I see no reason to use arrays switch
in this situation either .
$(document).ready(function()
{
$("#showResults").click(function()
{
var checked = $('#resources :checkbox:checked');
var html = "";
if (checked.length == 0)
{
alert("Please select an option.");
}
else
{
checked.each(function()
{
html += "<li><a href='" + $(this).data('url') + "'>" + this.value + "</a></li>";
});
}
$('#results').html(html);
});
});
source to share