Using map to get all values from input fields

Question

Say there are numerous <input> and I wanted all the values as an array. I thought it'd be really easy to just do $("input").map(function(obj) { $(obj).val() }), but when I get that, I'm getting the error: Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')

This error is occuring within jQuery itself here:

var rreturn = /\r/g;

jQuery.fn.extend({
    val: function( value ) {
        var hooks, ret, isFunction,
            elem = this[0];

        if ( !arguments.length ) {
            if ( elem ) {
                hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];
                ...

Any work around? Here's a fiddle: https://jsfiddle.net/jvbgo94f/1/

Please provide a minimal reproducible example.

kiner_shah
– kiner_shah

2022-01-01 06:10:30 +00:00
Commented Jan 1, 2022 at 6:10 — kiner_shah
– kiner_shah, Commented Jan 1, 2022 at 6:10
@kiner_shah updated

james
– james

2022-01-01 06:17:01 +00:00
Commented Jan 1, 2022 at 6:17 — james
– james, Commented Jan 1, 2022 at 6:17

kiner_shah · Accepted Answer · 2022-01-01 07:13:06Z

1

You should use $(this) inside map to access that particular element.

$("#a").val("1");
$("#b").val("2");
inputs = $(".test").map(function() {
  return $(this).val();
});
console.log($(inputs));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="test" id="a" />
<input class="test" id="b" />
<input class="test" id="c" />

answered Jan 1, 2022 at 7:13

kiner_shah

4,8137 gold badges30 silver badges45 bronze badges

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

2 Comments

james Over a year ago

interesting... do you know why map passing & using each obj as i was doing fails?

kiner_shah Over a year ago

@james, there are two ways to use map - first way and second way. I used second way.

Brad · Accepted Answer · 2022-01-01 07:00:47Z

0

A bit different than what you're looking for, but the standard way to handle this is to use FormData.

If you wrap your inputs in a form element:

<form>
  <input name="a" />
  <input name="b" />
  <input name="c" />
</form>

Then, you can do something like this:

const formData = new FormData(
    document.querySelector('form')
);

for (const [key, value] of formData) {
  console.log({key, value});
}

answered Jan 1, 2022 at 7:00

Brad

164k57 gold badges381 silver badges559 bronze badges

Collectives™ on Stack Overflow

Using map to get all values from input fields

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related