Select URL parameters with jquery and add them to script

Question

I have a url link:

http://mywebsite.org/product/page?var_one=result1&var_two=result2&var_three=result3&var_four=result4

The parameters are dynamic so it will not be static numbers. In my example are 4, but maybe less or more.
I have a jquery code that pre selects a dropdown:

jQuery(document).ready(function( $ ) {
    $("#var_one").val("result1");  
});

Now I want to, depending on the url parameters above to populate jquery code like:

jQuery(document).ready(function( $ ) {
    $("#var_one").val("result1"); 
    $("#var_two").val("result2"); 
    $("#var_three").val("result3"); 
    .
    .
    .
});

Check this: http://stackoverflow.com/questions/1131630/the-param-inverse-function-in-javascript-jquery you can use the code there to load the parameters and set them one-by-one to the relevant variables — Dekel, Oct 30 '16 at 12:42
to parse url properly in javascript i suggest you to use uri.js https://medialize.github.io/URI.js/ — Ergec, Oct 30 '16 at 12:50
you want to create dynamic inputs (with dynamic id's) and values. check my answer update. — Mamdouh Saeed, Oct 30 '16 at 14:30

score 0 · Answer 1 · answered Oct 30 '16 at 12:42

Here's a function to retrieve URL-parameters:

function GetURLParameter(sParam) {
    if (sParam != undefined && sParam.length > 0) {
        var sPageHref = window.location.href;
        var sPageURL = window.location.search.substring(1);
        var sURLVariables = (sPageURL.length != '') ? sPageURL.split('&') : sPageHref.split('&');
        for (var i = 0; i < sURLVariables.length; i++) {
          var sParameterName = sURLVariables[i].split('=');
            if (sParameterName[0] == sParam) {
            return sParameterName[1];
            }
        }
  } else {
    var sPageURL = document.location.pathname.split('&');
    var sParameterName = sPageURL[0];
    return sParameterName;
  }
}

If you specify a parameter, like GetURLParameter('something') it will fetch that. If you just use GetURLParameter() it will fetch the link used, ie /index.php or whatever.

Not what I'm looking for. What I want is: Take the first parameter var_one=result1 Var one should be the inserted in the jquery script as ID #var_one, and result1 should be inserted as value. jQuery(document).ready(function( $ ) { $("#var_one").val("result1"); }); If there are more parameters, jquery should be populated with others as well: jQuery(document).ready(function( $ ) { $("#var_one").val("result1"); $("#var_two").val("result2"); $("#var_three").val("result3"); . . . }); — , Oct 30 '16 at 13:52

Pranesh Ravi · Accepted Answer · 2016-10-30T14:00:34.817

0

Use regex to form a array of key value pair based on the url and use forEach to loop through the array and add the value to the id using .text()

Hope this helps!

var a = "http://mywebsite.org/product/page?var_one=result1&var_two=result2&var_three=result3&var_four=result4"

var query = a.split('?')[1] //extract query param
var queries = query.split(/&/g) //extract key value pairs from query param
queries.forEach(function(el){ //loop through the key value pair
  var newElm = '<div id="' + el.split('=')[0] + '">'+el.split('=')[1]+'</div>' //create new elm
  $('body').append(newElm) //append into DOM Body
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Oct 30 '16 at 14:00

answered Oct 30 '16 at 12:50

Pranesh Ravi

18,642
9
46
70

Not what I'm looking for. What I want is: Take the first parameter var_one=result1 Var one should be the inserted in the jquery script as ID #var_one, and result1 should be inserted as value. jQuery(document).ready(function( $ ) { $("#var_one").val("result1"); }); If there are more parameters, jquery should be populated with others as well: jQuery(document).ready(function( $ ) { $("#var_one").val("result1"); $("#var_two").val("result2"); $("#var_three").val("result3"); . . . }); – Oct 30 '16 at 13:54
Updated the answer! – Pranesh Ravi Oct 30 '16 at 14:00
Thanks, it worked great. Had to modify a little for my code but it did what I was looking for. :) – Oct 30 '16 at 14:15
This is my final code if someone else may need: jQuery(document).ready(function( $ ) { var a = decodeURIComponent(window.location.href); var query = a.split('?')[1] ;//extract query param var queries = query.split(/&/g) ;//extract key value pairs from query param queries.forEach(function(el){ //loop through the key value pair $("#"+ el.split('=')[0] +"").val(""+el.split('=')[1]+""); }); }); – Oct 30 '16 at 14:17
1

@ArensMyzyri Glad it helped :) – Pranesh Ravi Oct 30 '16 at 14:22

Mamdouh Saeed · Answer 3 · 2016-10-30T14:26:45.583

Update: to answer your question correctly as i understood you need to convert url parameters to JSON then use for loop and use keys, values to fill inputs values. so inputs are and values dynamic.

$(document).ready(function() {

  String.prototype.allParams = function() {
    return JSON.parse('{"' + decodeURI(this.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
  }


  var url = "http://mywebsite.org/product/page?var_one=result1&var_two=result2&var_three=result3&var_four=result4";
  //var url = location.href
  var params = url.allParams();

  for (var k in params) {
    if ($("#" + k).length) $("#" + k).val(params[k]);
    //if input id not exist append to body or any container
    //you can remove next line
    else $("body").append("<input value='" + params[k] + "'/>");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Try this prototype url.param("param"); to get parameter value.

String.prototype.param = function(str) {
  e = this.indexOf("?" + str + "=") > -1 ? "?" + str + "=" : "&" + str + "=";
  return this.indexOf(e) == -1 ? undefined : this.split(e)[1].split("&")[0];
}

var url = "http://mywebsite.org/product/page?var_one=result1&var_two=result2&var_three=result3&var_four=result4";

console.log(url.param("var_one")); //result1

console.log(location.href.param("param")); //undefined

Select URL parameters with jquery and add them to script

3 Answers3