Javascript & problems

Question

I have the following code:

var artist = document.getElementById("txtBoxArtist").value;

When value is plain text, e.g. Biffy Clyro, artist = Biffy Clyro

When value contains &, e.g. Mumford & Sons, artist = Mumford

I the send artist value using AJAX, and recover the value on another php page like this:

var data = "nameTitle=" + title + "&nameArtist=" + artist;

[...]

$nameArtist=$_POST['nameArtist'];

Why does this happen and how to avoid it? It is giving me lots of problems this &symbol...

Thank you all!

Wooot, the value property is always a string, it's not encoded with entities, so that's not possible? — adeneo, Apr 05 '14 at 17:51
Your problem might be unclear. Can you reproduce it in a [fiddle](http://jsbin.com) ? And describe it in more detail. Where is PHP involved for example ? — Denys Séguret, Apr 05 '14 at 17:52
Hi, I can try to create a fiddle, but I don´t think it is easy.... — qalbiol, Apr 05 '14 at 17:54
It's because you're building the GET string manually, so the `&` in the text actually splits the values (`&` by itself is a URL property delimiter). Your URL, in other words, looks like this: `/example.com/test.php?nametitle=whatever&nameArtist=Mumford+&+Sons` — Jared Farrish, Apr 05 '14 at 17:55
How about I create a fiddle for you -> http://jsfiddle.net/adeneo/Qu6LU/ — adeneo, Apr 05 '14 at 17:56
@JaredFarrish And how can I solve that? Sorry, but I have basic knowledge... Learning little by little! — qalbiol, Apr 05 '14 at 17:57
@qalbiol - Always encode your URL components (individually, not the whole URL at once). — Jared Farrish, Apr 05 '14 at 18:06

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

2

You need to encode the values before sticking them on the URL.

var data = "nameTitle=" + encodeURIComponent(title) + "&nameArtist=" + encodeURIComponent(artist);

You should also see this.

edited May 23 '17 at 12:28

Community

1
1

answered Apr 05 '14 at 18:00

bjb568

11,089
11
50
71

2

Note that `encodeURIComponent`) is correct (not `encodeURI`): *Note that **encodeURI by itself cannot form proper HTTP GET and POST requests**, such as for XMLHTTPRequests, **because "&", "+", and "=" are not encoded**, which are treated as special characters in GET and POST requests. encodeURIComponent, however, does encode these characters.* [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) – Jared Farrish Apr 05 '14 at 18:02

score 1 · Answer 2 · answered Apr 05 '14 at 18:01

Some characters are special and need 'escaping' to encode their values - as you are showing using & instead of &.

However, these escaping principles are different for HTML content and for URLs/URIs.

In URI, & is escaped as %26 and not as & - so you should either use that or the appropriate encoding/decoding functions, not the HTML entity encoding/decoding.

naota · Accepted Answer · 2014-04-05T18:11:32.047

0

I guess you can encode valiables before sending them like this:

 artist = encodeURIComponent(artist);
 title = encodeURIComponent(title);
 var data = "nameTitle=" + title + "&nameArtist=" + artist;

hope this helps.

edited Apr 05 '14 at 18:11

answered Apr 05 '14 at 17:56

naota

4,695
1
18
21

2

No it shouldn't, that's *explicitly* the problem. `encodeURIComponent()` is correct. – Jared Farrish Apr 05 '14 at 18:03
The 'C' in component needs to be capitalized: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent – bjb568 Apr 05 '14 at 18:06
@naota Ok, this partially works, but result is then Mumford%20&%20Sons, which is not what I want, because when I then compare this value to the DB, of course it does not find it because of %20... – qalbiol Apr 05 '14 at 18:07
@bjb568 - One of my `shift` keys appears to be sticking. – Jared Farrish Apr 05 '14 at 18:08
@naota Solved it using urldecode() in PHP file. Thanks all, regards. – qalbiol Apr 05 '14 at 18:11
@qalbiol,Thank you. I'm grad it helps. – naota Apr 05 '14 at 18:13

Javascript & problems

3 Answers3