Solved

how to reference an element using a variable

Posted on 2014-02-19
14
211 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 57

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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your 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 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
 
LVL 57

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 57

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 57

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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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 code hide show and toggles. 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…

737 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