Search code examples
javascriptjqueryurlurlencodeurl-encoding

how to build a valid url inside my javascript

I have the following JavaScript which build url paramters based on users input:-

$(document).ready(function(){

    $('#button').click(function(e) {  
        var count=1;
        var s="";

        var inputvalue = $("#journal").val();
        var inputvalue2 = $("#keywords").val();
        var inputvalue3 = $("#datepub").val();
        var inputvalue4 = $("#title").val();
        var inputvalue5 = $("#localcurrency").val();
        var inputvalue6 = $("#locations").val();
        var inputvalue7 = $("#dropdown1").val();
        var inputvalue8 = $("#dropdown2").val();

        if(inputvalue!=null && inputvalue!="")
        {
        s = s+ "FilterField"+count+"=Journal&FilterValue"+count+"="+inputvalue+"&";
        count++;
        }
        if(inputvalue2!=null && inputvalue2!="")
        {
        s = s+ "FilterField"+count+"=KeyWords&FilterValue"+count+"="+inputvalue2+"&";
        count++;
        }
        if(inputvalue3!=null && inputvalue3!="")
        {
        s = s+ "FilterField"+count+"=datepub&FilterValue"+count+"="+inputvalue3+"&";
        count++;
        }
        if(inputvalue4!=null && inputvalue4!="")
        {
        s = s+ "FilterField"+count+"=Title&FilterValue"+count+"="+inputvalue4+"&";
        count++;
        }
        if(inputvalue5!=null && inputvalue5!="")
        {
        s = s+ "FilterField"+count+"=localcurrency&FilterValue"+count+"="+inputvalue5+"&";
        count++;
        }
        if(inputvalue6!=null && inputvalue6!="")
        {
        s = s+ "FilterField"+count+"=locations&FilterValue"+count+"="+inputvalue6+"&";
        count++;
        }
        if(inputvalue7!=null && inputvalue7!="")
        {
        s = s+ "FilterField"+count+"=dropdown1&FilterValue"+count+"="+inputvalue7+"&";
        count++;
        }
        if(inputvalue8!=null && inputvalue8!="")
        {
        s = s+ "FilterField"+count+"=dropdown2&FilterValue"+count+"="+inputvalue8+"&";
        count++;
        }

        window.location.replace("/teamsites/Bib%20Test/Forms/search.aspx?"+s);

    });
});
</script>

now the above script will generate URLs such as 

http://***/teamsites/Bib%20Test/Forms/search.aspx?FilterField1=Journal&FilterValue1=123

http://***/teamsites/Bib%20Test/Forms/search.aspx?FilterField1=Journal&FilterValue1=123&FilterField2=localcurrency&FilterValue2=USD&

and thing were working well, till i tried passing a search parameter which contain &. for example i wanted to search for a record which have their journal = General&Procedure, so using my above code, the URL will be as follow:-

http://***/teamsites/Bib%20Test/Forms/search.aspx?FilterField1=Journal&FilterValue1=General&Procedure&

and i did not get any result,, as the application assume that the Procudure is a parameter and not part of the FilterValue1.. now to fix this specific problem, i define to build the URL parameters with encodeURIComponent() function as follow:-

var inputvalue = encodeURIComponent($("#journal").val());
var inputvalue2 = encodeURIComponent($("#keywords").val());
var inputvalue3 = encodeURIComponent($("#datepub").val());
var inputvalue4 = encodeURIComponent($("#title").val());
var inputvalue5 = encodeURIComponent($("#localcurrency").val());
var inputvalue6 = encodeURIComponent($("#locations").val());
var inputvalue7 = encodeURIComponent($("#dropdown1").val());
var inputvalue8 = encodeURIComponent($("#dropdown2").val());

now the generated URL will be as follow:-

http://***teamsites/Bib%20Test/Forms/search.aspx?FilterField1=Journal&FilterValue1=General%26Procedure

and i got the expected results.. but not sure if using encodeURIComponent() to only encode the parameter values is a valid fix,, as seems i will be encoding the & if it is part of the query string parameter,, but still the url contain non-encoded & which separate the url parameters .. now the result i got from the last url is correct.. but not sure if i am doing things correctly ? and is there a built-in function to do this work for me ?? Thanks

Solution

  • Here are sources for URL syntax:

    You will notice that the exact content of the query component is not standardized. Its simple definition is:

    The query component is indicated by the first question mark ("?") character and terminated by a number sign ("#") character or by the end of the URI.

    However, the de-facto standard is to use ampersand (&) character as delimiter. With this convention, anytime this character also appears in your data and is not meant to be a delimiter, you have to "percent-encode" it, as per the standard as well:

    A percent-encoding mechanism is used to represent a data octet in a component when that octet's corresponding character is outside the allowed set or is being used as a delimiter of, or within, the component.

    You will easily understand that other special characters, like =, % and # must also be percent-encoded, should they appear in your data. There is no harm in encoding even more special characters as well.

    Therefore if you follow this convention, your query component should be of the form:

    ?field1=value1&field2=value2

    with each field and value being percent-encoded. In JavaScript, you can indeed conveniently use the encodeURIComponent function. Do not forget to encode the fields as well!

    Furthermore, as your use case is very common, there are plenty libraries available that can handle such conversion for you, e.g. URI.js.

    But since you mention using jQuery, you can conveniently use jQuery.param to do the conversion:

    Create a serialized representation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request. In case a jQuery object is passed, it should contain input elements with name/value properties.

    $(document).ready(function() {
  $('#button').click(retrieveInputsValues);

  retrieveInputsValues();
});

function retrieveInputsValues() {
  var inputIds = [
    'Journal',
    'KeyWords',
    'datepub',
    'Title',
    'localcurrency',
    'locations',
    'dropdown1',
    'dropdown2'
  ];
  var obj = {};
  var count = 1;
  var value;

  for (var i = 0; i < inputIds.length; i += 1) {
    value = $('#' + inputIds[i].toLowerCase()).val();
    if (value !== null && value !== '') {
      obj['FilterField' + count] = inputIds[i];
      obj['FilterValue' + count] = value;
      count += 1;
    }
  }

  console.log($.param(obj));
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Journal
<input type="text" id="journal" value="test & ampersand, comma, % percent, = equal and space" />
<br />keywords <input type="text" id="keywords" />

<br />datepub
<select id="datepub">
  <option value=""></option>
  <option value="1950">1950</option>
  <option value="2010">2010</option>
  <option value="2017" selected>2017</option>
  <option value="audi">Audi</option>
</select>
<br />title
<select id="title">
  <option value=""></option>
  <option value="TestDoc">test doc</option>
  <option value="t">t</option>
</select>
<br />localcurrency
<select id="localcurrency">
  <option value=""></option>
  <option value="USD">USD</option>
</select>
<br />locations
<select id="locations">
  <option value=""></option>
  <option value="US">US</option>
  <option value="UK">UK</option>
</select>
<br />dropdown1
<select id="dropdown1">
  <option value=""></option>
  <option value="a">a</option>
  <option value="b">b</option>
</select>
<br />dropdown2
<select id="dropdown2">
  <option value=""></option>
  <option value="aa">aa</option>
  <option value="bb">bb</option>
  <option value="cc">cc</option>
  <option value="dd">dd</option>
</select>
<br />
<button type="button" id="button">search</button>
<!-- re-used from https://stackoverflow.com/a/47008115/5108796 -->

    BTW, usually there is no need to pass the field names as values, just "field=value" is used.

    But you may have specific use case for your back-end processing?