Create a dynamic link based on checkbox values

Question

What I'm trying to achieve is this:

Default state of page = no checkboxes ticked, no link shown
User ticks one (or more) checkboxes
Link appears, dynamically generated from the checkbox values, in the following format: http://example.com/?subject=Products&checked=Blue,Green,Purple (where the selected checkbox values are "Blue", "Green" and "Purple")

Thus far, based on advice from another question (Using JavaScript to load checkbox Values into a string), I've been able to get the values in the proper format (as part of the required url) printed to console.log via a button:

$("button").on("click", function(){
	var arr = []
	$(":checkbox").each(function(){
	   if($(this).is(":checked")){
		 arr.push($(this).val())
	   }
	})
	var vals = arr.join(",")
	var str = "http://example.com/?subject=Products&" + vals
	console.log(str)	
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="checkbox" id="selected" name="selected" value="Blue" class="products"> Blue<br>
<input type="checkbox" id="selected" name="selected" value="Green" class="products"> Green<br>
<input type="checkbox" id="selected" name="selected" value="Purple" class="products"> Purple
<br>
<button>button</button>

However, they're not loading dynamically based on the selected checkboxes (it requires you to press the button in order to generate the url) and the link hasn't been printed to the page for use by visitors (it's stuck in console.log, visible but not usable).

I've been advised that .change() might be the way to go here, in terms of generating the link dynamically. Something like: jQuery checkbox change and click event.

How can I merge the two approaches to achieve the result I'm looking for?

Note that the duplicated id="selected" in your html is not valid. Ids must be unique :) — Wesley Smith
– Wesley Smith, Commented Oct 12, 2016 at 22:30

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

This would work to give you a url of

http://example.com/?subject=Products&checked=Blue,Green,Purple

(see below for a possibly better way):

$(document).on("change", ".mod-link", function() {
  var arr = []
  $(".mod-link:checked").each(function() {
    arr.push($(this).val());
  })
  var vals = arr.join(",")
  var str = "http://example.com/?subject=Products&checked=" + vals;
  var link = arr.length > 0 ? '<a href="'+str+'">Click me</a>': '' ;
  
  $('.link-container').html(link);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="mod-link" name="selected" value="Blue" class="products">Blue
<br>
<input type="checkbox" class="mod-link" name="selected" value="Green" class="products">Green
<br>
<input type="checkbox" class="mod-link" name="selected" value="Purple" class="products">Purple
<br>
<div class="link-container"></div>

However

I would do it a bit different.

I would opt for the following url structure:

http://example.com/?subject=Products&checked[]=Blue&checked[]=Green&checked[]=Purple

When that is recieved by PHP, checked will be an array like ['Blue','Green','Purple'] instead of a string like 'Blue,Green,Purple'

$(document).on("change", ".mod-link", function() {
  var arr = []
  $(".mod-link:checked").each(function() {
    arr.push($(this).val());
  })
  var vals = 'checked[]=' + arr.join("&checked[]=")
  var str = "http://example.com/?subject=Products&" + vals;
  var link = arr.length > 0 ? '<a href="'+str+'">Click me</a>': '' ;
  
  $('.link-container').html(link);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="mod-link" name="selected" value="Blue" class="products">Blue
<br>
<input type="checkbox" class="mod-link" name="selected" value="Green" class="products">Green
<br>
<input type="checkbox" class="mod-link" name="selected" value="Purple" class="products">Purple
<br>
<div class="link-container"></div>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 12, 2016 at 22:03

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

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

4 Comments

jongoeson Over a year ago

^^ Perfection! This is exactly what I was looking for! You rock! One last thing. Is it possible for the link to disappear again if the checkboxes are all deselected? Not too bothered if not, but it'd be cleaner if it's possible.

jongoeson Over a year ago

Amazing! Two working options! @scarabaeus got there a different way, but got it perfect, as well. Absolutely brilliant. Thank you! :D

jongoeson Over a year ago

P.S. The URL structure is a prerequisite of Gravity Forms. Their query strings are all comma separated. But a really good suggestion, thank you!

Spaceliving Over a year ago

is there a way to make the button always display? maybe have it grey before selection then colored when selected?

Steve G · Accepted Answer · 2016-10-12 22:31:24Z

3

I believe that you were on the right track, if I understood your question correctly. I added the change event on you checkboxes as you suggested. Try the modified code below.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="checkbox" name="selected" value="Blue" class="products"> Blue<br>
<input type="checkbox" name="selected" value="Green" class="products"> Green<br>
<input type="checkbox" name="selected" value="Purple" class="products"> Purple
<br>
<span class="link"></span>

JavaScript

$("input[type=checkbox]").on("change", function(){
    var arr = []
    $(":checkbox").each(function(){
       if($(this).is(":checked")){
         arr.push($(this).val())
       }
    })
    var vals = arr.join(",")
    var str = "http://example.com/?subject=Products&checked=" + vals
    console.log(str);

  if (vals.length > 0) {
    $('.link').html($('<a>', {
      href: str,
      text: str
    }));
  } else {
    $('.link').html('');
  }  
})

Working CodePen

Your button is no longer being used. Is this what you were looking for?

edited Oct 12, 2016 at 22:31

answered Oct 12, 2016 at 22:01

Steve G

13.8k7 gold badges45 silver badges61 bronze badges

7 Comments

Nikolay Ermakov Over a year ago

Don't forget to create and add the actual link to the page

Nikolay Ermakov Over a year ago

Not the codepen, the link asked for by the OP - ...and the link hasn't been printed to the page

Steve G Over a year ago

Oh! Thank you! I missed that part! It has now been added.

Wesley Smith Over a year ago

@scarabaeus / OP also, you'll want to ditch the duplicate id's, obviously taken from the OP's example but they are not valid html :)

Steve G Over a year ago

Updated with your suggestions, @DelightedD0D. Thanks!

|

Collectives™ on Stack Overflow

Create a dynamic link based on checkbox values

2 Answers 2

However

4 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

However

4 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related