...

View Full Version : how to choose a number of inputs



tsclan
08-26-2004, 01:40 AM
I am currently making an article submission system in php and for part of the things that can get submited with this article is some image files releated to this article. At the moment I have a 10 type file inputs in a nice row so that the user can upload a max of ten files,
Now heres where I need help, i would like it too look a bit more dynamic so I want to give the user an option to choose how many files out of ten they want to upload, so i am thinking maybe a listbox listing numbers one to ten and they choose how many uploads they want and once they click on that number, up pops that number of "<input type="file">" rather than just a row of ten uploads as some may not even be used.
So can any of you show some examples on how this can be done or show a tutorial on how do something like this.
Thanks again

jamescover
08-26-2004, 02:19 AM
This would be just as easy to do in PHP, and would be x-browser friendly.


-james

tsclan
08-26-2004, 03:16 AM
ok ill see what the people over at the php forums say about this, if theres a way of doing it via php
thanks anyway

Willy Duitt
08-26-2004, 07:28 AM
Something like this may help:

Place the script in the HEAD and in the body where you would like to build the inputs add this script call including the max number of inputs highlighted in blue:
<script type="text/javascript">addInputs(10)</script>

And it is advised that you include your current file inputs which you placed in a nice row within <noscript> tags for those whom have javascript disabled.....




<script type="text/javascript">
<!--//
function addInputs(theInput){
var table = document.createElement('table');
var files = document.getElementById('files');
var tbody = document.createElement('tbody');
table.setAttribute('id','files');

if((typeof theInput).match(/number/i)){
document.write('<label>How many files would you like to upload: </label>');
document.write('<input type="text" size="1" onkeyup="addInputs(this)">');
maxNumber = theInput;
return;
}

if(theInput.value > maxNumber){
alert('You may only upload '+maxNumber+' files!');
if(files)theInput.parentNode.removeChild(files);
theInput.value = theInput.value.replace(/\S*/g,'');
theInput.focus();
return;
}

if(theInput.value.length > 0 && !theInput.value.match(/^\d+$/)){
alert('Please enter only whole numbers into this field!');
theInput.value = theInput.value.replace(/[^\d]*/g,'');
theInput.focus();
return;
}

if(theInput.value.length == 0 || theInput.value.match(/^\d+$/)){
for(var i=1; i<=theInput.value; i++){
var row = document.createElement('tr');
var cell = document.createElement('td');
var label = document.createElement('label');
label.setAttribute('for','file'+(i));
label.appendChild(document.createTextNode('File '+i+': '));
cell.appendChild(label);
row.appendChild(cell);
tbody.appendChild(row);


var cell = document.createElement('td');
var input = document.createElement('input');
input.setAttribute('name','file'+(i));
input.setAttribute('type','file');
input.setAttribute('size','40');
cell.appendChild(input);
row.appendChild(cell);
tbody.appendChild(row);
} table.appendChild(tbody);

if(files){
theInput.parentNode.removeChild(files);
} theInput.parentNode.insertBefore(table,theInput.nextSibling);
}
}
//-->
</script>
</head>

<body>
<form method="get" action="http://google.com">
<script type="text/javascript">addInputs(10)</script>
<noscript>
<input type="file" name="file1">
<input type="file" name="file2">
<input type="file" name="file3">
<input type="file" name="file4">
<input type="file" name="file5">
<input type="file" name="file6">
<input type="file" name="file7">
<input type="file" name="file8">
<input type="file" name="file9">
<input type="file" name="file10">
</noscript>
</form>


.....Willy

glenngv
08-26-2004, 07:56 AM
<html>
<head>
<script type="text/javascript">
function hideFileInputs(){
var f = document.forms['uploadForm'];
var elem;
for (var i=1;i<=10;i++){
elem=f.elements['file'+i];
elem.disabled=true;
elem.style.display='none';
}
}

function showFileInputs(n, f){
var elem;
for (var i=1;i<=10;i++){
elem=f.elements['file'+i];
if (i<=n){//show it
elem.disabled=false;
elem.style.display='inline';
}
else {//hide it
elem.disabled=false;
elem.style.display='none';
}
}
}
</script>
</head>
<body onload="hideFileInputs()">
<form name="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
How many attachments do you want?
<select name="num" onchange="showFileInputs(this.options[this.selectedIndex].text,this.form)">
<option selected="selected">0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select><br />
Attachments:<br />
<input type="file" name="file1" /><br />
<input type="file" name="file2" /><br />
<input type="file" name="file3" /><br />
<input type="file" name="file4" /><br />
<input type="file" name="file5" /><br />
<input type="file" name="file6" /><br />
<input type="file" name="file7" /><br />
<input type="file" name="file8" /><br />
<input type="file" name="file9" /><br />
<input type="file" name="file10" /><br />
</form>
</body>
</html>

Willy Duitt
08-26-2004, 08:15 AM
Aye, much easier... :thumbsup:

.....Willy

Edit: Ooops, for some reason I was thinking text input not option menu... :p

jamescover
08-26-2004, 09:31 AM
<?php

$Num = $_POST['num'];

for ($i=0;$i<$Num;$i++){
echo '<input name="pic' . $i . '" type="file" size="35" />' . '<br />';
}

?>


-james

tsclan
08-26-2004, 02:09 PM
thank you again so much
glenngv that worked like a dream, exactly how i wanted it
thanks for everyone who helped out aswel i couldnt have done it without u guys :thumbsup:

just wondering for Willy Duitt i needing to put a style class into the inputs what would i do if i wanted to do that

glenngv
08-26-2004, 03:16 PM
<head>
<style type="text/css">
.upload {
font-size:12px;
font-family: Verdana;
}
</style>
</head>
...
<input type="file" class="upload" name="file1" />

Take note that you can't change the style of the Browse button other than the font and size.

tsclan
08-26-2004, 06:54 PM
thanks again,
but now things have gone one and now when i have to do multiple uploads in php the input needs to becomes this
<input type='file' name='file[]' /><br />
and no longer is the name field just "file1" all the way up to ten.
This has caused an error in GLENNGV's javascript, it looked like that all i neaded to do was change this line
elem=f.elements['file'+i];
to this
elem=f.elements['file[]'];
on both functions but that doesn seem to work,
any help on this would be great thanks

tsclan
08-26-2004, 07:27 PM
dont worry i managed to get it to work
I saw this line in Willy Duitt example
label.appendChild(document.createTextNode('File '+i+': '));
and i saw that it had +i+ in it so i made my line go
elem=f.elements['file'+i];
to this
elem=f.elements['file['+i+']'];
and that now worked thanks and sorry for the bother



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum