Passing a variable to Javascript

Question

So I'm kind of a Javascript newbie and having trouble figuring out how to pass a variable from my HTML template to Javascript.

I want to pass the search query that a user enters to javascript.

Here's my template to get the search query.

<form class="well-whatsnext form-search" style="text-align:center; border-radius:10px 10px 10px 10px; width:900px; height:0px;background-repeat:no-repeat;margin-bottom:100px;"  action="/search/?q="> 
<center>
 <input type="text" id = "form-search" value="Search for Stuff" class="input-xxlarge search-query" style="margin: 30px 0px 0px 70px; height:50px;width:600px;font-size:20px;vertical-align:middle;text-align:center;border-radius:10px 0px 0px 10px;float:left;border-right:0px;color:grey;border-right:0px;" name="q">
</center>
<br>
</form>

Here's my Javascript snippet:

$("#form-search").click(function() {
    // This sends us an event every time a user clicks the button
    mixpanel.track('MainSearch', {'query' : search-query, 'url' : window.location.pathname});
});

It is clear that search-query is not the correct way to refer to the query since I'm not getting the correct output I want.

How do I capture the variable of the query searched for by the user?

Niet the Dark Absol · Accepted Answer · 2013-02-12 02:36:56Z

2

Use plain JavaScript wherever possible.

{'query': document.getElementById('form-search').value}

answered Feb 12, 2013 at 2:36

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1328021 Over a year ago

Thanks -- what's the difference between this method and the one above?

Niet the Dark Absol Over a year ago

The one above is about 100 times slower and relies on you only using the "search-query" class once on the entire page. IDs are by definition unique.

vol7ron Over a year ago

I don't know if 100 times slower is a fair assessment, more like 85% (jsperf.com/jquery-selector-value)

Niet the Dark Absol Over a year ago

@vol7ron The above answer uses a class name search though, which is slower still.

David G · Accepted Answer · 2013-02-12 02:32:05Z

2

Use $('.search-query').val() to get the value of the input element with that class name:

{ 'query' : $('.search-query').val() ... }

answered Feb 12, 2013 at 2:32

David G

97.6k41 gold badges173 silver badges258 bronze badges

3 Comments

user1328021 Over a year ago

Thanks so much! So is that basically the format for inserting an input in Javascript -- $('.<class_name>).val() -- sorry I'm new to Javascript and just using it for MixPanel mainly, hence why I'm hacking my understanding of it....

David G Over a year ago

@user1328021 This is JavaScript, though not purely JavaScript. And yes, you need $('.class-name') but note that the . in the beginning means the name that comes after it is a class name. For elements with id attributes, you need #. For example: $('#id-name)`.

Niet the Dark Absol Over a year ago

@David Every time jQuery is used as a selector engine, God kills a lolcat.

Collectives™ on Stack Overflow

Passing a variable to Javascript

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related