how to get textbox array using javascript

Question

I have this form below.

<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="text" name="name[]" id="name"><br>
  <input type="text" name="name[]" id="name"><br>
  <input type="file" name="file1" id="file1"><br>
  <input type="button" value="Upload File" onclick="uploadFile()">
</form>

and this is my function uploadFile.

function uploadFile(){
    var file = _("file1").files[0];
    var name = _("name").value;
    alert(name); 
    var formdata = new FormData();
    formdata.append("file1", file);
    formdata.append("name", name);

Now my problem is I want to get the value of my textbox array which is the name[]..when I try to alert the name variable only the first index is showing up..any help will be appreciated.thanks in advance..

Why are you getting the input type=text as an array? you can simply get it from the .value prop.... — Jordan Davis
– Jordan Davis, Commented Sep 21, 2015 at 2:40
Hi @Arvind _() is function _(e){ return document.getElementById(e); } — pal3
– pal3, Commented Sep 21, 2015 at 5:38

Rayon · Accepted Answer · 2019-07-31 13:15:55Z

2

getElementsByName will return all the elements(NodeList) having name provided in argument

function uploadFile() {
  var names = document.getElementsByName('name[]');
  for (var i = 0, iLen = names.length; i < iLen; i++) {
    alert(names[i].value);
  }
}

<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="text" name="name[]" id="name">
  <br>
  <input type="text" name="name[]" id="name">
  <br>
  <input type="file" name="file1" id="file1">
  <br>
  <input type="button" value="Upload File" onclick="uploadFile()">
</form>

edited Jul 31, 2019 at 13:15

answered Sep 21, 2015 at 2:43

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

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

6 Comments

Rayon Over a year ago

@JordanDavis, What would you suggest then ? Considering performance ?

Jordan Davis Over a year ago

first not using getElementsByName... you should pass this in the uploadFile(this) and then call element.parent.children and then loop through the children like you have above, and secondly he shouldn't be using a text array instead of using a string....

Rayon Over a year ago

element.parent.children will come into picture if OP has more than one forms in his page. name[] becomes helpful to manipulate at server end, What if OP wants to validate fields at client side and then submit the form ?

Jordan Davis Over a year ago

it doesn't help at all serverside... and it's way slower and pointless... what would be the point to declare it an array vs. string? If it's multiple files then the only array should be the name=file[] so that when you upload multiple files they are stored as an array....

Rayon Over a year ago

If you have any input field with name as [] then it will be treated as array while processing it at server side..I am looking forward to hear some demonstration about why it is slower and pointless..

|

Suresh · Accepted Answer · 2015-09-21 02:31:56Z

1

The getElementsByName() method returns a collection of all elements in the document with the specified name (the value of the name attribute), as a NodeList object.

var mynames= document.getElementsByName("name[]");
console.log(mynames[0].value); //Outputs "atrib name 1"

answered Sep 21, 2015 at 2:31

Suresh

1,1691 gold badge16 silver badges29 bronze badges

1 Comment

pal3 Over a year ago

Hi @Suresh, I tried your suggestion but I got this error.. Cannot read property 'value' of undefined

Jordan Davis · Accepted Answer · 2015-09-21 04:48:07Z

Here is the simplest asynchronous multiple file uploader... this is the most compute and memory efficient.... for clarity reason I left the css out.

"You Can Thank Me Later" - Drake "jimmy brooks" Graham

//HTML & JS

<!DOCTYPE html>
<html>
<head>  
<script>
function uploadFile(formdata){  
    var data = new FormData();
    var request = new XMLHttpRequest();
    for(var i=0; i < formdata.length; i++){
        if(formdata[i].tagName !== "BUTTON"){                 
            if(formdata[i].type === "file"){                
                for(var x=0; x < formdata[i].files.length; x++){
                    data.append(formdata[i].files[x].name, formdata[i].files[x]);
                }
            }
            else{
                data.append(formdata[i].name, formdata[i].value);
            }
        }
    }
    request.open("POST", "dump.php");
    request.send(data);
    request.onreadystatechange = function(){
        if(request.readyState == 4){
            console.log(request.response);
        }
    }   
}
</script>   
</head>
    <body>  
        <form onsubmit="return false;">
          <input type="text" name="name">
          <input type="file" multiple>
          <button onclick="uploadFile(this.parentNode.children)">Upload Files</button>
        </form> 
    </body>
</html>

//PHP (dump response back to callback)

<?php
    var_dump($_POST);   
    var_dump($_FILES);
?>

user2575725 · Accepted Answer · 2015-09-21 06:06:06Z

when I try to alert the name variable only the first index is showing up

As per your comment:

function _(e){ return document.getElementById(e); }

Problem is getElementById() returns you the first html element with the given id no matter how many other elements exists on the page with same id.

First thing avoid duplicate id on a page, as suggested by other possibly you can go for accessing the text-box with name attribute:

var names = document.getElementsByName("name[]");
var values = [];
var i = names.length;
while (i--)
  values.unshift(names[i].value);
alert(values);

<input type="text" name="name[]" value="Alex" />
<br/>
<input type="text" name="name[]" value="James" />

Collectives™ on Stack Overflow

how to get textbox array using javascript

4 Answers 4

6 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related