JQuery: Create list of links with two arrays

Question

So, I'm trying to write a bit of jQuery that pulls the value and custom 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 the custom data. I have created arrays for both the link text and urls, but when I try to create a list of links for the selected options, the url shows as being just one letter. Any thoughts about what I'm doing wrong? I've 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;
        }
    });
});

Alex Char · Accepted Answer · 2014-10-23 10:36:47Z

2

You have first to save url's in an array and after create the a elements:

$("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 problem in OP is that you get the value from a checkbox and in loop you parse a string. That's why linkURL[i] get the value h. h is the first char from http://option1.com string. You have to save the values in an array and then append in dom.

edited Oct 23, 2014 at 10:36

answered Oct 23, 2014 at 10:31

Alex Char

33.2k9 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Regent Over a year ago

@user3723918 works beautifully (second click doesn't clean previous list, but who cares?), but this switchCheck and switch itself... So many lines instead of simple if-else.

Alex Char Over a year ago

@Regent Show me the requirments in OP that say "has to clean previous list"

Regent Over a year ago

@AlexChar it's not about requirement, it's about beautiness and logical behaviour. I didn't say you should do it, it is for user3723918, and it is his problem. Same as with useless switchCheck and switch.

Regent · Accepted Answer · 2014-10-23 10:38:10Z

0

Code looks overcomplicated. I don't see the reasons to use arrays and switch in this situation.

Fiddle

$(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);
    });
});

answered Oct 23, 2014 at 10:38

Regent

5,1743 gold badges23 silver badges36 bronze badges

Collectives™ on Stack Overflow

JQuery: Create list of links with two arrays

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related