Populate texbox value from url parameter using javascript?

Question

I have the following script. After a user clicks submits I want to redirect the user to the same page and populate the drop down and input box with parameter values from the url. Unfortunately they are not populating once the redirect completes. I also need to strip off * from the FilterMultiValue parameter so that the textbox has the orginal value entered?

I've checked the parameter values using an alert function and that works?

<script type="text/javascript">

function getUrlParams() {

        var paramMap = {};
        if (location.search.length == 0) {
            return paramMap;
        }
        var parts = location.search.substring(1).split("&");

        for (var i = 0; i < parts.length; i ++) {
            var component = parts[i].split("=");
            paramMap [decodeURIComponent(component[0])] = decodeURIComponent(component[1]);
        }
        return paramMap;
}

function RedirectUrl() {

    var tb = document.getElementById("tbSearch").value;
    var cs = document.getElementById("sfield").value;
    var url = "";

    if (tb != "") {
                url = "FilterName=" + cs + "&FilterMultiValue=*" + tb + "*";
                window.location.href = "mypage.aspx?" + url;
                var params = getUrlParams();
                alert(params.FilterName);
                document.getElementById("sfield").value = params.FilterName;
                document.getElementById('tbSearch').value = params.FilterMultiValue;


    }
    else {
            return false;
    }
} 

function ClearUrl() {
    window.location.href = "mypage.aspx";
        document.getElementById("sfield").value = "";
        document.getElementById('tbSearch').value = "";

}

</script>



 Search Field: 
  <select id="sfield">
    <option selected value="Title" >Title</option>
    <option value="Body">Body</option>
  </select>

 Search Text: 
   <input type="text" id="tbSearch" />
   <input type="button" id="btnSearch" value="Search" onclick="return RedirectUrl();" />
   <input type="button" id="btnClear" value="Clear" onclick="return ClearUrl();" />

Danmoreng · Accepted Answer · 2016-04-12T09:18:45.293

0

 window.location.href = "mypage.aspx?" + url;

reloads the page, which will result in all code after that not beeing executed. What you want to do is to add code for pageload and check if the parameters are given, then populate the textbox. Something like:

window.addEventListener('load', function(){
    var params = getUrlParams();
    if(typeof params.FilterName !== 'undefined'){
        // removes the first and the last char from the string
        var t = params.FilterMultiValue.substr(1, params.FilterMultiValue.length-2);
        document.getElementById("sfield").value = params.FilterName;
        document.getElementById('tbSearch').value = t;
    }
});

edited Apr 12 '16 at 09:18

answered Apr 12 '16 at 09:10

Danmoreng

2,367
1
19
32

if you have no other onload events you can use window.onload = function(){...} instead. However, I prefer the addEventListener because on pages with Javascript code from multiple sources it is safer. (multiple window.onload = function() will overwrite each other). – Danmoreng Apr 12 '16 at 10:22
Quick Google search on the matter: http://stackoverflow.com/questions/6927637/addeventlistener-in-internet-explorer – Danmoreng Apr 12 '16 at 10:50

Populate texbox value from url parameter using javascript?

1 Answers1