HTML Input Array: How to get html input array values with javascript

Question

I have this code which works fine!:

<script>
function get(userfirstname, userlastname){
	alert(userfirstname);

	return false;
}
</script>

<form action="" method="POST">
    <input type="text" name="userfirstname">
    <input type="text" name="userlastname">
    <input type="submit" onclick="return get(userfirstname.value, userlastname.value);">
</form>

i am trying to catch the input values with an array like this:

<script>
function get(user){
	alert(user["firstname"].value);

	return false;
}
</script>

<form action="" method="POST">
    <input type="text" name="user[firstname]">
    <input type="text" name="user[lastname]">
    <input type="submit" onclick="return get(user);">
</form>

i tried so many different scenarios, no point :(

Any hint would be appreciated.

you can't.. in js you have to get them in objects to do this — Akshay Khandelwal
– Akshay Khandelwal, Commented Aug 14, 2016 at 16:53
hello!, thank you for your comment, how can i get them in object? — Tarık Seyceri
– Tarık Seyceri, Commented Aug 14, 2016 at 16:57

DavidDomain · Accepted Answer · 2016-08-14 17:25:18Z

2

You could simply target the form element inside your onclick handler, query all input elements to iterate over them and build the array you are looking for.

Here is an example of what you could do to build an array of objects holding each input elements name and value, excluding disabled once and the submit element.

function get(evt){
  var fields = [];
  event.target.parentElement
  .querySelectorAll('input:not([disabled]):not([type="submit"])').forEach(function(e) {
    fields.push({name: e.name, value: e.value}); 
  })
  console.log(fields);
  return false;
}

<form>
  <input type="text" name="firstname" placeholder="Name"><br>
  <input type="text" name="lastname" placeholder="Surename"><br>
  <input type="text" name="foo" value="foo will be excluded" disabled><br>
  <input type="submit" onclick="return get();">
</form>

answered Aug 14, 2016 at 17:25

DavidDomain

15.3k4 gold badges44 silver badges52 bronze badges

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

4 Comments

Tarık Seyceri Over a year ago

Does this work as HTML Array Input ?, Like user[firstname] and user[lastname] ??

DavidDomain Over a year ago

Not sure if there is anything like HTML Array Input. There might be server side languages that now how to deal with these type of input field naming styles, to convert them to an array, just like PHP does, i think. But may i ask why this is so important to you ? From the example i gave you, you can build an array or object, with what ever structure you like. You do not need the array syntax inside the name attribute.

Tarık Seyceri Over a year ago

I tried your code! it worked for me, Thank you, what i mean HTML Array Input, is this: <input type="text" name="user[firstname]"> <input type="text" name="user[lastname]">

Tarık Seyceri Over a year ago

i want the client side to handle it, because i want to use it as Ajax to login with it, but the Framework i am working on, works only with html input arrays.. it is a little bit complicated, the PHP framework i am using is Yii2, this is the first time i get stuck with such a stupid question like this, but no body thought about it that's the problem :), Thank you for caring ;) ofcourse i am not gone use firstname or lastname to login with it though :D

Akshay · Accepted Answer · 2016-08-14 17:42:40Z

1

A jQuery Approach to get this

function get(){
    var fields = [];
    var arr = $('form').not('input[type="submit"]').find('input[type="text"]')
    $(arr).each(function(i,val){
        fields.push({name:$(val).attr('name'),value:$(val).val()})
    })
}

answered Aug 14, 2016 at 17:42

Akshay

8057 silver badges16 bronze badges

2 Comments

DavidDomain Over a year ago

This seems to be a bit over complicated. With jQuery you could simply use .serializeArray(), which does exactly that, and a bit more. ;)

Tarık Seyceri Over a year ago

Your code worked! Thank you :), how ever, i want to use javascript code, so mr @DavidDomain , fixed the issue :)

Collectives™ on Stack Overflow

HTML Input Array: How to get html input array values with javascript

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related