overflowstack9 overflowstack9 - 4 months ago 8
HTML Question

How to remove spaces between the text and vertical bar



$('#cmbColumn').editableSelect();
$('#cmbSidebar').editableSelect();

<link rel="stylesheet" href="//cdn.rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" />

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="//cdn.rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>

<!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"> Search</h2>
<div class="widget-content">
<div id="multi-search">
<select id="cmbColumn" name="cmbColumn">
<option value="" />Columns
<option value="apple+" />apple
<option value="grapes+" />grapes
</select>
<select id="cmbSidebar" name="cmbSidebar">
<option value="" />Sidebars
<option value="mango+" />mango
<option value="berry+" />berry

</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=1273768514594589200&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>
function getValue() {
var valcmbColumn = document.getElementById("cmbColumn").value;
var valcmbSidebar = document.getElementById("cmbSidebar").value;

valOutput = "label:"+valcmbColumn+"|label:"+ valcmbSidebar;
window.open("http://urstrulyvijay.blogspot.in//search/?q=" + valOutput, "_self");
}
</script>





I have implemented Jquery editable select in my blog my problem is i want to remove the white spaces
http://urstrulyvijay.blogspot.in/search/?q=label:apple%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20|label:mango


I mean actual one is below and see this image to understand the problem clear

http://urstrulyvijay.blogspot.in/search/?q=label:apple|label:mango


I have came to know this space problem is due to text and vertical bar if iam not wrong.
image

Answer

Use trim() to remove any white space

valOutput = "label:"+valcmbColumn.trim()+"|label:"+ valcmbSidebar.trim();