Add checkbox values to a link using javascript

Question

I would like to add checked checkbox values as url parameter to my link. This is what I have amongst others:

<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label>

<script>
    $(".checkbox").on("change", function() {
        var values = [];
        $('.checkbox:checked').each(function() {
            var result = $(this).val();
            values.push(result);
        });
        var key = $(".link").html(values.join("&"));
        document.write('<a href="http://www.example.com/test.html?' + key + '">Open here</a>');
    });
</script>

The expected result is "http://www.example.com/test.html?bx1=1&bx2=1". I hope someone can help me with this.

Thanks for these lines:

<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label>
<a class="link" href="http://www.example.com/test.html">Open here</a>

<script>
    $(".checkbox").on("change", function() {
        console.log('fzef');
        var values = [];
        $('.checkbox:checked').each(function() {
            var result = $(this).val();
            values.push(result);
        });
        $(".link").attr('href', 'http://www.example.com/test.html?' + values.join("&"));
    });

    // Init link on page load
    $(".checkbox").trigger("change");
</script>

I get a &on& between my values and it does not work on IE. Any idea? Thanks!

Document.write()?? However, what's your expected result? And what is the error you have? — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Nov 19, 2016 at 13:08
That's because you setup values as an array so the "pasted" values are basically an Object and you need to extract the values from that object... — odedta
– odedta, Commented Nov 19, 2016 at 13:15
document.write() will close the existing document and begin writing a new one on the first checkbox click and then you'll never be able to click another one or uncheck the first one. — Scott Marcus
– Scott Marcus, Commented Nov 19, 2016 at 13:20

sylvain1264 · Accepted Answer · 2016-11-19 19:28:59Z

1

You can do like this:

<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label>
<a class="link" href="http://www.example.com/test.html">Open here</a>

<script>
    $(".checkbox").on("change", function() {console.log('fzef');
        var values = [];
        $('.checkbox:checked').each(function() {
            var result = $(this).val();
            values.push(result);
        });
        $(".link").attr('href', 'http://www.example.com/test.html?' + values.join("&"));
    });

    // Init link on page load
    $(".checkbox").trigger("change");
</script>

edited Nov 19, 2016 at 19:28

answered Nov 19, 2016 at 13:17

sylvain1264

8552 gold badges8 silver badges23 bronze badges

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

7 Comments

Robin Alexander Over a year ago

Thank you very much for this and all other suggestions! This works great!

Robin Alexander Over a year ago

When I hit the BACK button in my browser, the checked checkboxes are still checked, but the link does not contain the values. Any chance/idea to update the link for this case?

sylvain1264 Over a year ago

See my edit, you just need to force the change event on page load.

Robin Alexander Over a year ago

Great! Thanks for your help!

Robin Alexander Over a year ago

Sorry, I have another problem. Using this with my checkboxes pushes the value of the checkbox currently clicked and the value of the previously clicked checkbox. Any idea?

|

Andreas · Accepted Answer · 2016-11-19 13:32:35Z

1

Wrap the checkboxes in a form, give them names and let jQuery do the work with .serialize():

$(function() {
  $("form").on("change", function() {
    var href = "http://www.example.com/test.html",
        params = $(this).serialize();

    if (params.length > 0) {
      href += "?" + params;
    }

    console.log(href);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="box1" name="bx1" type="checkbox" class="checkbox" value="1" />bx1
  <input id="box2" name="bx2" type="checkbox" class="checkbox" value="1" />bx2
</form>

answered Nov 19, 2016 at 13:32

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

Comments

odedta · Accepted Answer · 2016-11-19 13:20:22Z

0

The correction you need to do is in the line
var key = $(".link").html(values.join("&"));

You need to change it to
var key = values.join("&");

Why?
Because there is no .link selector in your code.

answered Nov 19, 2016 at 13:20

odedta

2,4785 gold badges26 silver badges57 bronze badges

Comments

prasanth · Accepted Answer · 2016-11-19 13:27:32Z

-1

try like this: you need with document.write()

 document.write('<a href="http://www.example.com/test.html?' + values.join('&') + '">http://www.example.com/test.html?' + values.join('&')+'</a>');

OR

$("button").on("click", function() {
        var values = [];
        $('.checkbox:checked').each(function() {
           var  result = $(this).val();
            values.push(result);
        });
   
    
  
  $('#url').attr('href','http://www.example.com/test.html?' + values.join('&') );
   $('#url').html('http://www.example.com/test.html?' + values.join('&'))
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1">first</label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1">second</label>
<button >Go</button>
<a id="url"></a>

edited Nov 19, 2016 at 13:27

answered Nov 19, 2016 at 13:16

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

4 Comments

Scott Marcus Over a year ago

document.write() will close the existing document and begin writing a new one on the first checkbox click and then you'll never be able to click another one or uncheck the first one.

prasanth Over a year ago

but OP not mention with use with same page.He also write with document.write()

Scott Marcus Over a year ago

The OP's use of document.write() was wrong. It was just his attempt at building the string, but you can't use it with callbacks unless you intentionally want to write a new document, which is clearly not the intention here.

prasanth Over a year ago

i am also use just print the result. I was updated with my answer.

Collectives™ on Stack Overflow

Add checkbox values to a link using javascript

4 Answers 4

7 Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related