jQuery .load - params in the url - multiparts, multivalue

Question

My params are being extracted form html code and than pasted into jQuery .load request.

Html code:

<a href="#" class="employee">John Doe<span>Lead Web Developer</span></a>

Params extraction from html code, inside .click:

        //Create href + params from name + params from title
        var substr = ( $(this).html() ).split('<span>')[0].split(' '); // Get First & Last Name
        var JobTitle = $('span', this).html(); // Get Job Title 

        console.log( JobTitle );  
        // console log will be multivalue (e.g "Lead Web Developer")

jQuery .load request with params

$('.popUp').load("employee.php?FirstName=" + substr[0]+"&LastName=" + substr[1] + "&JobTitle=" + JobTitle, function(){

                // Do Stuff When Done

        });

But, the URL I can see in the FireBug looks like that:

http://host.loc/employee.php?FirstName=John&LastName=Doe&JobTitle=Lead

---

As you can see, only first word from var JobTitle is being used. Why?

How can I past multivalue param inside the URL?

Answer 1

I think you should encode the value using encodeURIComponent() to allow spaces in the querystring

    var JobTitle = $('span', this).html(); // Get Job Title 
    JobTitle = encodeURIComponent(JobTitle)
    console.log( JobTitle );