Pass to javascript variable attribute from html input id="attribute"

Question

Input

<input type="text" value="" id="row1">
<input type="text" value="" id="row2">

Need to get last character from row and pass it to javascript variable. Here is row1 and row2, need to get variables 1 and 2

I try to use this, but does not work

$('[id^="row"]').each(function (index, row) {
var row = row.id.substring(3);
alert (row);//this is only to check if value exists (alert or not)
});

No alert at all. But need: on first iteration (.each) var row is 1, on second, - 2, etc.

Used this as example. The example works, but my code not

$.each([52, 97], function(index, value) {
alert(index + ': ' + value);
});

Are you using jQuery? Your code seems to , but you don't mention it and didn't use the jquery tag... — T.J. Crowder
– T.J. Crowder, Commented May 31, 2013 at 10:02
The code is correct. Most likely it's not in a document ready handler, and it is loaded before the actual HTML — Maxim Krizhanovsky
– Maxim Krizhanovsky, Commented May 31, 2013 at 10:03
I recommend to read the jQuery tutorial: learn.jquery.com/about-jquery/how-jquery-works. It explains how to set up your code properly. — Felix Kling
– Felix Kling, Commented May 31, 2013 at 10:08

T.J. Crowder · Accepted Answer · 2013-05-31 10:10:56Z

1

Your code works fine, provided that:

You are actually including jQuery at some point (you didn't mention it in your question, but you appear to be using it)
You run the code after the elements exist.

Here's your code with jQuery included and where we ensure that the code doesn't run until after the elements exist: Live Copy | Live Source

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <input type="text" value="" id="row1">
  <input type="text" value="" id="row2">
  <script>
    (function($) {
        $('[id^="row"]').each(function (index, row) {
        var row = row.id.substring(3);
        alert (row);//this is only to check if value exists (alert or not)
        });
    })(jQuery);
  </script>
</body>
</html>

Note how the script tag is after the elements it operates on, so they exist when that script runs.

This would not work:

  <script>
    (function($) {
        $('[id^="row"]').each(function (index, row) {
        var row = row.id.substring(3);
        alert (row);//this is only to check if value exists (alert or not)
        });
    })(jQuery);
  </script>
  <input type="text" value="" id="row1">
  <input type="text" value="" id="row2">

...because when the script runs, the elements don't exist yet.

If for some reason you're not in control of where the script element goes, you can use jQuery's ready function to wait to run your code until the DOM has been loaded. But there's no need to do that if you control where the script tags go, just put them at the end of the document, just before the closing </body> tag.

More:

edited May 31, 2013 at 10:10

answered May 31, 2013 at 10:03

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

4 Comments

user2360838 Over a year ago

Thanks, your code works. I will compare with my code (to understand).

T.J. Crowder Over a year ago

@user2360838: The main thing is to make sure the script isn't run until after the elements exist. I've added an anti-example to demonstrate. Best,

user2360838 Over a year ago

One more question. I use $('[id^="row"]').each(function (index, row) { in one autosave script with save interval and one condition. And javascript code is above html input. However javascript works. Is it because of save interval and condition? I mean, page loads. At page load condition is not true and save interval time is not passed. And javascript starts to work only after page is loaded?

T.J. Crowder Over a year ago

@user2360838: As long as the element exists when the $(...) call is made to find it in the DOM, it'll find the element. Script code is run as the script elements are encountered, but naturally anything scheduled (via setTimeout or setInterval) or run in response to an event occurring happens later.

Collectives™ on Stack Overflow

Pass to javascript variable attribute from html input id="attribute"

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related