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..
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..
- does .value need parenthesis? – Csteele5 Commented Sep 21, 2015 at 2:29
- nope @Csteele5 ,i just need the value of name[]. – pal3 Commented Sep 21, 2015 at 2:32
-
Why are you getting the
input type=textas an array? you can simply get it from the.valueprop.... – Jordan Davis Commented Sep 21, 2015 at 2:40 -
Avoid using duplicate id's, BTW what is
_()? – user2575725 Commented Sep 21, 2015 at 4:41 -
Hi @Arvind _() is
function _(e){ return document.getElementById(e); }– pal3 Commented Sep 21, 2015 at 5:38
4 Answers
Reset to default 2
getElementsByNamewill return all the elements(NodeList) having name provided inargument
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>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"
Here is the simplest asynchronous multiple file uploader... this is the most pute 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);
?>
when I try to alert the name variable only the first index is showing up
As per your ment:
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" />