auto checkbox based from url value using javascript/jQuery

Question

Is there way to or it is possible to do it using javascript/jQuery?

Based Link URL: first one will check Type A and Type B and second example will check Type D

?type=A&type=C or ?type=D

My current form:

<form name="input" action="" method="post" ><br />
Select Type: <br />
<input type="checkbox" name = "type" value="A" /> A <br />
<input type="checkbox" name = "type" value="B"  /> B <br />
<input type="checkbox" name = "type" value="C"  /> C <br />
<input type="checkbox" name = "type" value="D" /> D <br /> <br />
<input type="submit" value="Submit" />

Any tips and advised to do it?

you'll need server generated page to do that... – Carlo Moretti Jul 12 '12 at 15:05 — Carlo Moretti, Jul 12 '12 at 15:05

Engineer · Accepted Answer · 2012-07-12T15:17:59.897

9

Do it like this:

var i = document.location.href.lastIndexOf('?');
var types = document.location.href.substr(i+1).replace(/type=/g,'').split('&');
$('input[name="type"]').prop('checked',function(){
     return $.inArray(this.value,types) !== -1;
});

Explanation:

Consider the url is 'http://sample.com?type=A&type=C'. Then:

i is the index of '?' sign in that url
.substr() will cut type=A&type=C part from the url. After the cut, we will have this string:
```
"type=A&type=C"
```
.replace() removes "type=" parts from the above mentioned string:
```
"A&C"   //after replace
```
.split() splits that string into array:
```
 ["A","C"]
```
$.inArray() checks whether value of current checkbox is in the ["A","C"] array. If it is, then checks( .prop('checked',true) ) the checkbox.

edited Jul 12 '12 at 15:17

answered Jul 12 '12 at 15:04

Engineer

47,849
12
88
91

With the `search` of the `window.location` containing only `type=A&type=C`, boxes A, B, and C return as checked with your code. – Ohgodwhy Jul 12 '12 at 15:07
@Ohgodwhy That's right. I have just forgotten about such property ) – Engineer Jul 12 '12 at 15:15
1

I've tested your code and it doesn't work as intended. I tried it in a local environment, using `http://localhost/dev/so/index.php?type=A&type=C`, and it checks boxes `B, C, and D`. I was able to reproduce this in a jsFiddle by mimicing the location of the window as a string, and testing your code against that. [Here's the jsFiddle. What's the issue?](http://jsfiddle.net/S6yGw/1/) – Ohgodwhy Jul 12 '12 at 15:21
@Ohgodwhy I have updated my code, added ` !==-1 ` after the `inArray` – Engineer Jul 12 '12 at 15:23
@noviceRick his code **will** work with your form, [and I've made a jFiddle for proof.](http://jsfiddle.net/S6yGw/2/) – Ohgodwhy Jul 12 '12 at 15:25
@noviceRick Check again,we were talking with `OhGodWhy` about one little issue, that I have resolved a minute ago. – Engineer Jul 12 '12 at 15:25
@Engineer and Ohgodwhy, I tested it now works perfectly, Explanation are clear to me too +1 – noviceRick Jul 12 '12 at 15:39
@Engineer one last thing about the checkbox with white space value, I just wonder if this anyone have this situation e.g : ?type=A+B&type=C+D – noviceRick Jul 12 '12 at 16:27
1

@noviceRick In that case, you can replace `+` symbols, with `space`. add something like this between `replace` and `split`: `.replace(/type=/g,'').replace(/+/g,' ').split(`, or apply `decodeURI` function to `?type=A+B&type=C+D` string. – Engineer Jul 12 '12 at 16:32

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

This question shows a solution to check the query string parameters using javascript. There is also a link at the top to a possible duplicate question that provides a solution using JQuery.

Once you determine the querty string parameters, you can use jQuery to check the box (as detailed in another question):

$('input[value="A"]').prop("checked", true);

edited May 23 '17 at 11:59

Community

1
1

answered Jul 12 '12 at 15:09

nexus-bytes

122
1
10

auto checkbox based from url value using javascript/jQuery

2 Answers2

Linked

Related