Solved

how to reference an element using a variable

Posted on 2014-02-19
14
201 Views
Last Modified: 2014-03-14
Hi,

I am struggling to reference an element using the standard JQuery format :

This works using getelementbyid:
section=1
var log_var='log_id,'+ section 
$( document.getElementById( log_var )).val('TEST')	

HTML:
<input id="log_id,1" type="hidden" />

Open in new window


but this does not:
section=1
var log_var='log_id,'+ section 
$( '#'+ log_var )).val('TEST')	

HTML:
<input id="log_id,1" type="hidden" />

Open in new window


I seem to have to be referencing all my elements using the first method, Can anyone let me know what Im doing wrong? BTW.. The elements are not generated witin JQuery  dynamically, they are hardcaded in the html.

Thanks
0
Comment
Question by:jellydeal
  • 5
  • 4
  • 3
  • +1
14 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39869787
 section=1;
var log_var='log_id\\,'+ section;
$( '#'+ log_var ).val('TEST');

Open in new window

0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39869898
Too many closing brackets

$( '#'+ log_var )).val('TEST')	

Open in new window

Should be
$( '#'+ log_var ).val('TEST')

Open in new window

0
 

Author Comment

by:jellydeal
ID: 39869902
Sorry Julian,
That's just a typo on the sample code.
There's the correct amount of brackets in the real code.
0
 

Author Comment

by:jellydeal
ID: 39869903
Hi scott,
Are you saying the comma is a special  character?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39869932
I have never used a character in the ID before so to be honest this was new to me.  Your first example you are using javascript and the 2nd jquery.  With jquery it looks like that has to be escaped.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39869938
Sorry, this is the reference http://api.jquery.com/id-selector/
If the id contains characters like periods or colons you have to escape those characters with backslashes.
http://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/
// Does not work:
$( "#some:id" )
 
// Works!
$( "#some\\:id" )
 
// Does not work:
$( "#some.id" )
 
// Works!
$( "#some\\.id" )

Open in new window

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39869995
Works for me
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
section=1;
var log_var='log_id,'+ section;
$( '#'+ log_var ).val('TEST');
});

</script>
<style type="text/css">
</style>
</head>
<body>
<input id="log_id" type="text" />
</body>
</html>

Open in new window

0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39869997
The comma is not an issue (refer previous post) - you should be able to refer to it directly

Online version here

Works in FF and Chrome
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39870055
julianH, try using the input  id with a comma like "log_id,1"
<input id="log_id,1" type="hidden" />

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39870058
http://jsbin.com/vosuquye/1/edit?html,output
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<title>Test</title>

<script type="text/javascript">
$(function() {
section=1;
var log_var='log_id,'+ section;
$( '#'+ log_var ).val('TEST');
section2=2;
var log_var2='log_id\\,'+ section2;
$( '#'+ log_var2 ).val('TEST2');
});  

</script>
<style type="text/css">
</style>
</head>
<body>
<input id="log_id,1" type="text" />
<input id="log_id,2" type="text" />
</body>
</html>

Open in new window

0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39870082
@Scott

You are correct - my test case excluded the comma in the input
0
 
LVL 58

Expert Comment

by:Gary
ID: 39928573
I've requested that this question be closed as follows:

Accepted answer: 500 points for padas's comment #a39869938

for the following reason:

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
 

Author Closing Comment

by:jellydeal
ID: 39928574
Thank you
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now