Passing a string from html page to javascript

Question

I have done a good amount of searching on how to pass data from a webpage to javascript but I have not found a solution to passing a string. And that is exactly what I am trying to do, simply pass a string to a java script function. The following is my code:

<a href = "website.html?gender='boy'">
<IMG STYLE="position:absolute; TOP:250px; LEFT:100px; WIDTH:300px; HEIGHT:300px" SRC="images/boy0023.png"/>
</a>

<a href = "website.html?gender='girl'">
<IMG STYLE="position:absolute; TOP:250px; LEFT:600px; WIDTH:300px; HEIGHT:300px" SRC="images/girl0023.png"/>
</a>

I have tried various ways to try and get this working including: removing the '' around boy and girl, using a button rather than a sprite, using "" around boy and girl. So on click, I am redirected to the page and I create a global variable named gender to hold the information then try to use gender in my funciton as so:

var gender // Creates the global gender variable

init(gender){
    //code goes here
}

So I am not getting the results that I want on the page and when I go into console and type in gender; I receive the message that gender is undefined. So my question is, what am I not understanding here and what am I doing wrong?

Are you meaning to pass the variable back to the server? Or do you just want something to happen when the user clicks on the `` link? — mikeyq6, Oct 06 '14 at 16:24
If you do want to just read the query string parameters in javascript after the page reloads, take a look at [this question](http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) — James Thorpe, Oct 06 '14 at 16:25
Not one of those answers was helpful to you? http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript — Roko C. Buljan, Oct 06 '14 at 16:27
@Novocaine but AFAIK it's just matter of convention. I think The above will work in every browser. I'm just not sure about single quotes in Query strings — Roko C. Buljan, Oct 06 '14 at 16:28
I am about to try these suggestions and I will let you guys know if it works out. To clarify, I am wanting to click on one of the sprites (either the boy or girl image) and depending on the image that is clicked, I would like to load certain data based on that choice. So if I am able to set gender to either 'boy' or 'girl' (which I have done manually in console) everything works fine after. It is just setting it by using the webpage that is causing me trouble. — Nick, Oct 06 '14 at 16:40
Thank you all for your responses. I unfortunately wont be able to work on it more until later tonight. I am pretty close using the get parameter by name function, I have just run into some issues that I didn't take into account. — Nick, Oct 06 '14 at 17:45
@Nick If you no longer want an answer to this question, I think, you should delete it. — akinuri, Oct 06 '14 at 20:42
@akinuri I believe this question can serve others because it seems kind of unclear how strings should be handled. Through the resources that others have posted, I have found a solution to my problem and will post the answer. — Nick, Oct 07 '14 at 00:47

score 0 · Answer 1 · answered Oct 06 '14 at 16:55

You could do a regexp check on the url. FIDDLE

// use window.location.href instead of string (the link)
var link = "website.html?gender=girl";
var gender;
if (link.indexOf("gender") != -1) {
    gender = link.match(/.*gender=(.*)/)[1];
}

/*
var gender;
if (window.location.href.indexOf("gender") != -1) {
    gender = window.location.href.match(/.*gender=(.*)/)[1];
}
*/

score 0 · Answer 2 · answered Oct 06 '14 at 17:28

Why not have it like calling a javascript function on 'onclick' of a tag rather than the href. And using window.location to change the page if needed. Refer to the fiddle :- http://jsfiddle.net/Lpx7epf2/5/

Code is as follows :- (HTML)

<a href="#" onclick="gender('boy')">
<IMG STYLE="position:absolute; TOP:250px; LEFT:100px; WIDTH:300px; HEIGHT:300px" SRC="images/boy0023.png"/></a>
<a href="#" onclick="gender('girl')">
<IMG STYLE="position:absolute; TOP:250px; LEFT:600px; WIDTH:300px; HEIGHT:300px" SRC="images/girl0023.png"/></a>

(JavaScript)

function gender(str){
    alert(str);//Use the value any way you want
    window.location="website.html?gender="+str;
}

score 0 · Answer 3 · answered Oct 07 '14 at 00:50

The following solved this issue:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var gender = getParameterByName('gender'); // Used as global variable

function init(gender) {
    gender = getParameterByName('gender'); //For some reason only works when it is reiterated localy

Passing a string from html page to javascript

3 Answers3