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
Solved

how to reference an element using a variable

Posted on 2014-02-19
14
208 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 55

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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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
 
LVL 55

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 55

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 55

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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Running a javascript project in WebStorm 2 24
Copying table data to one another 15 29
Javascript 2 20
How to check if a check box is active using Java Script? 2 19
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

808 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