PDA

View Full Version : Expand-Contract Javascript



blurguava
02-02-2010, 04:59 AM
Hi there, I have this form whereby when there is a "File Upload Input" aka

"<input id="File1" type="file" />" (I don't know the actual name, but that's not the point).



The user will be able to click on "Add another attachment", which is situated below the File Upload Input. Right now, when the user clicks on it, another "File Upload Input" will appear, and will be placed below the newly-added "File Upload Input".

Therefore, whenever the user clicks on the "Add another attachment", it will automatically move downwards to be situated below the newly-added "File Upload Input". How should I do it?

Also, when I click on the "textbox" of the "File Upload Input", it will pop up the dialog box for me to upload my file. How can I disable it so that the user can only upload it via the "Browse" button?

My code is shown as below:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
#Select1
{
width: 209px;
}
#Text1
{
height: 143px;
width: 209px;
}
.style17
{
height: 330px;
width: 427px;
margin-left: 50px;
}

#Submit1
{
margin-left: 240px;
}


</style>
<script type="text/javascript">
var COLLAPSABLE_HELPDESK_PARENT_NAME = "collapsable_helpdesk";
var COLLAPSABLE_HELPDESK_PARENT_TYPE = "div";
var COLLAPSABLE_HELPDESK_CHILD_TYPE = "p";

var COLLAPSABLE_HELPDESK_EXPAND = "Add another attachment";
var COLLAPSABLE_HELPDESK_SHRINK = "Add another attachment";

init = function() {
if(document.getElementById && document.createTextNode) {
var entries = document.getElementsByTagName(COLLAPSABLE_HELPDESK_PARENT_TYPE);
for(i=0;i<entries.length;i++)
if (entries[i].className==COLLAPSABLE_HELPDESK_PARENT_NAME)
assignCollapse(entries[i]);
}
}

assignCollapse = function (div) {
var button = document.createElement('collapse_add_attachment');
button.style.cursor='pointer';
button.setAttribute('expand', COLLAPSABLE_HELPDESK_EXPAND);
button.setAttribute('shrink', COLLAPSABLE_HELPDESK_SHRINK);
button.setAttribute('state', -1);
button.innerHTML='dsds';
div.insertBefore(button, div.getElementsByTagName(COLLAPSABLE_HELPDESK_CHILD_TYPE)[0]);

button.onclick=function(){
var state = -(1*this.getAttribute('state'));
this.setAttribute('state', state);
this.parentNode.getElementsByTagName(COLLAPSABLE_HELPDESK_CHILD_TYPE)[0].style.display=state==1?'none':'block';
this.innerHTML = this.getAttribute(state==1?'expand':'shrink');
};
button.onclick();
}


window.onload=init;

</script>
</head>
<body>
<div class="style17">
<table cellpadding="5">
<tr>
<td>
Category:
</td>

<td>
<select id="Select1" name="D1">
<option></option>
</select><br />
</td>
</tr>

<tr>
<td>
Description:<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</td>

<td>
<input id="Text1" type="text" />
</td>
</tr>

<tr>
<td>
Attachment:
</td>

<td>
<input id="File1" type="file" />
</td>
</tr>
</table>

<div class="collapsable_helpdesk">
<p>

<input id="File2" type="file" />
</p>
</div>

<br />
<input id="Submit1" type="submit" value="Submit" />
</div>
</body>
</html>

Old Pedant
02-02-2010, 06:58 AM
The very very easiest way to do this is also the best, in my opinion.



<script>
var fileCount = 1;
function addOneFile()
{
++fileCount;
var div = document.getElementById("showFile"+fileCount);
if ( div != null ) div.style.display = "block";
}
</script>

...

<form ...>
...
<input name="file1" type="file" />
<div id="showFile2" style="display: none;">
<input name="file2" type="file" />
</div>
<div id="showFile3" style="display: none;">
<input name="file3" type="file" />
</div>
<div id="showFile4" style="display: none;">
<input name="file4" type="file" />
</div>
<div id="showFile5" style="display: none;">
<input name="file5" type="file" />
</div>
<input type=button value="attach another file" onclick="addOneFile()" />
...
</form>

And note that, indeed, the button will appear to "move down" under the last visible <input type=file> field.

Old Pedant
02-02-2010, 07:00 AM
As to what you can control in the <input type="file"> control: Very little. Browsers have very strong feelings about this, as it's a huge security risk to allow any kind of scripting of such a control.