Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Alert for description attachment

Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#1: Sep 29 '08
Hey Everyone,

well was hoping if someone could explain to me how to add an alert for the description fields of this multiple attachments script. The problem i think i am having is i don't know how to make it check multiple fields to make sure each field has been checked for a description before submitting. Here is what i have

on my form page
Expand|Select|Wrap|Line Numbers
  1.  <input type="file" name="attachment1" id="attachments" value="1" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" 
  6.    onclick="javascript:addFileInput();" >
  7.           </div>
  8.           <input type="hidden" name="uploads" id="uploads" value="1">
where it goes after i click submit
Expand|Select|Wrap|Line Numbers
  1. <!---Inserts attachments into attachments.--->
  2.       <cfif structKeyExists(FORM, "uploads")>
  3.            <cfset currentDirectory = GetDirectoryFromPath(GetTemplatePath()) & "uploaded">
  4.            <cfparam name="FORM.uploads" default="">
  5.            <cfloop list="#form.uploads#" index="counter">
  6.             <cfset currentDescription = form["description" & counter]>
  7.       <!---      verify the form field exists --->
  8.            <cfif structKeyExists(FORM, "attachment"& counter)>
  9.            <!---      try and upload it ...--->
  10.                 <cftry>
  11.            <cfif Len(FORM["attachment#counter#"])>
  12.                 <cffile action="upload" fileField="form.attachment#counter#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\" nameconflict="MAKEUNIQUE">
  13.                 <cfset filename = cffile.ClientFileName & "_" & form.id & "_" & counter & "." & cffile.ClientFileExt>
  14.      <!---           IF RUN INTO PROBLEMS WITH FILES NOT GOING INTO TABLE MAKE SURE EVERYTHING BETWEEN SOURCE="" IS ALL ON ONE LINE--->
  15.      <CFFILE ACTION="RENAME" SOURCE="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#CFFILE.ServerFile#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\  form\attachments\#filename#">
  16.                     <cfquery name="attachment" datasource="CustomerSupport">
  17.           exec usp_CS_Insertattachments
  18.       '#Form.ID#','#evaluate(serialnum)#','#currentDescription#','#filename#','#Form.fk_addedBy#'
  19.       </cfquery>
  20.               </cfif>
  21.                 <cfcatch><!--- do something here, e.g. display error message.. --->
  22.            </cfcatch>
  23.            </cftry>
  24.            </cfif>
  25.            </cfloop>
  26.       </cfif>
  27.  
i tried this but clearly i am missing a lot

Expand|Select|Wrap|Line Numbers
  1.  if(description1.value== "")
  2.  {
  3.   alert ("Please fill in the description for your attachment");
  4. return false;
  5.   }
Thank you in advance,
Rach
Page 1 of 2 1 2 >

acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Sep 29 '08

re: Alert for description attachment

Put your validation code in a function (let's call it validate()) and call it onsubmit:
Expand|Select|Wrap|Line Numbers
  1. <form ... onsubmit="return validate();">
You'll also need to make sure that you access the form elements properly.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#3: Sep 29 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

Put your validation code in a function (let's call it validate()) and call it onsubmit:

Expand|Select|Wrap|Line Numbers
  1. <form ... onsubmit="return validate();">
You'll also need to make sure that you access the form elements properly.

Hey Acoder,

Ok i got the part in the form where it does the return validate(). But i am unsure about the access the form elements properly. this is what i been trying

Expand|Select|Wrap|Line Numbers
  1.  if(description.value== "")
  2.  {
  3.   alert ("Please fill in the description for your attachment");
  4. return false;
  5.   }
an i don't know if i should be getting the name of the id (for some reason can not remember which one i am suppose to get)

Expand|Select|Wrap|Line Numbers
  1. <input type="text" name="description1" id="description" value="" /> 
Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Sep 29 '08

re: Alert for description attachment

It should be the ID:
Expand|Select|Wrap|Line Numbers
  1. description = document.getElementById("description");
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#5: Sep 29 '08

re: Alert for description attachment

Hey Acoder,

That worked for one description, how would i make it check for multiple descriptions? here is what i have

Expand|Select|Wrap|Line Numbers
  1. var description = document.getElementById("description")
  2.   if(description.value== "")
  3.  {
  4.   alert ("Please fill in the description for your attachment");
  5. return false;
  6.   }
  7.  
Thank you
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#6: Sep 29 '08

re: Alert for description attachment

If you have been consistent in the naming of the description fields (which it seems you have been), then use a for loop and use the index to get the elements, e.g.
Expand|Select|Wrap|Line Numbers
  1. for (i = 0; i < upload_no; i++) {
  2.    description = document.getElementById("description"+i);
where upload_no is a variable containing the number of attachments.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#7: Sep 29 '08

re: Alert for description attachment

Hey Acoder,

here is what i have,but its not working right

Expand|Select|Wrap|Line Numbers
  1.  
  2. var description = document.getElementById("description")
  3. for (i = 0; i < uploads; i++) {
  4. description = document.getElementById("description"+i);
  5.  {
  6.   alert ("Please fill in the description for your attachment");
  7. return false;
  8.   }
i think i have the part where it says uploads screwed up.in my form i use this line to count

Expand|Select|Wrap|Line Numbers
  1. <input type="hidden" name="uploads" id="uploads" value="1">
an thought that replacing upload_no with uploads would be right since its suppose to keep the count but its not working right any ideas?

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#8: Sep 29 '08

re: Alert for description attachment

You again need to use the ID to access the uploads. You'll also need to parse it using parseInt to convert to an integer.

Secondly, you can remove the "var description " line (line 2) and add back the "if (description.value == "") that you had earlier.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#9: Sep 30 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

You again need to use the ID to access the uploads. You'll also need to parse it using parseInt to convert to an integer.

Secondly, you can remove the "var description " line (line 2) and add back the "if (description.value == "") that you had earlier.

Hey Acoder,

Well i got the id for the hidden field, the id is also uploads. But am i suppose to be getting the id for the hidden field or for the description field? i redid it with the description field id here is what i have,

Expand|Select|Wrap|Line Numbers
  1. if(description.value== "")
  2. {
  3. for (i = 0; i < description; i++) {
  4. description = document.getElementById("description"+i);
  5.  {
  6.  alert ("Please fill in the description for your attachment");
  7. return false;
  8.  }}
an i am not sure how to do parse because never done parse before.

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#10: Sep 30 '08

re: Alert for description attachment

I meant for the uploads variable, so you would have something like:
Expand|Select|Wrap|Line Numbers
  1. var uploads = parseInt(document.getElementById("uploads"));
  2. for (i = 0; i < uploads; i++) {
  3. description = document.getElementById("description"+i);
  4. if(description.value== "")
  5. {
  6.  alert ("Please fill in the description for your attachment");
  7. return false;
  8.  }
  9. }
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#11: Oct 1 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

I meant for the uploads variable, so you would have something like:

Expand|Select|Wrap|Line Numbers
  1. var uploads = parseInt(document.getElementById("uploads"));
  2. for (i = 0; i < uploads; i++) {
  3. description = document.getElementById("description"+i);
  4. if(description.value== "")
  5. {
  6.  alert ("Please fill in the description for your attachment");
  7. return false;
  8.  }
  9. }


Hey Acoder,

I copied what you have but its still letting me send with or without an attachment selected. here is the html again in case you need to see it, i might of just told you the wrong thing needed but not sure what i would use

Expand|Select|Wrap|Line Numbers
  1.  <input type="file" name="attachment1" id="attachments" value="1" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" 
  6.    onclick="javascript:addFileInput();" >
  7.           </div>
  8.           <input type="hidden" name="uploads" id="uploads" value="1">
Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#12: Oct 1 '08

re: Alert for description attachment

The ID of the first text box should be "description1", not just "description", for the code to work.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#13: Oct 1 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

The ID of the first text box should be "description1", not just "description", for the code to work.

Hey Acoder,

I changed it to description 1 but i am still getting the same results.

here is what i have on the form
Expand|Select|Wrap|Line Numbers
  1.  <input type="file" name="attachment1" id="attachments" value="1" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description1" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" onclick="javascript:addFileInput();" >
  6.           </div>
  7.           <input type="hidden" name="uploads" id="uploads" value="1">
and here is what i have for the validation
Expand|Select|Wrap|Line Numbers
  1. var uploads = parseInt(document.getElementById("uploads"));
  2. for (i = 0; i < uploads; i++) {
  3. description = document.getElementById("description"+i);
  4. if(description.value== "")
  5. {
  6. alert ("Please fill in the description for your attachment");
  7. return false;
  8. }
  9. }
Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#14: Oct 1 '08

re: Alert for description attachment

I notice two problems:
Expand|Select|Wrap|Line Numbers
  1. var uploads = parseInt(document.getElementById("uploads"));
should be
Expand|Select|Wrap|Line Numbers
  1. var uploads = parseInt(document.getElementById("uploads").value);
the value, not the element is what needs to be parsed.

Secondly, you need to start the loop from 1, not 0.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#15: Oct 1 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

I notice two problems:

Expand|Select|Wrap|Line Numbers
  1. var uploads = parseInt(document.getElementById("uploads"));
should be
Expand|Select|Wrap|Line Numbers
  1. var uploads = parseInt(document.getElementById("uploads").value);
the value, not the element is what needs to be parsed.

Secondly, you need to start the loop from 1, not 0.

Hey Acoder,

i am still getting errors

here is what i have
Expand|Select|Wrap|Line Numbers
  1. var uploads = parseInt(document.getElementById("uploads").value);
  2. for (i = 1; i < uploads; i++) {
  3. description = document.getElementById("description"+i);
  4. if(description.value== "")
  5. {
  6. alert ("Please fill in the description for your attachment");
  7. return false;
  8. }
  9. }

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#16: Oct 1 '08

re: Alert for description attachment

The loop should now loop till uploads, not one before, i.e.
Expand|Select|Wrap|Line Numbers
  1. for (i = 1; i <= uploads; i++) {
Have you got 'return true' at the end of the validate function?
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#17: Oct 1 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

The loop should now loop till uploads, not one before, i.e.

Expand|Select|Wrap|Line Numbers
  1. for (i = 1; i <= uploads; i++) {
Have you got 'return true' at the end of the validate function?

Hey Acoder,

Yes i do have a return true at the end. I don't know if this would help but this is what i have on the entire validate page.

Expand|Select|Wrap|Line Numbers
  1. function validate_form()
  2. {
  3. //VALIDATES TYPE OF HARDWARE FAILURE
  4. var hardware = document.getElementById('hardwarefailure')
  5. var tag = document.getElementsByTagName('select')
  6.  
  7. for(var i=0; i<=tag.length-1; i++){
  8. //check each tag (tag[i]) to see if its hardware failure
  9.  //if it is, then see if its value is nothing
  10.  //Rachels Note (had to use name== instead of id because id is unique and the select each item does not need to be unique)
  11. if(tag[i].name=="hardwarefailure" && tag[i].value =='')
  12. {
  13.     alert ('Please Select Type of Hardware Failure');
  14.     return false;
  15. }
  16. }
  17. //VALIDATES DEPT/VENDOR RESPONSIBILTYS
  18. var dept = document.getElementById('deptvendor')
  19. var tag2 = document.getElementsByTagName('select')
  20.  
  21. for(var i=0; i<=tag2.length-1; i++){
  22. //check each tag (tag[i]) to see if its hardware failure
  23.  //if it is, then see if its value is nothing
  24. if(tag2[i].name=="deptvendor" && tag2[i].value =='')
  25. {
  26.     alert ('Please Select Dept/Vendor Responsibility');
  27.     return false;
  28. }
  29. }
  30. //VALIDATES HAVE ALL PARTS BEEN RETURNED
  31. var parts = document.getElementById('partsreturn')
  32. var tag3 = document.getElementsByTagName('select')
  33.  
  34. for(var i=0; i<=tag3.length-1; i++){
  35. //check each tag (tag[i]) to see if its hardware failure
  36.  //if it is, then see if its value is nothing
  37. if(tag3[i].name=="partsreturn" && tag3[i].value =='')
  38. {
  39.     alert ('Please Select Have all parts been returned');
  40.     return false;
  41. }
  42. }
  43.  
  44. //if(softhardware.value == ''){
  45. //softhardware.value = 'NOW IT IS THIS' ;
  46. //return false;
  47. //}
  48.  
  49. var isChecked = document.userForm.assignees.checked;
  50. var selected = document.getElementById('toBox')
  51. var isSelected = false;
  52.     for(var i=0; i<=selected.options.length-1; i++){
  53.     if(selected.options[i].selected ){
  54.        isSelected = true;
  55.        break;
  56.           }   
  57.       }
  58.       // now you have isChecked and isSelected set, combine the two
  59.       if (!isSelected && isChecked){
  60.           alert ("Please Select a assignee(s)");
  61.           return false;
  62.       }
  63.       if (!isChecked && isSelected){
  64.           alert ("Checkbox 'assignees' must be selected in order to send email to assignees");
  65.           return false;
  66.       }
  67.  
  68.  
  69.  
  70. var uploads = parseInt(document.getElementById("uploads").value);
  71. for (i = 1; i < uploads; i++) {
  72. description = document.getElementById("description"+i);
  73. if(description.value== "")
  74. {
  75. alert ("Please fill in the description for your attachment");
  76. return false;
  77. }
  78. }
  79.  
  80.  
  81.  
  82. return true;
  83. }
an i am confused on what you mean by the loop, does it need to be changed?

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#18: Oct 1 '08

re: Alert for description attachment

You just need to add an equals sign on line 71 as I've done in my previous post.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#19: Oct 1 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

You just need to add an equals sign on line 71 as I've done in my previous post.

Hey Acoder,

That worked for one description but when i tested out 2 fields and had the first field with a description and second one with no descriptoin it still submitted it. anyway to make it check every description field added?

Expand|Select|Wrap|Line Numbers
  1. var uploads = parseInt(document.getElementById("uploads").value);
  2. for (i = 1; i <= uploads; i++) {
  3. description = document.getElementById("description"+i);
  4. if(description.value== "")
  5. {
  6. alert ("Please fill in the description for your attachment");
  7. return false;
  8. }
  9. }
Thank you :),
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#20: Oct 1 '08

re: Alert for description attachment

Is the second description ID "description2"?
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#21: Oct 1 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

Is the second description ID "description2"?

Hey Acoder,

As far as i know it should be description2.But when i view the source i can not see that. But here is what i happen when i go an submit the attachment, i don't know if this would help but maybe it could explain what its doing.

Expand|Select|Wrap|Line Numbers
  1.   <cfif structKeyExists(FORM, "uploads")>
  2.            <cfset currentDirectory = GetDirectoryFromPath(GetTemplatePath()) & "uploaded">
  3.            <cfparam name="FORM.uploads" default="">
  4.            <cfloop list="#form.uploads#" index="counter">
  5.             <cfset currentDescription = form["description" & counter]>
  6.       <!---      verify the form field exists --->
  7.            <cfif structKeyExists(FORM, "attachment"& counter)>
  8.            <!---      try and upload it ...--->
  9.                 <cftry>
  10.            <cfif Len(FORM["attachment#counter#"])>
  11.                 <cffile action="upload" fileField="form.attachment#counter#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\" nameconflict="MAKEUNIQUE">
  12.                 <cfset filename = cffile.ClientFileName & "_" & form.id & "_" & counter & "." & cffile.ClientFileExt>
  13.                   <!---           IF RUN INTO PROBLEMS WITH FILES NOT GOING INTO TABLE MAKE SURE EVERYTHING BETWEEN SOURCE="" IS ALL ON ONE LINE--->
  14.      <CFFILE ACTION="RENAME" SOURCE="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#CFFILE.ServerFile#" 
  15.                 destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#filename#">
  16.                     <cfquery name="attachment" datasource="CustomerSupport">
  17.           exec usp_CS_Insertattachments
  18.       '#Form.ID#','#evaluate(serialnum)#','#currentDescription#','#filename#','#Form.fk_addedBy#'
  19.       </cfquery>
  20.               </cfif>
  21.                 <cfcatch><!--- do something here, e.g. display error message.. --->
  22.            </cfcatch>
  23.            </cftry>
  24.            </cfif>
  25.            </cfloop>
  26.       </cfif>
Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#22: Oct 1 '08

re: Alert for description attachment

If you dynamically generate subsequent fields, it won't appear in the source.

What code are you using to generate more fields?
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,653
#23: Oct 2 '08

re: Alert for description attachment

the web developer plugin (FF) has an option to show the complete (static and dynamic) source code of a page.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#24: Oct 2 '08

re: Alert for description attachment

You're absolutely right - I use it myself!

I should've pointed out that both the Web Developer and Firebug add-ons are extremely useful when debugging. With Firebug, you can inspect and modify any element on the page.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#25: Oct 2 '08

re: Alert for description attachment

Hey Dormilich and Acoder,

Will definitely look up firebug. I have heard about it from reading a few posts,but i been staying with the oldest firefox on account of other web development tools i used. But i guess it don't matter now because it made me update anyway lol.

But anyway this is what i am using to do the multiple fields

this is the javascript

Expand|Select|Wrap|Line Numbers
  1. // JavaScript Document
  2. <!--- Allows you to attach multiple files --->
  3. <!---br is a break an left it so i will know later how to do a break--->
  4.    var upload_number = 2;
  5.      function addFileInput()
  6.      {
  7.      var d = document.createElement("div");
  8.      var l = document.createElement("input");
  9.      var file = document.createElement("input");
  10.      var text = document.createElement("input");
  11.      var nbsp = document.createTextNode("\u00a0");
  12.      var space = document.createTextNode("\u00a0");
  13. <!---     var br = document.createElement("br");--->
  14.      var des = document.createTextNode("Description")
  15.      try {
  16.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  17.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  18.    l = document.createElement("<input type='button' onclick='javascript:removeFileInput("+upload_number+");'>");
  19. } catch (e) {
  20.   file = document.createElement("input");
  21.   text = document.createElement("input");
  22. }
  23.      d.setAttribute("id", "f"+upload_number);
  24.      file.setAttribute("type", "file");
  25.      file.setAttribute("name", "attachment"+upload_number);
  26.      text.setAttribute("type", "text");
  27.      text.setAttribute("name", "description"+upload_number);
  28.      l.setAttribute("id", "l"+upload_number);  
  29.      l.setAttribute("type", "button");
  30.      l.setAttribute("onclick", "javascript:removeFileInput("+upload_number+")");
  31.  
  32.      l.type="button";
  33.      l.value="Remove";
  34.      l.onclick="javascript:removeFileInput("+upload_number+")";
  35. <!---     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");--->
  36. <!---     l.appendChild(document.createTextNode("Remove"));--->
  37.      d.setAttribute("id", "f"+upload_number);
  38.      d.appendChild(file);
  39.      d.appendChild(nbsp);
  40.      d.appendChild(des);
  41. <!---     d.appendChild(br);--->
  42.       d.appendChild(space);
  43.      d.appendChild(text);
  44.      d.appendChild(l);
  45.      document.getElementById("moreUploads").appendChild(d);
  46.      document.getElementById("uploads").value += "," + upload_number;
  47.      upload_number++;
  48.      }
  49.  
  50. function removeFileInput(i)
  51. {
  52.     var elm = document.getElementById("f"+i);
  53.     document.getElementById("moreUploads").removeChild(elm);
  54. document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");
  55.  
  56. }
this is the html

Expand|Select|Wrap|Line Numbers
  1.  <input type="file" name="attachment1" id="attachments" value="1" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description1" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" onclick="javascript:addFileInput();" >
  6.           </div>
  7.           <input type="hidden" name="uploads" id="uploads" value="1">

an this is what happens once i upload
Expand|Select|Wrap|Line Numbers
  1. <!---Inserts attachments into attachments.--->
  2.       <cfif structKeyExists(FORM, "uploads")>
  3.            <cfset currentDirectory = GetDirectoryFromPath(GetTemplatePath()) & "uploaded">
  4.            <cfparam name="FORM.uploads" default="">
  5.            <cfloop list="#form.uploads#" index="counter">
  6.             <cfset currentDescription = form["description" & counter]>
  7.       <!---      verify the form field exists --->
  8.            <cfif structKeyExists(FORM, "attachment"& counter)>
  9.            <!---      try and upload it ...--->
  10.                 <cftry>
  11.            <cfif Len(FORM["attachment#counter#"])>
  12.                 <cffile action="upload" fileField="form.attachment#counter#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\" nameconflict="MAKEUNIQUE">
  13.                 <cfset filename = cffile.ClientFileName & "_" & form.id & "_" & counter & "." & cffile.ClientFileExt>
  14.                   <!---           IF RUN INTO PROBLEMS WITH FILES NOT GOING INTO TABLE MAKE SURE EVERYTHING BETWEEN SOURCE="" IS ALL ON ONE LINE--->
  15.      <CFFILE ACTION="RENAME" SOURCE="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#CFFILE.ServerFile#" 
  16.                 destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#filename#">
  17.                     <cfquery name="attachment" datasource="CustomerSupport">
  18.           exec usp_CS_Insertattachments
  19.       '#Form.ID#','#evaluate(serialnum)#','#currentDescription#','#filename#','#Form.fk_addedBy#'
  20.       </cfquery>
  21.               </cfif>
  22.                 <cfcatch><!--- do something here, e.g. display error message.. --->
  23.            </cfcatch>
  24.            </cftry>
  25.            </cfif>
  26.            </cfloop>
  27.       </cfif>
Thank you :),
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#26: Oct 2 '08

re: Alert for description attachment

The reason why it doesn't work is that you don't set the id, so add a line that sets the ID for the description elements.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#27: Oct 2 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

The reason why it doesn't work is that you don't set the id, so add a line that sets the ID for the description elements.

Hey Acoder,

I am confused on where you want me to add this line an does this line need to be this

Expand|Select|Wrap|Line Numbers
  1. document.getElementById(description1)
Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#28: Oct 2 '08

re: Alert for description attachment

On line 27 in the JavaScript code, you've set the description name, but not the ID:
Expand|Select|Wrap|Line Numbers
  1. text.setAttribute("name", "description"+upload_number);
so set the ID too:
Expand|Select|Wrap|Line Numbers
  1. text.setAttribute("id", "description"+upload_number);
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#29: Oct 2 '08

re: Alert for description attachment

Hey Acoder,

It still not acting right. On my html it has the name and id as description1

Expand|Select|Wrap|Line Numbers
  1. <input type="text" name="description1" id="description1" value="" /> 
in the javascript do i need to change the name in the javascript from description to description1?

here is what i have on the javascript

Expand|Select|Wrap|Line Numbers
  1. // JavaScript Document
  2. <!--- Allows you to attach multiple files --->
  3. <!---br is a break an left it so i will know later how to do a break--->
  4.    var upload_number = 2;
  5.      function addFileInput()
  6.      {
  7.      var d = document.createElement("div");
  8.      var l = document.createElement("input");
  9.      var file = document.createElement("input");
  10.      var text = document.createElement("input");
  11.      var nbsp = document.createTextNode("\u00a0");
  12.      var space = document.createTextNode("\u00a0");
  13. <!---     var br = document.createElement("br");--->
  14.      var des = document.createTextNode("Description")
  15.      try {
  16.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  17.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  18.    l = document.createElement("<input type='button' onclick='javascript:removeFileInput("+upload_number+");'>");
  19. } catch (e) {
  20.   file = document.createElement("input");
  21.   text = document.createElement("input");
  22. }
  23.      d.setAttribute("id", "f"+upload_number);
  24.      file.setAttribute("type", "file");
  25.      file.setAttribute("name", "attachment"+upload_number);
  26.      text.setAttribute("type", "text");
  27.      text.setAttribute("name", "description"+upload_number);
  28.      text.setAttribute("id", "description"+upload_number);
  29.      l.setAttribute("id", "l"+upload_number);  
  30.      l.setAttribute("type", "button");
  31.      l.setAttribute("onclick", "javascript:removeFileInput("+upload_number+")");
  32.  
  33.      l.type="button";
  34.      l.value="Remove";
  35.      l.onclick="javascript:removeFileInput("+upload_number+")";
  36. <!---     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");--->
  37. <!---     l.appendChild(document.createTextNode("Remove"));--->
  38.      d.setAttribute("id", "f"+upload_number);
  39.      d.appendChild(file);
  40.      d.appendChild(nbsp);
  41.      d.appendChild(des);
  42. <!---     d.appendChild(br);--->
  43.       d.appendChild(space);
  44.      d.appendChild(text);
  45.      d.appendChild(l);
  46.      document.getElementById("moreUploads").appendChild(d);
  47.      document.getElementById("uploads").value += "," + upload_number;
  48.      upload_number++;
  49.      }
  50.  
  51. function removeFileInput(i)
  52. {
  53.     var elm = document.getElementById("f"+i);
  54.     document.getElementById("moreUploads").removeChild(elm);
  55. document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");
  56.  
  57. }
Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#30: Oct 2 '08

re: Alert for description attachment

Does it not work in any browser?
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#31: Oct 2 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

Does it not work in any browser?

Hey Acoder,

it doesn't work in either browser. It will block the first attachment and description that appears when the page loads, but any attachment and description you add afterwards it will let me submit with no problem.

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#32: Oct 2 '08

re: Alert for description attachment

Of course, this would be a good time to use a good debugging tool, but in the meantime, try adding an alert to check the value:
Expand|Select|Wrap|Line Numbers
  1. for (i = 1; i <= uploads; i++) {
  2.     description = document.getElementById("description"+i);
  3.     alert(";" + description.value + ";");
  4.     if(description.value== "")
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#33: Oct 2 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

Of course, this would be a good time to use a good debugging tool, but in the meantime, try adding an alert to check the value:

Expand|Select|Wrap|Line Numbers
  1. for (i = 1; i <= uploads; i++) {
  2.     description = document.getElementById("description"+i);
  3.     alert(";" + description.value + ";");
  4.     if(description.value== "")

Hey Acoder,

I did download the firebug. An not 100% sure on how to use it. But i have managed to open it up and click on dos and i can see the upload_number (which is show in my javascript) an with only 1 field and one description show it says 2 (although you can only physically see 1) if i click add it makes it 3.I don't know if that helps but i thought i would tell you.

An on the code you just gave me i picked a attachment and put the description test (for the first attachment and description present) i then clicked add and choose a 2nd file to upload an then clicked submit an i got the alert ;test;.

Thank you,
Rach

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#34: Oct 2 '08

re: Alert for description attachment

The upload_number is correct. It's one more than the number so that when you create another set of fields it uses that number and adds one at the end.

Well, with what you've showed, it's obviously going to submit because ;test; means that you input "test" for the description, so it will pass validation. Try with no input.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#35: Oct 2 '08

re: Alert for description attachment

Hey Acoder,

i am a bit confused on what you mean for no input? if i don't put a description for the first description present it will not send, however, if don't put a description for the 2nd it will still send.

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#36: Oct 2 '08

re: Alert for description attachment

Oh right, I see. So you tested with "test" for the first description and "" (blank) for the second description? Is that correct?

Does it show two alerts when you have two descriptions?
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#37: Oct 2 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

Oh right, I see. So you tested with "test" for the first description and "" (blank) for the second description? Is that correct?

Does it show two alerts when you have two descriptions?


Hey Acoder,

Yes that is how i tested it. first description with the word test, 2nd description with nothing.

when i click submit a pop up box appears says ;test;and then submits.

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#38: Oct 2 '08

re: Alert for description attachment

So that means it doesn't show the second alert. Is there an error?

Try the following:
  • Make the same test with two descriptions, one filled and one blank.
  • Now right-click the description text box and click on "Inspect Element".
  • Firebug will pop up with the element highlighted in code.
  • Look at that code and see what it shows (you can right-click to copy)
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#39: Oct 2 '08

re: Alert for description attachment

Hey Acoder,

well i have no clue if i did this right or not. an was not sure if you wanted the html or the dom part. but here is the html part.

Expand|Select|Wrap|Line Numbers
  1. <th class="sectiontitle" colspan="7">Attachments</th>
  2. </tr>
  3. <tr>
  4. <td class="indent"/>
  5. <td>
  6. <input id="attachments" type="file" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" value="1" name="attachment1"/>
  7. Description
  8. <input id="description1" type="text" value="" name="description1"/>
  9. <div id="moreUploads">
  10. <div id="f2">
  11. <input type="file" name="attachment2"/>
  12. Description
  13. <input id="description2" type="text" name="description2"/>
  14. <input id="l2" type="button" onclick="javascript:removeFileInput(2)" value="Remove"/>
  15. </div>
  16. </div>
  17. <div id="moreUploadsLink" style="display: block;">
  18. </div>
  19. <input id="uploads" type="hidden" value="1,2" name="uploads"/>
  20. </td>
  21. </tr>
  22. </tbody>
  23. </table>
  24.  
in the dom it only showed me
prefix
null
namespaceURI
null
nodeValue
null


Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#40: Oct 2 '08

re: Alert for description attachment

It was the HTML part and I know now where the problem lies.

Have a look at the uploads hidden field. Now I assumed that that just contained the number of uploads, but rather it contains the numbers of the attachment fields being uploaded. However, there is a value that you're using that can be used instead, i.e. upload_number. Remember this is always one more than the current number of uploads, so you can simply replace:
Expand|Select|Wrap|Line Numbers
  1. var uploads = parseInt(document.getElementById("uploads").value);
  2. for (i = 1; i <= uploads; i++) {
with
Expand|Select|Wrap|Line Numbers
  1. for (i = 1; i < upload_number; i++) {
See how useful a good debugging tool is!
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#41: Oct 2 '08

re: Alert for description attachment

Hey Acoder,

althought i still don't fully understand the firebug (yet), i am liking it an can see many other useful things i can use it for :).But i got one last challenge out of this. Is there anyway to make it so that if a user don't have an attachment picked out that it wont ask for the description? because if someone doesn't upload anything it still asks me to fill out the description

here is what i have on my validatoin page

Expand|Select|Wrap|Line Numbers
  1. for (i = 1; i <= upload_number; i++) {
  2. description = document.getElementById("description"+i);
  3.  
  4. if(description.value== "")
  5. {
  6. alert ("Please fill in the description for your attachment");
  7. return false;
  8. }
  9. }
Thank you :),
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#42: Oct 2 '08

re: Alert for description attachment

Get the attachment element first, i.e. with ID "attachment"+i, check if it's not empty. If it isn't, then make the check on the description, otherwise there's no need for validation.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#43: Oct 2 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

Get the attachment element first, i.e. with ID "attachment"+i, check if it's not empty. If it isn't, then make the check on the description, otherwise there's no need for validation.

Hey Acoder,

I clearly did something wrong because now it won't at all.an i made sure i got the right id.

Expand|Select|Wrap|Line Numbers
  1. for (i = 1; i <= upload_number; i++) {
  2. description = document.getElementById("description"+i);
  3. attachment = document.getElementById("attachments"+i);
  4. if attachment.value== "")
  5. {
  6. alert("Please choose a attachment");
  7. return false;
  8. }
  9. else if(description.value== "")
  10. {
  11. alert ("Please fill in the description for your attachment");
  12. return false;
  13. }
  14. }
Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#44: Oct 2 '08

re: Alert for description attachment

You need the changes that you added for description in post #29 above. You need to add the ID for the file variable and also make sure the ID is "attachment1", "attachment2", etc.

Finally, on line 4 in the previous post, you forgot the opening ( in the if statement.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#45: Oct 3 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

You need the changes that you added for description in post #29 above. You need to add the ID for the file variable and also make sure the ID is "attachment1", "attachment2", etc.

Finally, on line 4 in the previous post, you forgot the opening ( in the if statement.

Hey Acoder,

here is what i got but still not working right

the javascript
Expand|Select|Wrap|Line Numbers
  1. // JavaScript Document
  2. <!--- Allows you to attach multiple files --->
  3. <!---br is a break an left it so i will know later how to do a break--->
  4.    var upload_number = 2;
  5.      function addFileInput()
  6.      {
  7.      var d = document.createElement("div");
  8.      var l = document.createElement("input");
  9.      var file = document.createElement("input");
  10.      var text = document.createElement("input");
  11.      var nbsp = document.createTextNode("\u00a0");
  12.      var space = document.createTextNode("\u00a0");
  13. <!---     var br = document.createElement("br");--->
  14.      var des = document.createTextNode("Description")
  15.      try {
  16.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  17.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  18.    l = document.createElement("<input type='button' onclick='javascript:removeFileInput("+upload_number+");'>");
  19. } catch (e) {
  20.   file = document.createElement("input");
  21.   text = document.createElement("input");
  22. }
  23.      d.setAttribute("id", "f"+upload_number);
  24.      file.setAttribute("type", "file");
  25.      file.setAttribute("name", "attachment"+upload_number);
  26.      file.setAttribute("id", "attachment"+upload_number);
  27.      text.setAttribute("type", "text");
  28.      text.setAttribute("name", "description"+upload_number);
  29.      text.setAttribute("id", "description"+upload_number);
  30.      l.setAttribute("id", "l"+upload_number);  
  31.      l.setAttribute("type", "button");
  32.      l.setAttribute("onclick", "javascript:removeFileInput("+upload_number+")");
  33.  
  34.      l.type="button";
  35.      l.value="Remove";
  36.      l.onclick="javascript:removeFileInput("+upload_number+")";
  37. <!---     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");--->
  38. <!---     l.appendChild(document.createTextNode("Remove"));--->
  39.      d.setAttribute("id", "f"+upload_number);
  40.      d.appendChild(file);
  41.      d.appendChild(nbsp);
  42.      d.appendChild(des);
  43. <!---     d.appendChild(br);--->
  44.       d.appendChild(space);
  45.      d.appendChild(text);
  46.      d.appendChild(l);
  47.      document.getElementById("moreUploads").appendChild(d);
  48.      document.getElementById("uploads").value += "," + upload_number;
  49.      upload_number++;
  50.      }
  51.  
  52. function removeFileInput(i)
  53. {
  54.     var elm = document.getElementById("f"+i);
  55.     document.getElementById("moreUploads").removeChild(elm);
  56. document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");
  57.  
  58. }
  59.  
  60.  
the validation
Expand|Select|Wrap|Line Numbers
  1. for (i = 1; i <= upload_number; i++) {
  2. description = document.getElementById("description"+i);
  3. attachment = document.getElementById("attachments"+i);
  4. if (attachment.value== ""){
  5. alert("Please choose a attachment");
  6. return false;
  7. }
  8. else if(description.value== "")
  9. {
  10. alert ("Please fill in the description for your attachment");
  11. return false;
  12. }
  13. }
Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#46: Oct 3 '08

re: Alert for description attachment

The ID in line 3 of the validation code should be "attachment"+i (without the 's').
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#47: Oct 3 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

The ID in line 3 of the validation code should be "attachment"+i (without the 's').

Hey Acoder,

Now its working correctly. But one last thing that i got to add to it. I don't know if its possible but is there anyway to make it so it don't alert if no attachment nor description is filled out?

Expand|Select|Wrap|Line Numbers
  1. for (i = 1; i <= upload_number; i++) {
  2. description = document.getElementById("description"+i);
  3. attachment = document.getElementById("attachment"+i);
  4. if (attachment.value== ""){
  5. alert("Please choose a attachment");
  6. return false;
  7. }
  8. else if(description.value== "")
  9. {
  10. alert ("Please fill in the description for your attachment");
  11. return false;
  12. }
  13. }
Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#48: Oct 3 '08

re: Alert for description attachment

Would this be in the case where there's only one attachment or could there be more than one attachment all of which could be empty?
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#49: Oct 3 '08

re: Alert for description attachment

Quote:

Originally Posted by acoder

Would this be in the case where there's only one attachment or could there be more than one attachment all of which could be empty?

Hey Acoder,

Well i am saying basically if a user did not choose an attachment nor a description that it would still let me submit instead of it asking for me to choose an attachment.because right now if someone does not choose an attachment nor writes a description they still have to put something therein order to click submit.

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#50: Oct 3 '08

re: Alert for description attachment

I think you only need to check attachment1 then because the description is checked afterwards anyway. You can put an if statement around the whole validation code which checks that attachment1 is not empty:
Expand|Select|Wrap|Line Numbers
  1. if (document.getElementById("attachment1").value != "") {
  2.     for ...
  3. }
Reply
Page 1 of 2 1 2 >

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,467 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved