Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

File Upload Buttons

Status
Not open for further replies.
mdazam

mdazam

Programmer
Apr 1, 2005
28
US
I have below script which when click on Add More button it keep on adding the "Upload" file type... My problem is I cannot make this arrange or decorate in table cell. When I try to put in table cell the input field shows up below the submit button in Mozilla and some postion in IE

I want to hv this script or any other script like this:

===============================================
Upload file/s: [..........] [BROWSE]
[ADD MORE FILE BUTTON]

[SUBMIT][RESET]
==============================================
If user clicks on [add more file button] this is how it look
Upload file/s: [..........] [BROWSE]
[..........] [BROWSE]
[ADD MORE FILE BUTTON]
and so on....


<script type="text/javascript">
var pntr=1;
var frm;
function WriteNew()
{
frm=document.forms[0];
In=document.createElement('input');
In.setAttribute('type','file');
In.setAttribute('name','file'+pntr);
In.setAttribute('id','file'+pntr);
pntr++;
frm.appendChild(In);
Br=document.createElement('br');
frm.appendChild(Br);
}
</script>
<body onload="WriteNew()">
<button onClick="document.forms[0].submit()"> Submit Form </button><button onClick="WriteNew()">Add More Files</button>
 
Sort by date Sort by votes
I'm not the owner of that javascript so dont know how to do it. Can you please post me that code...

<table><tr>
<td>Upload File/s</td>
<td>????I want it here to get appended here????</td>
</tr>
</table>
 
Upvote 0 Downvote
1) give your cell an id:
Code: 
<td id="myFavoriteCell">

2) change your function:
Code: 
function WriteNew() {
    var theCell = document.getElementById('myFavoriteCell');
    var newInput = document.createElement('input');
    var newBr = document.createElement('br');

    newInput.setAttribute( 'type', 'file' );
    newInput.setAttribute( 'name', 'file'+pntr );
    newInput.setAttribute( 'id', 'file'+pntr );

    theCell.appendChild( newInput );
    theCell.appendChild( newBr );

    pntr++;
}

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote

Wow, cLFlaVA... how did you do that? You're not the owner of the script either.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
JS ...
<form ...>
<table><tr>
<td>Upload file/s::</td>
<td id="myFavoriteCell"></td>
</tr></table>
<button onClick="document.forms[0].submit()"> Submit Form </button>
<button onClick="WriteNew()">Add More Files</button>
</form>

My code is as above. I think we are almost there. Few errors
When I tried you code in IE, when I press "Add More Files" button it is creating multi upload files, but submit button not working.

Where as seeing in Mozilla once I press "Add More Files", it is creating another upload files and immediatly getting submitted automactilay..

Regards
 
Upvote 0 Downvote
ok I moved</form> to ...

<tr id="myFavoriteCell"></form></td>
Now the add more file button and submit working on both browser but when I submit in IE value of upload fileds showing null where as in Mozilla it is giving proper value.
 
Upvote 0 Downvote
oops guess U hv not read my last comment completely...

Error:

when I submit in IE value of upload fileds showing null where as in Mozilla upload fields showing proper value after submit.
 
Upvote 0 Downvote
Okay after converting <button>.... into <input type=....>
I dont get any error on validator. But still when I submit my form values are null.
 
Upvote 0 Downvote
I think I know the problem but need solutions.

When I use form method as POST, everything I submit is null its bcoz I'm doing request.getParameter()

When I use form method as GET, everything I submit is show proper value in Mozilla but not in IE (submit error) may be bcoz of enctype="multipart/form-data". Only POST method goes with enctype="multipart/form-data" but not GET. correct ?

I dont knwo some how Mozilla is accepting both POST and GET, but where as IE if I submit with empty upload value its showing values but only theu GET method.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

mayamanako
  • Locked
  • Question
Only Visible Radio Buttons Are Required 1
Replies
4
Views
116
mayamanako
mayamanako
penguinspeaks
  • Locked
  • Question
JS Open print dialog page to print a file
Replies
0
Views
143
penguinspeaks
penguinspeaks
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
246
JScannell
JScannell
jimbospain
  • Locked
  • Question
script to read in files, parse and add to another file
Replies
1
Views
92
ggriffit
ggriffit
keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
106
Samthyr
Samthyr

Part and Inventory Search

Sponsor

Back
Top