Bhaskar g Bhaskar g - 5 months ago 13
Javascript Question

Links redirecting to wrong page

This is my Blog

I have added multi label search in the homepage.

but when i select green and gray tags from the menu and after clicking the filter it is redirecting to example.com/search/?q=label:blue|label:black
page

But want to redirect tags green and gray to label:green|label:gray

The below is the code



<!doctype html>


<div class="tabs-outer">
<div class="tabs-cap-top cap-top">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
<div class="fauxborder-left tabs-fauxborder-left">
<div class="fauxborder-right tabs-fauxborder-right"></div>
<div class="region-inner tabs-inner">
<div class="tabs section" id="main">
<div class="widget HTML" id="HTML3">
<h2 class="title">Multi Label Search</h2>
<div class="widget-content">
<div id="multi-search">
<select id="cmbColumn" name="cmbColumn">
<option value="" />Columns
<option value="green+" />green
<option value="blue+" />blue
</select>
<select id="cmbSidebar" name="cmbSidebar">
<option value="" />Sidebars
<option value="Gray+" />Gray
<option value="black+" />black

</select>

<input onclick=" getValue() " value="Filter" type="button" />
</div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="https://www.blogger.com/rearrange?blogID=5988384389032442595&action=editWidget&sectionId=main" onclick=" return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML3&quot;)); " target="configHTML3" title="Edit">
<img alt="" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" height="18" width="18" />
</a>
</span>
</span>
<div class="clear"></div>
</div>
</div>
<div class="tabs section" id="main"></div>
</div>
</div>
<div class="tabs-cap-bottom cap-bottom">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
</div>
<script type="text/javascript">
function getValue() {
var
valcmbColumn = document.getElementById("cmbColumn").value = "green";
valcmbSidebar = document.getElementById("cmbSidebar").value = "|label:Gray";

valOutput = (valcmbColumn + valcmbSidebar);
window.open("/search/?q=label:" + valOutput, "_self");

valcmbColumn = document.getElementById("cmbColumn").value = "blue";
valcmbSidebar = document.getElementById("cmbSidebar").value = "|label:black";

valOutput = (valcmbColumn + valcmbSidebar);
window.open("/search/?q=label:" + valOutput, "_self");


}




function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == "block") {
e.style.display = "none";
} else {
e.style.display = "block";
}
}
</script>


</!doctype>




Answer

Try this. I think this should solve the problem. I am not able to test it with the code you have provided

   function getValue() {
     var valcmbColumn = document.getElementById("cmbColumn").value;
     var valcmbSidebar = document.getElementById("cmbSidebar").value;

    valOutput = "label:"+valcmbColumn+"|label:"+ valcmbSidebar;
    window.open("/search/?q=" + valOutput, "_self");
  }

Let me know if it is working or not