I need to send checkbox values (in a number from 1 to N checkboxes) through an <a href></a>.

I was thinking about using javascript for that, but I don't know if it is possible to use the checkbox values in a context external from <form></form>.

Any suggestions?

EDIT-1: i want to get the checkbox values and then navigate to a URL with those values as GET parameters, i.e. index.php?c1=1&c2=0&c3=0

I need to send checkbox values (in a number from 1 to N checkboxes) through an <a href></a>.

I was thinking about using javascript for that, but I don't know if it is possible to use the checkbox values in a context external from <form></form>.

Any suggestions?

EDIT-1: i want to get the checkbox values and then navigate to a URL with those values as GET parameters, i.e. index.php?c1=1&c2=0&c3=0

• javascript
• html
• jsp
• checkbox
• href

• 1 So let me get this straight, do you want to get the checkbox values and then navigate to a URL with those values as GET parameters, i.e. index.php?c1=1&c2=0&c3=0, or do you want to get the values of the checkboxes and then set the href attribute of an a tag to equal that same URL as earlier: <a href="index.php?c1=1&c2=0&c3=0">? – Liftoff Commented Nov 20, 2013 at 9:28
• I was already in the middle of writing my answer, so read the whole thing for both solutions I mentioned in my ment above. – Liftoff Commented Nov 20, 2013 at 9:42

2 Answers 2

I take it you want to submit the checkbox values by changing the href attributeof ana` tag so that when the user clicks it, they will be sent to the URL with the checkbox values submitted as GET parameters.

The easiest way to do this is to use jQuery; I remend that you import it as it will save you a lot of time. If you want a solid Javascript-only solution, let me know, and I'll show you how to do it without jQuery.

You have checkboxes, (we'll say for example) 1 through 5:

<input type="checkbox" id="cb1" value="1"/>
<input type="checkbox" id="cb2" value="0"/>
<input type="checkbox" id="cb3" value="0"/>
<input type="checkbox" id="cb4" value="0"/>
<input type="checkbox" id="cb5" value="1"/>

By giving them a similar id, we can get the values of the checkboxes quite easily:

function someFunction()
{
    var id=1;
    var getVars = "";
    while($("#cb"+id).length > 0)
    {
        getVars += "cb" + id + "=" + $("#cb"+id).val() + "&";
    }

    var href = "index.php?" + getVars; //Change "index.php" to the name of the page you want to navigate to.

    $("a").attr("href", href);

}

This will set the href attribute of the <a> tag to the proper new URL:

<a href="index.php?cb1=1&cb2=0&cb3=0&cb4=0&cb5=1">

Note

Unless you want this function to change the href attribute of all of your <a> tags on your page, you should give the a tag an id or a class to identify it in the jQuery function.

Edit

Seeing your edit above, since you don't need to change the attribute of the a tag, you can simply remove:

$("a").attr("href", href);

and replace it with

parent.location = href;

This will send the user to the page with the GET variables immediately when the function executes.

Don't do it the hard way. Just put them in a GET form the usual way and submit the form on click of the link.

<form name="myform" action="index.php">
    <input type="checkbox" name="c1" value="1" />
    <input type="checkbox" name="c2" value="1" />
    <input type="checkbox" name="c3" value="1" />
    <input type="checkbox" name="c4" value="1" />
    <input type="checkbox" name="c5" value="1" />
    <a href="#" onclick="myform.submit(); return false;">send</a>
</form>

Alternatively, to be pletely free of JS (so that it also works in screenreaders, ancient mobiles and such), use a regular submit button, but throw in some CSS to make it look like a link:

<form action="index.php">
    <input type="checkbox" name="c1" value="1" />
    <input type="checkbox" name="c2" value="1" />
    <input type="checkbox" name="c3" value="1" />
    <input type="checkbox" name="c4" value="1" />
    <input type="checkbox" name="c5" value="1" />
    <input type="submit" value="send" class="link" />
</form>

with e.g.

input[type=submit].link {
    background: none;
    border: none;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}