[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 427
  • Last Modified:

Check Input=file ! remove if empty

My Below JS working perfectly fine. What it does is on "Add More fileds" it add input type=file ...and on submit it call servlet.
What I need here is a one more script wich checks if the input type=file is empty or not. If empty I dont want that filed to sent to servlet.
Idea here is somethings user may click on Add 4 times and send only 3 files and leaves 4th field empty. So dont want server side check-up and send back to user again etc., Instead it will be good to hv check on client-side.

<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('size','50');
      In.setAttribute('id','file'+pntr);
      pntr++;
      frm.appendChild(In);
      Br=document.createElement('br');
      frm.appendChild(Br);
   }
</script>
<body onload="WriteNew()">
<form method="post" action="upload" enctype="multipart/form-data">
<input type="hidden" name="dir" value="<% out.println(request.getAttribute("rs"));%>">
</form>
<button onClick="document.forms[0].submit()">Submit</button>
<button onClick="WriteNew()">Add More Fields</button>

Let me konw if anyother way to this solution.

Thanks for your time !!
0
princehyderabad
Asked:
princehyderabad
  • 8
  • 6
  • 2
1 Solution
 
cLFlaVACommented:


>> instead it will be good idea to check on client side

while this is a good idea for preliminary testing, what if i disabled javascript?  your servlet code would break, causing an unhappy, non-returning web user.
0
 
archrajanCommented:
function dothis()
{
var frm = document.getElementsByTagName('input')
for(i=0; i <frm.length;i++)
{
if(frm[i].type == 'file')
{
if(frm[i].value == "")
{
alert("Please don not leave any fields blank");
return false;
}

}
}
document.forms[0].submit();
}


and change ur button to
<button onClick="dothis()">Submit</button>
0
 
princehyderabadAuthor Commented:
well CLFlava, if JS is disabled, 1st thing "ADD More Filed" will not run as it is a JS - which is good bcoz user has one file to upload.

Ok Archarjan thx for ur time.
But can we give me some other idea instead of alert ? bcoz user may click 5 times and give only 4 and leave the 5th black. And I dont hv option on form to remove input filed. May be I should give one. Any idea how to modify my above JS and add this, if this is the good solution.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
cLFlaVACommented:
try this...

function dothis() {
    var frm = document.forms['formName'];
    var els = frm.elements;
    for (var i = 0; i < els.length; i++) {
        if (els[i].type == 'file' && els[i].value == '') frm.removeChild( els[i] );
    }

    frm.submit();
}
0
 
archrajanCommented:
please check my solution here
http://www.archanapatchirajan.com/remove.html

u can modify the script if u want to check if the user leaves any field blank
0
 
princehyderabadAuthor Commented:
Exactly I need what archrajan have on URL. GREAT !!!!!!!!!!

But can you also plz let me know what modification do I need to do in order to add ur dothis() JS

<button onClick="dothis()">Upload</button>

IE working fine, but Mozialla even if empty filed it showing alert which is good, once I click OK on alert it is executing the servlet, I dont want this unless user removes filed or fills it.
0
 
archrajanCommented:
check this:

<html>
<head>
<script>


function dothis()
{
var frm = document.getElementsByTagName('input')
for(i=0; i <frm.length;i++)
{
if(frm[i].type == 'file')
{
if(trim(frm[i].value) == "")
{
alert("Please don not leave any fields blank");
return false;
}

}
}
document.form.submit();
}
function trim(str) {
 return str.replace( /^\s*/, '').replace( /\s*$/, '' );
}
function AddRowsToTable() {
 var tbl = document.getElementById('tblSample');
 var lastRow = tbl.rows.length;
 var iteration = lastRow;    
 var row = tbl.insertRow(lastRow);
 
 var cellRight = row.insertCell(0);
 var el = document.createElement('input');
 el.setAttribute('type', 'FILE');
 el.setAttribute('name', 'FILE' + iteration);

 el.setAttribute('size', '40');
 cellRight.setAttribute('id',iteration)
 cellRight.appendChild(el);
// var aa = document.createElement("<a href='#' onClick='RemoveRowFromTable();return false;'>Remove Last</a>'");
 var aa = document.createElement("a");
 aa.setAttribute('href', '#');
 var clickName = new Function("DeleteRow(this)");
 aa.onclick = clickName;
 aa.innerHTML = "Remove";
 cellRight.appendChild(aa);
}
function DeleteRow(x)
{
     while (x.tagName.toLowerCase() !='tr')
     {
          if(x.parentElement)
             x=x.parentElement;
        else if(x.parentNode)
             x=x.parentNode;
        else
             return;
     }
     var rowNum=x.rowIndex;
     while (x.tagName.toLowerCase() !='table')
     {
          if(x.parentElement)
             x=x.parentElement;
        else if(x.parentNode)
             x=x.parentNode;
        else
             return;
     }
     x.deleteRow(rowNum);  
}

function RemoveRowFromTable(rowid) {
//alert("sadfs");
 var tbl = document.getElementById(iteration);
 //var lastRow = tbl.rows.length;
 //if (lastRow > 1)
 tbl.deleteRow(rowid);
}
</script>
</head>
<body>
<form name="form" id="form" action="" method="post" >
<table border="0" cellspacing="2" cellpadding="2" id="tblSample">
 <tr id="row">
  <td width="1" colspan="2"><input type="file" size="40" name="FILE1"></td>
</tr>
</table>
<table border="0" cellspacing="2" cellpadding="2">
 <tr>

  <td><a href="#" onClick="AddRowsToTable();return false;">Add File</a></td>
   
  <td><INPUT TYPE="button" name="sub" VALUE=" Upload Files " onclick = "dothis();"></td>
 </tr>
</table>
</form>
</body>
</html>
0
 
princehyderabadAuthor Commented:
Yes it worked !!

but what was that minor change you did here ???
0
 
archrajanCommented:
yeah just inserted the function dothis there
and removed the validate function from that link
0
 
princehyderabadAuthor Commented:
Oo, I too inserted the dothis() b4 asking you, but didnt removed validate funcation. I got it now !!

Thanks a Lot !!
0
 
princehyderabadAuthor Commented:
Need help on browse stuff:

MY code runs good on IE, but on NE or Mozilla when I press 'Add File' your JS is been called and input=file field is display but the "Remove" button or link is on next line.
Cant I have it on same line ?

Current OUTPUT:
________
[_______]  [Browse]
 [Remove]

I want it to be like this:
________
[_______]  [Browse] [Remove]
0
 
archrajanCommented:
I see it on the same line only!

I tested in IE AND FIREFOX
0
 
princehyderabadAuthor Commented:
Actually I replaced your code:
var aa = document.createElement("a");
 aa.setAttribute('href', '#');

WITH

 var aa = document.createElement("input");
 aa.setAttribute('type', 'button');
 //aa.setAttribute('style', 'border-style:solid; border-width:1px; color: #000000; background-color: #FF9900');
 aa.setAttribute('value', 'Remove');

Its liked of odd to have {browse} button and a href. So I thought to make your a href a button.
0
 
princehyderabadAuthor Commented:
Archrajan, any idea how to add the <textarea>. Now suitation has arise where I hv to add <input> type and <textarea> both. Plz guide me.
0
 
archrajanCommented:
sure
0
 
princehyderabadAuthor Commented:
please show me. HOw to add <textarea> in your JS. Your code show how to add file1, file2..... I need to add description for each file too.
Idea is to have:

File1[...............]
Description2[.......................]
File2[...............]
Description3[.......................]
......
...
...

Thanks for your time
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now