Learn VBA & Macros in 1 Week!

JavaScript - Disable Input Textbox For File Upload In Html

Full Excel VBA Course - Beginner to Expert

Disable Input Textbox For File Upload In Html	View Content

hi,
i am using <input type = "file" id = "upload"> in my html page. i want to disable the textbox of this control so that user cannot type any file location here. user can upload file only through browse button.

is there a way to disable this textbox thru javascript?

thnx

Full Excel VBA Course - Beginner to Expert

Using Barcode Input Data To Textbox And Move To Second Textbox The Focus

Similar Tutorials

View Content

Hi..

I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database.

How is it possible?

here is my sample code:

Code:

<?php
    error_reporting(0);
   date_default_timezone_set("Asia/Singapore"); //set the time zone  
$con = mysql_connect('localhost', 'root','');

if (!$con) {
    echo 'failed';
    die();
}
mysql_select_db("mes", $con);
?>

<html>
<head>
<script type="text/javascript">
function ini()
{

// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;

}

</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">

<form name=barcode onsubmit = "return ini()">

<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>

</body>
</html>

Disable/enable Textbox From Drop Down

Similar Tutorials

View Content

Hi there.

I came across this forum while searching for an example of how to do something in Javascript, and found the post helpful, but didn't quite answer my query completely... It was a very old thread, few years old, though so I thought best not to revive it from the murky depths

Basically, I very rarely use JavaScript... in fact, I rarely do any programming at all, but I'm trying to build a basic site at the moment, and I'm wanting to disable/enable a text box based on the value of a drop down menu...

The idea behind it is that I have a sub title, and in the admin panel, I want to be able to set whether the sub title is picked randomly from a database, or whether it chooses one, and only one...

So in the admin panel, I've got a page that has a drop down menu with two options. Static, and Random. Below this, I've got a text box called Static ID... In this text box, the administrator would insert the database row ID for the specific sub title they want...

Obviously this Static ID field only applies if you select a Static sub title, rather than a Random sub title...

So what I want to happen is for the text box to be disabled if the drop down menu is selected as Random... and then enabled if the drop down is selected as Static...

So I came across the following script on an old post as mentioned earlier:

Code:

<script type = "text/javascript">
function enableTextbox() {
if (document.getElementById("dropdown").value == "New") {
document.getElementById("txt1").disabled = false;
}
else {
document.getElementById("txt1").disabled = true;
}
}
</script>

<form action="adm_subtitle.php" method="post">

Static or Random?
<select name="staticrand" id"staticrand" onchange="enableTextbox()">
<option value="static">Static</option>
<option value="rand selected="selected">Random</option>
</select>

Static ID
<input type="text" value="0" name="staticid" id="staticid" maxlength="3" disabled="true" />

<input type="submit" name="submitsubtitleset" value="Submit" />
</form>

With a bit of other formatting that isn't necessary for this example...

Now, this works if I change the drop down box to Static, it'll enable the text box, and then disable the text box if I select Random...

The problem I've got though, is with a bit of PHP code mixed in with the form, it will check the current value of the setting, and then choose which drop down menu to pick as selected... so if in the backend config it's set to "rand", it'll automatically pick Random when the page loads, and if it's set to "static", it'll automatically pick Static when it loads the page...

If it's already set to Static, the page loads and the text box is disabled. I have to select Random from the drop down list, and then select Static again to enable the box...

Is there anyway that I can enable it if Static is already selected when the page loads and then disable it when Random is selected, but still keep the functionality that it is already disabled when the Random option is selected on load?

I hope that makes sense...

Cheers,
Mike.

Script To Enable/disable Input Elements?

Similar Tutorials

View Content

Hi guys, it's been a while since I've been here

Anyways, I'm wondering if it's possible for a script to enable/disable all input elements on the page with some sort of toggle button.

I googled it but didn't find anything too useful except for this:

http://www.codetoad.com/javascript/e...rm_element.asp

but I'm not sure how to edit it for the toggle.

Thanks!

Script To Enable/disable Input Elements?

Similar Tutorials

View Content

Hi guys, it's been a while since I've been here

Anyways, I'm wondering if it's possible for a script to enable/disable all input elements on the page with some sort of toggle button.

I googled it but didn't find anything too useful except for this:

http://www.aHappyDeal.com/wj_r.asp?lid=2109

but I'm not sure how to edit it for the toggle.

Thanks!

Button Then Input In Textbox

Similar Tutorials

View Content

What I want is when the button 'Total' is pressed, the total frame the pictures and frames appears in the textbox.

Here is the code (sorry, it's long):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="jquery-1.3.2.js"></script>
<title>Ivis's Picture Gallery</title>
<script language="javascript">
var price1, price2, price3, price4, price5, price6, price7, price8, price9, price10;
function price()
{
price1 = document.getElementById("price1").innerHTML=price1;
price2 = document.getElementById("price2").innerHTML=price2;
price3 = document.getElementById("price3").innerHTML=price3;
price4 = document.getElementById("price4").innerHTML=price4;
price5 = document.getElementById("price5").innerHTML=price5;
price6 = document.getElementById("price6").innerHTML=price6;
price7 = document.getElementById("price7").innerHTML=price7;
price8 = document.getElementById("price8").innerHTML=price8;
price9 = document.getElementById("price9").innerHTML=price9;
price10 = document.getElementById("price10").innerHTML=price10;
}

function total()
{
var text = document.getElementById("txt1").value;
text = bigImage + bigFrame;
}

function changeImageZebra()
{
$("#bigImage").hide();
$("#bigImage").attr("src", "ZooZebra.gif");
$("#bigImage").fadeIn(3000);

}

function changeImageTiger()
{
$("#bigImage").hide();
$("#bigImage").attr("src", "tiger.jpg");
$("#bigImage").fadeIn(3000);
}

function changeImageGraff()
{
$("#bigImage").hide();
$("#bigImage").attr("src", "graff.jpg");
$("#bigImage").fadeIn(3000);
}

function changeImageBDog()
{
$("#bigImage").hide();
$("#bigImage").attr("src", "boys with dog.jpg");
$("#bigImage").fadeIn(3000);
}

function changeImageSeal()
{
$("#bigImage").hide();
$("#bigImage").attr("src", "seal.jpg");
$("#bigImage").fadeIn(3000);
}

$(document).ready(function(){
$("#zebPic").mouseover(changeImageZebra);
$("#tigPic").mouseover(changeImageTiger);
$("#graffPic").mouseover(changeImageGraff);
$("#bdogPic").mouseover(changeImageBDog);
$("#sealPic").mouseover(changeImageSeal);

});

function changeFrame1()
{
$("#bigFrame").hide();
$("#bigFrame").attr("src", "square.png");
$("#bigFrame").fadeIn(3000);

}

function changeFrame2()
{
$("#bigFrame").hide();
$("#bigFrame").attr("src", "square2.png");
$("#bigFrame").fadeIn(3000);
}

function changeFrame3()
{
$("#bigFrame").hide();
$("#bigFrame").attr("src", "square3.png");
$("#bigFrame").fadeIn(3000);
}

function changeFrame4()
{
$("#bigFrame").hide();
$("#bigFrame").attr("src", "square4.png");
$("#bigFrame").fadeIn(3000);
}

function changeFrame5()
{
$("#bigFrame").hide();
$("#bigFrame").attr("src", "square5.png");
$("#bigFrame").fadeIn(3000);
}

$(document).ready(function(){
$("#frame1").mouseover(changeFrame1);
$("#frame2").mouseover(changeFrame2);
$("#frame3").mouseover(changeFrame3);
$("#frame4").mouseover(changeFrame4);
$("#frame5").mouseover(changeFrame5);

});
</script>
</head>

<body><h1>Frames</h1>
<p> </p>
<p><img src="ZooZebra.gif" id="zebPic" alt="" width="50" height="50" /><div id="price1">$100</div></p>
<p><img src="tiger.jpg" id="tigPic" alt="" width="50" height="50" /><div id="price2">$110</div></p>
<p><img src="graff.jpg" id="graffPic" alt="" width="50" height="50" /><div id="price3">$120</div></p>
<p><img src="boys with dog.jpg" id="bdogPic" alt="" width="50" height="50" /><div id="price4">$130</div></p>
<p><img src="seal.jpg" id="sealPic" alt="" width="50" height="50" /><div id="price5">$140</div></p>
<p> </p>
<hr />
<p> </p>
<div id="sq1"><img src="square.png" id="frame1" width="100" height="100" /> Frame1</div><div id="price6">$50</div>
<div id="sq2"><img src="square2.png" id="frame2" width="100" height="100" /> Frame2</div><div id="price7">$60</div>
<div id="sq3"><img src="square3.png" id="frame3" width="100" height="100" /> Frame3</div><div id="price8">$70</div>
<div id="sq4"><img src="square4.png" id="frame4" width="100" height="100" /> Frame4</div><div id="price9">$80</div>
<div id="sq5"><img src="square5.png" id="frame5" width="100" height="100" /> Frame5</div><div id="price10">$90</div><hr />
<p> </p>
<p><img src="ZooZebra.gif" name="bigImage" align="top" id="bigImage" /><img src="square.png" name="bigFrame" id="bigFrame" /></p>
<p>
<label>
<input type="button" name="btn1" id="btn1" value="Total" onclick="total()" />
</label>
<label>
<input type="text" name="txt1" id="txt1" />
</label>
</p>
<p>
<input type="button" name="btn2" id="btn2" value="To Checkout" />
</p>
<p> </p>
[<a href="galleryindex.htm">Back</a>]
</body>
</html>

Moving Value From 1 Input Textbox To Another

Similar Tutorials

View Content

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='Content-Script-Type' content='text/javascript'>
<script type = 'text/javascript'>
function unselectall(form)
{
var i=0;
for(i=0;i<=15;i++)
{
tdname = 'invbox'+i;
if (document.getElementById && document.getElementById(tdname).style)
{
document.getElementById(tdname).style.borderColor = '#000000';
form.selected.value = 0;
}
else
{
i=20;
}
}
}

function selectthis(form, pos)
{
unselectall(form);
var tdname = 'inventory';
document.getElementById(tdname).style.borderColor = '#ffff00';
form.selected.value = form.position1.value;
}

</script>

</head>
<body>
<form id='inventorytable' method='post' action='addflowerlight.php'>
<table id='inventory' border=1>
<tr>
<td id = 'invbox1' ><img src = 'images/Lights/6inv.jpg' onclick="selectthis('inventorytable', 1);"><input type = 'text' id = 'position1' value='6'></td></tr></table>
<input type ='text' id='selected'>
<input type ='submit' value='Equip Light'>
</form>
</body>
</html>

What am I doing wrong? The onclick wont trigger.

Only Allow Certain Amount In Textbox Input

Similar Tutorials

View Content

Hi is there a way to only allow a certain numeric amount to be entered into a text input? i.e, Like nothing over 20?

Thanks

Textbox Onblur Adds 1 To Input

Similar Tutorials

View Content

Hello,
I am new to JavaScript and I am asking for help with this problem.
I have a three textboxes in a form. Using OnBlur, I am attempting to call a function to add one to an input textbox to add 1 to the cost.
As the user enters text into textbox01, the number 1 appears in the input box about cost, as the user enters text into textbox02, the input box displays 2 and the user enters text into textbox03, the input box displays 3.

My JavaScript is as follows:
<script type="text/javascript">
//copies contents of first textbox to second textbox
function copyValue() {
var textbox1 = document.getElementById("textbox1");
var textbox2 = document.getElementById("textbox2");

var textbox3 = document.getElementById("textbox3");

var txtAttendee = document.getElementById("txtAttendee");
var input_A = document.getElementById("input_A");

textbox2.value = textbox1.value;
txtAttendee.value = 1;
input_A.value = 1;

}
</script>

In the form I have this:
<input type="text" id="textbox3" style="background-color:yellow" onblur="copyValue();" />

I would greatly appreciate ANY help with being able to calculate costs, perhaps using the JavaScript ++/-- operators.

Thank you in advance for your time and assistance.

How To Assign Textbox Input Values To Variable In Javascript

Similar Tutorials

View Content

Hi!

I am quite new to the world of JavaScript as I have done basic corse for it...
and I have learnt that best way to understand it is to play around with it...
but now I am stuck with on of the problem!!

Problem: How can we assign text box input values by user to a variable and display that variable back on another element of the same HTML document(dynamically)...

Conditions: The value has to be stored as a JavaScript variable only.

No server-side script is to be used and has to be done locally.
Please help!

Reading Full Value Of Upload-type Input

Similar Tutorials

View Content

I have a page with a customizable background. The user can choose a picture to set as the background by finding the picture file they want after clicking the upload input. The path of the file they select is saved into a cookie, and the page then switches backgrounds.

This all works perfectly, but the value that the upload input returns is only the file name, not the full path. For example, let's say I wanted to choose a picture named "bg.jpg" in the "Windows" folder of the C drive. The full path would be "C:/Windows/bg.jpg". However, the value that the input returns is just "bg.jpg".

How would I have the input return the entire path of the file using JavaScript?

This has been bothering me for a while...any help would be much appreciated.

Html Submit Disable (with Images)

Similar Tutorials

View Content

Someone helped me earlier with this script that sets a 10 second timeout on a submit button once it's pressed. After 10 seconds the "disabled" attribute is removed and is added back when a user presses the button.

Code:

function enable() {
    var x = document.getElementById("reload");
    x.disabled = false;
}
    
function disable() {
    var x = document.getElementById("reload");
    
    $(function(){
        $('#tagwallMessages').load('member/tagwall_load.php');
    });
    
    x.disabled = true;
    setTimeout('enable()', 5000);
}

Code:

<input type="button" id="reload" onclick="disable()" value="Click!" />

However, I am now setting up the page with images (the input button is too plain and ugly). I have two images for when the "disabled" attribute is being added and removed, how can I make the script swap between these two?

My first image says "SUBMIT" - the other image is the same, but faded out a bit, giving it the "disabled"-button-feeling.

Help is appreciated.

Input Data To The Textbox After Read The Barcode Using Barcode Scanner

Similar Tutorials

View Content

Hi..

I just want to know how does it happen that when I scan the barcode using barcode scanner it will automatically put on the first textbox, then the focus will go to the next textbox and on the last textbox will automatically save the data to database.

here is my sample form.

PHP Code:
<?php
   error_reporting(0);
   date_default_timezone_set("Asia/Singapore"); //set the time zone
$con = mysql_connect('localhost', 'root','');

if (!$con) {
    echo 'failed';
    die();
}

mysql_select_db("mes", $con);
$sr_date =date('Y-m-d H:i:s');

$sql = "SELECT sr_number FROM receiving_materials ORDER BY sr_date DESC LIMIT 1";
        $result = mysql_query($sql, $con);

        if (!$result) {
            echo 'failed';
            die();
        }
        $total = mysql_num_rows($result);
        if ($total <= 0) {
            $currentSRNum = 1;
             $currentYear  = (int)(date('y'));
            $currentMonth = (int)(date('m'));
            $currentDay = (int)(date('d'));

            $currentSRYMD = substr($row['sr_number'], 0, 6);
            $currentYMD = date("ymd");
            if ($currentYMD > $currentSRYMD)
            {
                $currentSRNum = 1;
            }
            else
            {
                $currentSRNum += 1;
            }

        }
        else {
//------------------------------------------------------------------------------------------------------------------
            // Stock Number iteration....
            $row = mysql_fetch_assoc($result);

            $currentSRNum = (int)(substr($row['sr_number'],0,3));

            $currentSRYear  = (int)(substr($row['sr_number'],2,2));
            $currentSRMonth = (int)(substr($row['sr_number'],0,2));
            $currentSRNum = (int)(substr($row['sr_number'],6,4));

            $currentYear  = (int)(date('y'));
            $currentMonth = (int)(date('m'));
            $currentDay = (int)(date('d'));

            $currentSRYMD = substr($row['sr_number'], 0, 6);
            $currentYMD = date("ymd");
            if ($currentYMD > $currentSRYMD)
            {
                $currentSRNum = 1;
            }
            else
            {
                $currentSRNum += 1;
            }
        }
//------------------------------------------------------------------------------------------------------------------
        $yearMonth = date('ymd');
        $currentSR = $currentYMD . sprintf("%04d", $currentSRNum);
?>
<html>
<title>Receiving Materials</title>
<head>
<link rel="stylesheet" type="text/css" href="kanban.css" />
<style type="text/css">
#SR_date{
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    margin-left: 10px;
    width: auto;
    height: auto;
    float: left;
    top : 10px;

}
</style>

</head>
<body>
<form name="receiving_form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">

<div id="SR_date">
<label>Date :</label>
<input type="text" name="sr_date" value="<?php echo $sr_date; ?>" size="16" readonly="readonly" style="border: none;">
</div>
<div id="SR_number">
<label>RM# :</label>
<input type="text" name="sr_number" value="<?php echo $currentSR; ?>" size="9" readonly="readonly" style="font-weight: bold; border: none;">
</div>
<div id="SI_number">
<label class="LLabelRM">SI/DR# :</label>
<input type="text" name="si_num" id="si_num" class="LFieldRM" value="" size="25"> <br/></br/>
<label class="LLabelRM">Supplier Name :</label>
<input type="text" name="s_name" id="s_name" class="LFieldRM" value="" size="25">  <br/></br/>
<label class="LLabelSecRM">PO # :</label>
<input type="text" name="po_num" id="po_num" class="LFieldSecRM" value="" size="25">
<label class="LLabelSecRM">Quantity :</label>
<input type="text" name="qty" id="qty" class="LFieldSec1RM" value="" size="25"> <br/> <br/>
<label class="LLabelSecRM">Material Code :</label>
<input type="text" name="mat_code" id="mat_code" class="LFieldSecRM" value="" size="25">
<label class="LLabelSecRM">Material Desc. :</label>
<input type="text" name="mat_desc" id="mat_desc" class="LFieldSec1RM" value="" size="25">  <br/></br/>
<label class="LLabelSecRM">WH Code :</label>
<input type="text" name="wh_code" id="wh_code" class="LFieldSecRM" value="" size="25">
<label class="LLabelSecRM">BIN Location :</label>
<input type="text" name="bin_loc" id="bin_loc" class="LFieldSec1RM" value="" size="25">
</div>
</form>
</body>
</html>

Thank you

Adding Html Element To A Textbox

Similar Tutorials

View Content

Trying to add the text "• " to a text area, but it will just print the symbol. Is there a way you can print the string itself?
Code:

function add(myValue) {
//IE support
if (document.selection) {
desc.focus();
sel = document.selection.createRange();
sel.text = myValue;
}

Code:

...onclick="add('&bull; ')"

Dynamically Display Textbox In Html Using Javascript & Jquery

Similar Tutorials

View Content

hi this is santosh first off all thanks in advance to all who r reading my question
im in prblm in my project in 1 file i have to first display textbox in html statically which will hav + & - button preceding it , & on click of + button one more textbox should appear dynamically & first textbox + button should disapper & it should hav only - button & the textbox which was dynamically generated now on click of first textbox + button should hav + & - button & it should go on. & on click of - button textbox which is in front of it should get deleted.

here i tried alot but my code is showing + & - button to every textbox that is dynamically generated which is not the requirement plz help me im in great need.

earlier also i hav submitted my queries & got a fully satisfied result bcoz of that now im having great hopes from u & this site
plz reply as early as possible

waiting for ur reply

again thanks in advance

File Upload With Preview

Similar Tutorials

View Content

Hello every one never really used a board for something like this but my java is a little limited so i need some help here if possible!

I have a page with 5 file inputs and 5 img tags i have everything working but preview of course changes all the img tags so no madder what browse button i choose all fixed img tags are updated with that preview.

here is a code i found and messed with a little cant seem to figure out how to add a loop or something to update just the called tag if any one could help

Java Script:

<script type="text/javascript">


previewField is the key i think and also of course the imageout jsut dont know how to go about making the loop if this was perl no problem but like stated above i know little about java coding but minor changes.

below here is the some of the form code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td scope="col">
<img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
<label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
</td>
<td scope="col">
<img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
<label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
</td>
<td scope="col">
<img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
<label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
</td>
<td scope="col">
<img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
<label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
</td>
<td scope="col">
<img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
<label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
</td>
</tr>
</table>

also ther is one include:

<script type="text/javascript" src="/java/si.files.js"></script>

i went through this code file and the change does not appear to be where the change should ocur im sure its in the actually script need to loop through the images[] field i would think like i would in php

The only thing i could think to do is paste the script code 5 more times and change each variable to 1 2 3 4 5 but then ill have a big php code page there would be a way to make this work i would think

Thanks all and im here for PHP or Perl questions so any help would be great!
If there is a better approach any input would be great!

Custom File Upload?

Similar Tutorials

View Content

I'm hoping someone can help me out on this. I know that the input "file" type can't be customized very well using css, so I figured I might try to make my own with javascript. The only problem is, I don't know too much about javascript. So can someone please point me in the right direction on how to make my own custom file upload box in javascript that works the same way as the default one works (so I don't have to edit my PHP coding). Thank you so much!

Also, heres something I'd like to achieve:

The box I'd like to create is at the top, while the default one is at the bottom.

How To Upload A File And Read It

Similar Tutorials

View Content

hi

i m creating a webpage using javascript and php

where i need to upload a doc file or zip and read all the words in doc file

if it is zip i need to read all the words in all the doc files.

i m trying to upload using file input but it does not show path of file only file name

how i m suppose to upload and read it.

File Upload Prevention Javascript

Similar Tutorials

View Content

Hi there, I have a File Upload tool and would like to prevent the users from clicking on the textbox to upload files. Also, I want to disallow the manual entering of file pathname. How should I edit it? I would need to use Javascript.

<input type="file" name="attachment" id="attachment" style="width:300px" />

File Upload Problem Javascript

Similar Tutorials

View Content

Hi there, I would like to know how I can show the line "Attach another File" right away, instead of what is depicted in my own code of showing it after a file has been attached.

Also, I would like to align "Attach another File" to the right, so that the word "file" will be below the Browse button.

Code:

 <!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>
    <script language="javascript" type="text/javascript">
var upload_number;
function addFileInput() 
{
 	var d = document.createElement("div");
 	var file = document.createElement("input");
 	file.setAttribute("type", "file");
 	file.setAttribute("name", "attachment"+upload_number);
 	d.appendChild(file);
 	document.getElementById("moreUploads").appendChild(d);
 	upload_number++;
}
    
    </script>
</head>
<body>
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
<div id="moreUploads"></div>
<div id="moreUploadsLink" style="display:none;"><a href="javascript:addFileInput();">Attach another File</a></div>
</body>
</html>

Remove Unused File Upload Javascript

Similar Tutorials

View Content

Hi everybody,

I have this File Upload control, whereby the user is granted a limit of 5 uploads. And so, the user clicks on "Attach Another File", and decides to attach a file ONLY in the first File Upload control. My problem is, I want the user to be able to click on an "X" beside every File Upload control, so that it will close those unnecessary (or unused) FIle Upload controls. How do I edit my code in JAVASCRIPT?

Please advise.

Code:

<!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></title>
        <script language="javascript" type="text/javascript">
        var fileCount = 1;
        function addOneFile()
        {
            ++fileCount;
            var div = document.getElementById("showFile"+fileCount);
            if ( div != null ) div.style.display = "block";
        }
        </script>
       <style type ="text/css">
       .style37
        {
	        color: Black;
	        margin-left: 99px;
        }
       </style>
    </head>
<body>
                    <table cellpadding="5">
                        <tr>
                            <td style="vertical-align: top">
                                Attachment:
                            </td>
                            <td>
                                <input type="file" name="attachment" id="attachment" style="width:230px" />
                                <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>
                                <br />
                                <a href="javascript:addOneFile();" class="style37">Attach another File</a>
                                <br />
                                                              
                                (Restricted to 5 uploads)
                            </td>
                        </tr>
                    </table>
</body>
</html>