How to decode html form values from url in javascript?

Question

In my html page, I have a form tag (GET) that has no encoding type, so it would be using

application/x-www-form-urlencoded by default according to this:

http://www.w3schools.com/tags/att_form_enctype.asp

But then it encodes spaces into + signs. For example, when I pass

a b c & f, it turns it into

a+b+c+%26+f in the url. Then if I do the javascript decodeURIComponent function I get

a+b+c+&+f, but what javascript function do I call if I want the original string a b c & f? I prefer not to hardcode string replaces.

Does anyone know the way to handle this?

Thanks

The short answer how to handle this is to replace the + signs with spaces first, then decode the rest of the data. But what you actually need is a query string parser. — Joseph Myers, Oct 14 '16 at 05:10

Nirjhar Vermani · Answer 1 · 2016-10-14T03:37:15.390

0

You can try to use replace function in javascript after you get string from decodeURIComponent

str.replace("+", " ");
or
str.replace(/\+/g, ' ');

edited Oct 14 '16 at 03:37

answered Oct 14 '16 at 03:31

Nirjhar Vermani

1,215
8
17

I figured this is a way, and you mean `str.replace("+"," ")`, but is this really the best practice way? – omega Oct 14 '16 at 03:32
http://stackoverflow.com/questions/4292914/javascript-url-decode-function use 202 upvotes answer – omega Oct 14 '16 at 03:41

score 0 · Answer 2 · edited May 23 '17 at 12:23

0

There is Jquery Pluggin which you can use. Here

Or look into this Here

edited May 23 '17 at 12:23

Community

1
1

answered Oct 14 '16 at 03:39

Fida

1,339
1
12
21

Joseph Myers · Answer 3 · 2016-10-14T04:12:19.830

Update: here's the article I wrote about it one time for HTML Goodies: http://www.htmlgoodies.com/beyond/javascript/article.php/11877_3755006_2

Take a look at the simple ptq (parse-the-query) function, one of the library of functions I wrote in 2001.

function ptq(s, q) {
  var i, p;
  s = s.replace(/\+/g, ' ').replace(/;/g, '&').split('&');
  q = q || {};
  for (i=0; i<s.length; i++) {
    p = s[i].split('=', 2);
    q[unescape(p[0])] = unescape(p[1]);
  }
  return q;
  }

It works even with very old JavaScript versions, and using it is simple:

  var q = ptq(location.search.substring(1));
  /* grab query string after the initial "?" delimiter */

The properties of q will then correspond to any name=value pairs defined in the HTML form values submitted to the current URL via a GET request's query string.

For example, if an HTML form contained a field named name with contents "Joseph" and if this form is submitted as specified by its action attribute to the HTML page file.html then the GET request will be "file.html?name=Joseph" and the value of q.name will equal the string literal "Joseph".

Some parts of the code, like escape/unescape have newer and preferred equivalents if later features of JavaScript are available.

Dredging up a later revision of this code, you can also use Boolean parameters in your URLs like "file.html?name=Joseph&secure", although these will never be generated by a browser when submitting an HTML form. It's also easier to use. Just write q = param(); in your code, similar to Lincoln D. Stein's CGI.pm module syntax.

function ptq(q)
{
  /* parse the query */
  /* semicolons are nonstandard but we accept them */
  var x = q.replace(/;/g, '&').split('&'), i, name, t;
  /* q changes from string version of query to object */
  for (q={}, i=0; i<x.length; i++)
  {
    t = x[i].split('=', 2);
    name = unescape(t[0]);
    if (!q[name])
      q[name] = [];
    if (t.length > 1)
    {
      q[name][q[name].length] = unescape(t[1]);
    }
    /* next two lines are nonstandard */
    else
    {
      q[name][q[name].length] = true;
    }
  }
  return q;
}

function param()
{
  return ptq(location.search.substring(1).replace(/\+/g, ' '));
}

Note that in this new revision all form fields are returned as arrays. This is much more appropriate since the standard allows for multiple form fields with the same name, meaning that the correct the data type for a form field's value is an array of strings.

How to decode html form values from url in javascript?

3 Answers3