Values of all textboxes on a page - without knowing the ID?

Question

I am developing a Chrome Extension that, when the user leaves the page, saves all the text from the textboxes on that page and outputs it to a file.

If I knew the IDs of the textboxes on the page, then it wouldn't be a problem, but the issue is that I need the extension to get the values of all of the textboxes on the page without knowing the IDs, as it will be a different website each time the extension is used.

Also, how would the information be collected? In a string? It would be nice to go down the page and add each textbox to a file, one by one, instead of one huge string.

I've never used jQuery or understood it, and there's probably a solution in it staring me in the face. If anyone suggests using it, please could you explain it a little bit?

Thanks in advance. I would post my code, but I don't know where to start - ergo I don't have any.

`$('input[type=text]')` should be a selector that returns the widgets you want. — David Tansey, Apr 19 '15 at 17:01

score 3 · Answer 1 · answered Apr 19 '15 at 17:03

you could store it in array using $.each, as :

var valsArr = [];
$("input[type=text]").each(function() {
    valsArr.push( $(this).val() );
});

or create object with name as key and value as its value, like:

var valsObj = {};
$("input[type=text]").each(function() {
    valsObj[this.name] = $(this).val();
});

score 1 · Accepted Answer · edited May 23 '17 at 12:21

1

You can do it like this:

function onClick(){
  var areas = document.getElementsByTagName("textarea");
  for(var i = 0; i < areas.length; i++){
    alert(areas[i].value);
  }
}

<textarea></textarea>
<textarea></textarea>
<button onclick="onClick()">Gather information</button>

Also see this regarding your "save to a file" question Using HTML5/Javascript to generate and save a file

edited May 23 '17 at 12:21

Community

1
1

answered Apr 19 '15 at 17:05

OddDev

3,644
5
30
53

This looks like it would work, but when I run the snippet I get `Uncaught ReferenceError: onClick is not defined`.... – String Apr 19 '15 at 17:26
@String I'm sorry, there was an formatting error :( I've edited my answer and it should work now. – OddDev Apr 20 '15 at 07:58

Memolition · Answer 3 · 2015-04-19T17:06:53.150

0

Make a for loop

for(i=0; i < $("input[type='text']").length; i++){
   $("input[type='text']").index(i).value();
}

edited Apr 19 '15 at 17:06

answered Apr 19 '15 at 17:01

Memolition

492
1
5
12

score 0 · Answer 4 · answered Apr 19 '15 at 17:03

0

Use the selector and apply it in an each cycle.

$(":text").each(function(){
    alert($(this).val());
});

answered Apr 19 '15 at 17:03

Shaunak D · Answer 5 · 2015-04-19T17:17:21.640

0

You can use .map() : It returns an array.

var arr = $(":text").map(function() {
    return this.value
}).get();  //add join(',') after get() to get a simple comma separated list.

Instead of input[type="text"] you could also use :text pseudo selector.

Demo

edited Apr 19 '15 at 17:17

answered Apr 19 '15 at 17:12

Shaunak D

20,588
10
46
79

Values of all textboxes on a page - without knowing the ID?

5 Answers5