By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,851 Members | 1,095 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,851 IT Pros & Developers. It's quick & easy.

Alert for description attachment

100+
P: 769
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
Sep 29 '08 #1
Share this Question
Share on Google+
57 Replies


acoder
Expert Mod 15k+
P: 16,027
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.
Sep 29 '08 #2

100+
P: 769
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
Sep 29 '08 #3

acoder
Expert Mod 15k+
P: 16,027
It should be the ID:
Expand|Select|Wrap|Line Numbers
  1. description = document.getElementById("description");
Sep 29 '08 #4

100+
P: 769
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
Sep 29 '08 #5

acoder
Expert Mod 15k+
P: 16,027
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.
Sep 29 '08 #6

100+
P: 769
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
Sep 29 '08 #7

acoder
Expert Mod 15k+
P: 16,027
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.
Sep 29 '08 #8

100+
P: 769
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
Sep 30 '08 #9

acoder
Expert Mod 15k+
P: 16,027
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. }
Sep 30 '08 #10

100+
P: 769
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
Oct 1 '08 #11

acoder
Expert Mod 15k+
P: 16,027
The ID of the first text box should be "description1", not just "description", for the code to work.
Oct 1 '08 #12

100+
P: 769
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
Oct 1 '08 #13

acoder
Expert Mod 15k+
P: 16,027
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.
Oct 1 '08 #14

100+
P: 769
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
Oct 1 '08 #15

acoder
Expert Mod 15k+
P: 16,027
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?
Oct 1 '08 #16

100+
P: 769
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
Oct 1 '08 #17

acoder
Expert Mod 15k+
P: 16,027
You just need to add an equals sign on line 71 as I've done in my previous post.
Oct 1 '08 #18

100+
P: 769
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
Oct 1 '08 #19

acoder
Expert Mod 15k+
P: 16,027
Is the second description ID "description2"?
Oct 1 '08 #20

100+
P: 769
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
Oct 1 '08 #21

acoder
Expert Mod 15k+
P: 16,027
If you dynamically generate subsequent fields, it won't appear in the source.

What code are you using to generate more fields?
Oct 1 '08 #22

Dormilich
Expert Mod 5K+
P: 8,639
the web developer plugin (FF) has an option to show the complete (static and dynamic) source code of a page.
Oct 2 '08 #23

acoder
Expert Mod 15k+
P: 16,027
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.
Oct 2 '08 #24

100+
P: 769
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
Oct 2 '08 #25

acoder
Expert Mod 15k+
P: 16,027
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.
Oct 2 '08 #26

100+
P: 769
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
Oct 2 '08 #27

acoder
Expert Mod 15k+
P: 16,027
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);
Oct 2 '08 #28

100+
P: 769
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
Oct 2 '08 #29

acoder
Expert Mod 15k+
P: 16,027
Does it not work in any browser?
Oct 2 '08 #30

100+
P: 769
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
Oct 2 '08 #31

acoder
Expert Mod 15k+
P: 16,027
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== "")
Oct 2 '08 #32

100+
P: 769
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
Oct 2 '08 #33

acoder
Expert Mod 15k+
P: 16,027
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.
Oct 2 '08 #34

100+
P: 769
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
Oct 2 '08 #35

acoder
Expert Mod 15k+
P: 16,027
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?
Oct 2 '08 #36

100+
P: 769
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
Oct 2 '08 #37

acoder
Expert Mod 15k+
P: 16,027
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)
Oct 2 '08 #38

100+
P: 769
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
Oct 2 '08 #39

acoder
Expert Mod 15k+
P: 16,027
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!
Oct 2 '08 #40

100+
P: 769
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
Oct 2 '08 #41

acoder
Expert Mod 15k+
P: 16,027
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.
Oct 2 '08 #42

100+
P: 769
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
Oct 2 '08 #43

acoder
Expert Mod 15k+
P: 16,027
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.
Oct 2 '08 #44

100+
P: 769
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
Oct 3 '08 #45

acoder
Expert Mod 15k+
P: 16,027
The ID in line 3 of the validation code should be "attachment"+i (without the 's').
Oct 3 '08 #46

100+
P: 769
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
Oct 3 '08 #47

acoder
Expert Mod 15k+
P: 16,027
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?
Oct 3 '08 #48

100+
P: 769
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
Oct 3 '08 #49

acoder
Expert Mod 15k+
P: 16,027
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. }
Oct 3 '08 #50

57 Replies

Post your reply

Sign in to post your reply or Sign up for a free account.