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

x
?
Solved

Need 2 javascript functions integrated.

Posted on 2007-07-20
21
Medium Priority
?
239 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!

0
Comment
Question by:electricd7
  • 9
  • 7
  • 4
  • +1
21 Comments
 
LVL 11

Accepted Solution

by:
BraveBrain earned 1000 total points
ID: 19531327
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"

0
 
LVL 15

Expert Comment

by:dbritt
ID: 19531347
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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19531394
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) {
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:electricd7
ID: 19531435
That gives me an error of "Object doesn't support this method or property."
0
 

Author Comment

by:electricd7
ID: 19531444
Line 99 Char 5:
while (file.indexOf("\\") != -1)

That is where the error points to.
0
 

Author Comment

by:electricd7
ID: 19531464
Sorry my responses were for the first reply, i didnt see the others before i replied
0
 

Author Comment

by:electricd7
ID: 19531487
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?
0
 
LVL 11

Expert Comment

by:BraveBrain
ID: 19531555
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;
}
0
 

Author Comment

by:electricd7
ID: 19531593
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);">

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19531599
<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>
0
 
LVL 11

Expert Comment

by:BraveBrain
ID: 19531626
(LimitAttach(frm.elements['formfieldname'].value)
should be
(LimitAttach(frm.elements['formfieldname'].value))
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19531645
Mine was tested in FF and IE and I fiexed the extension script too
0
 

Author Comment

by:electricd7
ID: 19531649
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>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19531670
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
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 1000 total points
ID: 19531691
<!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>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19531722
Gotta go. Hope it works for you
0
 

Author Comment

by:electricd7
ID: 19531739
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?
0
 

Author Comment

by:electricd7
ID: 19531818
I split the points since mplungjan built the solution based off of BraveBrain original idea.  Thanks, working good now.
0
 
LVL 11

Expert Comment

by:BraveBrain
ID: 19531863
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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19537524
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.
0
 

Author Comment

by:electricd7
ID: 19546944
Ok..sorry I misunderstood your responses then.  Thanks for the help anyway.
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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question