CODEWITHSUNDEEP
javascriptjquerycheckboxhyperlink
jongoeson
jongoeson

Reputation: 43

Create a dynamic link based on checkbox values

What I'm trying to achieve is this:

  1. Default state of page = no checkboxes ticked, no link shown
  2. User ticks one (or more) checkboxes
  3. 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?

Upvotes: 2

Views: 3667

Answers (2)

Steve G
Steve G

Reputation: 13357

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?

Upvotes: 3

Wesley Smith
Wesley Smith

Reputation: 19571

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>

Upvotes: 4

Related Questions