Javascript to pass var onclick select and checkbox

Question

So my page has two columns. On the right column the results are displayed.

The results include all the elements. On the right column i have a and few check boxes. I am able to populate the checkboxes depending on the option selected in .

I have to click submit to get the data on the right column. I don't want AJAX. I want the page to be refreshed with the option in selected and the results to be displayed based on that. I am able to code the php part. To GET the value of the option selected in

So my code is :

<select id="theselect" onclick = "afterChange()">
    <option value="0"> Select the Department </option>
    <option value="11"> Department11 </option>
    <option value="22"> Department22 </option>
    <option value="33"> Department33 </option>
</select>


var url = location.href;
document.getElementById("mydiv").innerHTML = url;

function afterChange(){
var dept = document.getElementById("theselect").value;
  if (dept && dept!= 0) {
  var myline = url + "&dept=" + dept;
  document.getElementById("mynewdiv").innerHTML = myline;
  window.location= myline;
  }
}

<p id='mydiv'> </p> <br />
<p id='mynewdiv'> </p>

<?php 
 if(isset($_GET['dept'])) {

 $cat = $_GET['dept'];

 echo "You are now searching in $cat";

 //code to show content from database for that department

?>

I know that there is a better way to do this which m unaware of. So far the code works fine for the first time. I am able to get the results from the DB according to the SELECT option. But when i change the select, it takes the entire URL again and adds the new value of SELECT to the URL, that confuses PHP.

So if my site URL is : http://mysite.php?dept=22 After changing SELECT 2nd time, it changes to http://mysite.php?dept=22&dept=33

I also have few checkboxes after the SELECT.

I want the results to be sorted based on the select and the checkboxes.

I know there must be an easy way to do it, but i am struggling to find it.

Please help me in understanding this concept. Thank you so very much.

score 0 · Accepted Answer · answered Sep 03 '13 at 12:47

0

With

  var url = location.href;

You will always get the current url. Means on 2nd refresh the url will be http://mysite.php?dept=22 now you add your dept again:

var myline = url + "&dept=" + dept;

Which produces the error you described. To handle this problem you have to strip the old parameter first or if you only need one parameter do something like:

var url = location.origin + location.pathname

instead of location.href for more information you can read this

answered Sep 03 '13 at 12:47

Martin

3,096
1
26
46

How do i replace only a particular var from the URL? I may have the var for another Dept in the URL, so how do i replace only a particular var ? Thanks. – user2742581 Sep 03 '13 at 15:32
[This question will help you](http://stackoverflow.com/questions/13063838/add-change-parameter-of-url-and-redirect-to-the-new-url) ;) – Martin Sep 03 '13 at 19:23

Javascript to pass var onclick select and checkbox

1 Answers1