We help IT Professionals succeed at work.

Need 2 javascript functions integrated.

electricd7
electricd7 asked
on
Medium Priority
281 Views
Last Modified: 2008-02-01
I have 2 Javascript functions that I want to perform when a form is submitted.  The first is a check to see if a valid extension exists on a file input field.  If that comes back good, I want the second to be excecuted.  I would like to keep the 2nd function as the main OnSubmit field in the FORM.  Here are the functions

Function 1 (check extension of field.)
<script language="JavaScript">
      //Function to check for valid file extension
    extArray = new Array(".jpg", ".png", ".bmp", ".gif", ".wmv");
    function LimitAttach(form, file) {
    allowSubmit = false;
    if (!file) return;
    while (file.indexOf("\\") != -1)
    file = file.slice(file.indexOf("\\") + 1);
    ext = file.slice(file.indexOf(".")).toLowerCase();
    for (var i = 0; i < extArray.length; i++) {
    if (extArray[i] == ext) { allowSubmit = true; break; }
    }
    if (allowSubmit) return true;
    else
    alert("Please only upload files that end in types:  "
    + (extArray.join("  ")) + "\nPlease select a new "
    + "file to upload and submit again.");
    return false;
    }
    //  End -->
</script>

And if that one comes back ok, I want it to procede with Function 2:
function ProgressBar(form){
 
 //ASP script handling progress window
 var ProgressScript
 ProgressScript = 'progress-smooth.asp'
 

 //Progress window parameters
 var pp = 'toolbar=no,location=no,directories=no,status=no,menubar=no'
 pp+=',scrollbars=no,resizable=no,width=353,height=200';
 
 //1. Get unique UploadID
 var UploadID
 UploadID = Math.round(Math.random() * 0x7FFFFFF0)
 
 //2. Add upload ID to form action URL
 var action = form.action;
 if ('' == action) action = ''+document.location;
 action = AddToQuery(action, 'UploadID', UploadID);
 form.action = action
 //alert(form.action)

 //3. Open progress window with the same UploadID
 var ProgressURL
 ProgressURL = ProgressScript + '?UploadID=' + UploadID

 var v = window.open(ProgressURL,'_blank',pp)
 
 return true;
};


I want my <FORM> tag to look like this:
<form name="file_upload" method="POST" ENCTYPE="multipart/form-data" OnSubmit="return ProgressBar(this);">

So basically just roll the IF/THEN function 1 into function 2.  Pretty simple, huh!

Comment
Watch Question

CNC programmer
Commented:
function checkBoth(frm,field) {
  var mimeOk = LimitAttach(frm,field);
  var progrBar = ProgressBar(field);
  return (mimeOk && progrBar);
}

<form name="file_upload" method="POST" ENCTYPE="multipart/form-data" OnSubmit="return checkBoth(this.form,this);">

To only accept certain mimetypes you can also add the ACCEPT attribute in your file tag:
 ACCEPT="image/jpeg,image/png,image/bmp,image/gif,video/x-ms-wmv"

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Commented:
That still calls both of them. I'd modify your solution like this:

function checkBoth(frm,field) {
  return (LimitAttach(frm,field) && ProgressBar(field));
}


So that it breaks out early if LimitAttach returns false.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
and
OnSubmit="return checkBoth(this.form,this);">

is not correct

onSubmit="return checkBoth(this);">

where you have


function checkBoth(frm) {
  return (LimitAttach(frm.fileField.value) && ProgressBar(frm));
}

and

function LimitAttach(file) {

Author

Commented:
That gives me an error of "Object doesn't support this method or property."

Author

Commented:
Line 99 Char 5:
while (file.indexOf("\\") != -1)

That is where the error points to.

Author

Commented:
Sorry my responses were for the first reply, i didnt see the others before i replied

Author

Commented:
Yea its not working either if I change to dbritt's suggestion.  Can somone give me another idea possibly.  Seems like it should be simple?
BraveBrainCNC programmer

Commented:
Ooops. I'm still on my first cup of coffee ^^
Thanks for pointing out my bads, dbritt and mplungjan
I was for some strange reason thinking the function was called from the file field...

If there's only one filefield you can do this. This will only call ProgressBar() if LimitAttach() returns true.
function checkBoth(frm) {
  var retVal = (LimitAttach(frm.elements['formfieldname'].value) ? ProgressBar(frm) : false;
  return retVal;
}

Author

Commented:
Still not working...here is what i have:

<SCRIPT>
function checkBoth(frm) {
  var retVal = (LimitAttach(frm.elements['formfieldname'].value) ? ProgressBar(frm) : false;
  return retVal;
}

//Open window with progress bar.
//pair upload window and progress window (using UploadID).
function ProgressBar(form){

 //check file sizes.
 
 //ASP script handling progress window
 var ProgressScript
 ProgressScript = 'progress-smooth.asp'
 

 //Progress window parameters
 var pp = 'toolbar=no,location=no,directories=no,status=no,menubar=no'
 pp+=',scrollbars=no,resizable=no,width=353,height=200';
 
 //1. Get unique UploadID
 var UploadID
 UploadID = Math.round(Math.random() * 0x7FFFFFF0)
 
 //2. Add upload ID to form action URL
 var action = form.action;
 if ('' == action) action = ''+document.location;
 action = AddToQuery(action, 'UploadID', UploadID);
 form.action = action
 //alert(form.action)

 //3. Open progress window with the same UploadID
 var ProgressURL
 ProgressURL = ProgressScript + '?UploadID=' + UploadID

 var v = window.open(ProgressURL,'_blank',pp)
 
 return true;
};

//Adds value and its name to querystring
function AddToQuery(q, valname, val){
 if (q.indexOf('?')<0) {
   q += '?'
 } else {
 var pv = q.indexOf(valname+'=');
 if (pv >= 0){
  var amp = q.indexOf('&', pv);
  if (amp<0) {
   q = q.substr(0, pv)
  } else {
   q = q.substr(0, pv) + q.substr(amp+1) + '&'
  }
 } else {
  if (q.substr(q.length-1)!='?') q += '&'
 };
 };
 q += valname + '=' + val
 return q
};

//Function to check for valid file extension
  extArray = new Array(".jpg", ".png", ".bmp", ".gif", ".wmv");
  function LimitAttach(form, file) {
   allowSubmit = false;
   if (!file) return;
    while (file.indexOf("\\") != -1)
    file = file.slice(file.indexOf("\\") + 1);
    ext = file.slice(file.indexOf(".")).toLowerCase();
    for (var i = 0; i < extArray.length; i++) {
    if (extArray[i] == ext) { allowSubmit = true; break; }
    }
   if (allowSubmit) return true;
   else
    alert("Please only upload files that end in types:  "
    + (extArray.join("  ")) + "\nPlease select a new "
    + "file to upload and submit again.");
   return false;
}

</script>

In the form I have:

 onSubmit="return checkBoth(this);">

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
<script language="JavaScript">
//Function to check for valid file extension
var extArray = new Array(".jpg", ".png", ".bmp", ".gif", ".wmv");
function LimitAttach(file) {

    var fileName = file.value
    if (!fileName) return false;
    ext = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
    for (var i = 0; i < extArray.length; i++) {
       if (extArray[i] == ext) return true
    }
    alert("Please only upload files that end in types:  "
    + (extArray.join("  ")) + "\nPlease select a new "
    + "file to upload and submit again.");
    file.focus();
    return false;
}

//Adds value and its name to querystring
function AddToQuery(q, valname, val){
 if (q.indexOf('?')<0) {
   q += '?'
 } else {
 var pv = q.indexOf(valname+'=');
 if (pv >= 0){
  var amp = q.indexOf('&', pv);
  if (amp<0) {
   q = q.substr(0, pv)
  } else {
   q = q.substr(0, pv) + q.substr(amp+1) + '&'
  }
 } else {
  if (q.substr(q.length-1)!='?') q += '&'
 };
 };
 q += valname + '=' + val
 return q
};

function ProgressBar(form){
 
 //ASP script handling progress window
 var ProgressScript
 ProgressScript = 'progress-smooth.asp'
 

 //Progress window parameters
 var pp = 'toolbar=no,location=no,directories=no,status=no,menubar=no'
 pp+=',scrollbars=no,resizable=no,width=353,height=200';
 
 //1. Get unique UploadID
 var UploadID
 UploadID = Math.round(Math.random() * 0x7FFFFFF0)
 
 //2. Add upload ID to form action URL
 var action = form.action;
 if ('' == action) action = ''+document.location;
 action = AddToQuery(action, 'UploadID', UploadID);
 form.action = action
 //alert(form.action)

 //3. Open progress window with the same UploadID
 var ProgressURL
 ProgressURL = ProgressScript + '?UploadID=' + UploadID

 var v = window.open(ProgressURL,'_blank',pp)
 
 return true;
}

function checkBoth(frm) {
  return LimitAttach(frm.fileField) && ProgressBar(frm);
}
</script>

<form name="file_upload" method="POST" ENCTYPE="multipart/form-data" OnSubmit="return checkBoth(this);">
<input type="file" name="fileField">
<input type="submit">
</form>
BraveBrainCNC programmer

Commented:
(LimitAttach(frm.elements['formfieldname'].value)
should be
(LimitAttach(frm.elements['formfieldname'].value))
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Mine was tested in FF and IE and I fiexed the extension script too

Author

Commented:
Still acting up.  Here is my exact code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
 <TITLE>WTHI File Upload Form</TITLE>
 <STYLE TYPE="text/css"><!--TD      {font-family:Arial,Helvetica,sans-serif }TH      {font-family:Arial,Helvetica,sans-serif }TABLE      {font-size:10pt;font-family:Arial,Helvetica,sans-serif }--></STYLE>
 <meta name="robots" content="noindex,nofollow">
</HEAD>
<BODY BGColor=white>


<form name="file_upload" method="POST" ENCTYPE="multipart/form-data" OnSubmit="return checkBoth(this);">

<table width="450" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td colspan="2"><font face="Arial" size=2>Please use the form below to upload your video to News10.  Videos must be in Windows Media Format (WMV) and be less than 20MB in size to be accepted.  After your video is uploaded, News10 will be notified.<br><br></td>
  </tr>
  <tr>
    <td><span class="style1">Choose Video:</span></td>
    <td><input type="file" name="Video"></td>
  </tr>
  <tr>
    <td class="style1">Short Description:</td>
    <td><input Name=Description Size=40></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input Name=SubmitButton Value="Upload File" Type=Submit Style="background-color:#396cd9;color:white;cursor:hand;font-weight:bold"></td>
  </tr>
</table>
</form>

<script language="JavaScript">
//Function to check for valid file extension
var extArray = new Array(".jpg", ".png", ".bmp", ".gif", ".wmv");
function LimitAttach(file) {

    var fileName = file.value
    if (!fileName) return false;
    ext = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
    for (var i = 0; i < extArray.length; i++) {
       if (extArray[i] == ext) return true
    }
    alert("Please only upload files that end in types:  "
    + (extArray.join("  ")) + "\nPlease select a new "
    + "file to upload and submit again.");
    file.focus();
    return false;
}

function AddToQuery() { alert('not implemented') }

function ProgressBar(form){
 
 //ASP script handling progress window
 var ProgressScript
 ProgressScript = 'progress-smooth.asp'
 

 //Progress window parameters
 var pp = 'toolbar=no,location=no,directories=no,status=no,menubar=no'
 pp+=',scrollbars=no,resizable=no,width=353,height=200';
 
 //1. Get unique UploadID
 var UploadID
 UploadID = Math.round(Math.random() * 0x7FFFFFF0)
 
 //2. Add upload ID to form action URL
 var action = form.action;
 if ('' == action) action = ''+document.location;
 action = AddToQuery(action, 'UploadID', UploadID);
 form.action = action
 //alert(form.action)

 //3. Open progress window with the same UploadID
 var ProgressURL
 ProgressURL = ProgressScript + '?UploadID=' + UploadID

 var v = window.open(ProgressURL,'_blank',pp)
 
 return true;
}

function checkBoth(frm) {
  return LimitAttach(frm.fileField) && ProgressBar(frm);
}
</script>

</CENTER>
</Div>
</BODY></HTML>
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
change

  return LimitAttach(frm.fileField) && ProgressBar(frm);
to

  return LimitAttach(frm.Video) && ProgressBar(frm);

and put your addtoquery back

and think how much time we could have saved if we had the complete html to begin with
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
 <TITLE>WTHI File Upload Form</TITLE>
 <STYLE TYPE="text/css"><!--TD      {font-family:Arial,Helvetica,sans-serif }TH      {font-family:Arial,Helvetica,sans-serif }TABLE      {font-size:10pt;font-family:Arial,Helvetica,sans-serif }--></STYLE>
 <meta name="robots" content="noindex,nofollow">
<script language="JavaScript">
//Function to check for valid file extension
var extArray = new Array(".jpg", ".png", ".bmp", ".gif", ".wmv");
function LimitAttach(file) {

    var fileName = file.value
    if (!fileName) return false;
    ext = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
    for (var i = 0; i < extArray.length; i++) {
       if (extArray[i] == ext) return true
    }
    alert("Please only upload files that end in types:  "
    + (extArray.join("  ")) + "\nPlease select a new "
    + "file to upload and submit again.");
    file.focus();
    return false;
}

//Adds value and its name to querystring
function AddToQuery(q, valname, val){
 if (q.indexOf('?')<0) {
   q += '?'
 } else {
 var pv = q.indexOf(valname+'=');
 if (pv >= 0){
  var amp = q.indexOf('&', pv);
  if (amp<0) {
   q = q.substr(0, pv)
  } else {
   q = q.substr(0, pv) + q.substr(amp+1) + '&'
  }
 } else {
  if (q.substr(q.length-1)!='?') q += '&'
 };
 };
 q += valname + '=' + val
 return q
};

function ProgressBar(form){
 
 //ASP script handling progress window
 var ProgressScript
 ProgressScript = 'progress-smooth.asp'
 

 //Progress window parameters
 var pp = 'toolbar=no,location=no,directories=no,status=no,menubar=no'
 pp+=',scrollbars=no,resizable=no,width=353,height=200';
 
 //1. Get unique UploadID
 var UploadID
 UploadID = Math.round(Math.random() * 0x7FFFFFF0)
 
 //2. Add upload ID to form action URL
 var action = form.action;
 if ('' == action) action = ''+document.location;
 action = AddToQuery(action, 'UploadID', UploadID);
 form.action = action
 //alert(form.action)

 //3. Open progress window with the same UploadID
 var ProgressURL
 ProgressURL = ProgressScript + '?UploadID=' + UploadID

 var v = window.open(ProgressURL,'_blank',pp)
 
 return true;
}

function checkBoth(frm) {
  return LimitAttach(frm.Video) && ProgressBar(frm);
}
</script>
</head>
</HEAD>
<BODY BGColor=white>


<form name="file_upload" method="POST" ENCTYPE="multipart/form-data" OnSubmit="return checkBoth(this);">

<table width="450" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td colspan="2"><font face="Arial" size=2>Please use the form below to upload your video to News10.  Videos must be in Windows Media Format (WMV) and be less than 20MB in size to be accepted.  After your video is uploaded, News10 will be notified.<br><br></td>
  </tr>
  <tr>
    <td><span class="style1">Choose Video:</span></td>
    <td><input type="file" name="Video"></td>
  </tr>
  <tr>
    <td class="style1">Short Description:</td>
    <td><input Name=Description Size=40></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input Name=SubmitButton Value="Upload File" Type=Submit Style="background-color:#396cd9;color:white;cursor:hand;font-weight:bold"></td>
  </tr>
</table>
</body>
</html>
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Gotta go. Hope it works for you

Author

Commented:
What do you mean by put your addtoquery back?  We could have saved the time as well if the 2 had just been integrated instead of calling each separatly as well right?

Author

Commented:
I split the points since mplungjan built the solution based off of BraveBrain original idea.  Thanks, working good now.
BraveBrainCNC programmer

Commented:
Glad to help. Thanks for the points.

Note that if you want to make sure that the progressBar function is only called if limitAttach returns true you might want to use my second suggestion, here rewritten to match your field name and without the ) typo.

function checkBoth(frm) {
  var retVal = (LimitAttach(frm.elements['Video'].value)) ? ProgressBar(frm) : false;
  return retVal;
}
When declaring retVal it will call the LimitAttach function and then call ProgressBar if LimitAttach returns true, or set retVal to false if not.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Just to clarify

1. I did not base my suggestion on BraveBrains idea -  it did not first execute one and if that came back ok, execute the second. DBritt had the better solution not to call the second function if the first was false. He however also failed to notice the passing of a roque field.

2. When I tested your snippets, I had to invent a field called fileField and a function called  AddToQuery - if you scroll back you will see that I had a

function AddToQuery() { alert('not implemented') }

because I did not know what it did.

Then when you posted #19531649: Still acting up.  
you had that code with the incorrect field name in it, hence my comment

change

  return LimitAttach(frm.fileField) && ProgressBar(frm);
to

  return LimitAttach(frm.Video) && ProgressBar(frm);

and put your addtoquery back.

3. I also changed the test for extension to be much simpler and easier to understand.

Author

Commented:
Ok..sorry I misunderstood your responses then.  Thanks for the help anyway.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.