?
Solved

how to reference an element using a variable

Posted on 2014-02-19
14
Medium Priority
?
214 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
  • +1
14 Comments
 
LVL 53

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 58

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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

Author Comment

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

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 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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
 
LVL 58

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 58

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 53

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 53

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 58

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

771 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