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

concatinating and sending the input type/file via ajax

  #1  
Old September 1st, 2008, 09:41 AM
omerbutt's Avatar
Needs Regular Fix
  
Join Date: Nov 2006
Location: Earth Obviously :P
Posts: 340
Provided Answers: 1
hi there i have a form with multiple input (type/text ) fields and three inputs(type/file) fields i have to submit the form via ajax because i have multiple forms on this page ,you can say it is a contact_us.php page.Now i can get all the inputs at the other end else the input(type/file) i donot want a submit button what i want that some how io can send the file name and the path of the picture that is to be uploaded and send to a page via ajax and the save that to a location iwant here is my current code
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <title><?=SITE_TITLE;?></title>
  6. <script type=text/javascript>
  7. var kids=["SHOKI","SIMI"];
  8. var frm_org="mem_name","mem_email","mem_tel","mem_sub","mem_msg","mem_ttc", "mem_fax","mem_bs_name","mem_bs_type","mem_bs_addr","mem_web_url","mem_zip", "mem_city","prod_qty"];
  9.     var frm_rep=["Name","Email","Tel","Subject","Message","Best Time To Call","Fax","Business Name","Business Type","Business Address","Website URL","Zip / Post Code","City","Quantity"];
  10. function GetXmlHttpObject(){
  11.         objXMLHttp=null;
  12.         try{
  13.             // Firefox, Opera 8.0+, Safari
  14.             objXMLHttp=new XMLHttpRequest();
  15.         }
  16.         catch (e){
  17.             // Internet Explorer
  18.             try{
  19.                 objXMLHttp=new ActiveXObject("Msxml2.XMLHTTP");
  20.             }
  21.             catch (e){
  22.                 try{
  23.                     objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
  24.                 }
  25.                 catch (e){
  26.                     alert("Your browser does not support AJAX!");
  27.                     return false;
  28.                 }
  29.             }
  30.         }
  31.         return objXMLHttp;
  32.     }
  33. function Submit_Global(fobj){
  34.         var validator;
  35.         var str="";
  36. validator=valContactFrm(fobj);
  37.         if(validator==true){
  38.                 str=frmCater(fobj);
  39.                 str+="&comp_id="+Math.random();
  40.                 alert(str);
  41.                 xmlSubmitContactComp=GetXmlHttpObject();
  42.                 if(xmlSubmitContactComp==null){
  43.                     alert("You Need to upgrade your browser");
  44.                     return;
  45.                 }else{
  46.             xmlSubmitContactComp.onreadystatechange=$_compfrm;
  47.     xmlSubmitContactComp.open("POST","ajax/contact_done.php",true);
  48. xmlSubmitContactComp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  49. xmlSubmitContactComp.setRequestHeader("Content-length",str.length);
  50. xmlSubmitContactComp.setRequestHeader("Connection","close");
  51. xmlSubmitContactComp.send(str);
  52. }
  53. }else{
  54. alert(validator);
  55. }
  56. function valContactFrm(fobj){
  57.         var str="Please Look At The Following\n************************\n";
  58.         var flg=0;
  59.         for(var i=0; i<fobj.length-2; i++){
  60.             switch(fobj.elements[i].type){
  61.                 case "text":
  62.                     if(fobj.elements[i].value==""){
  63.                         str+="You must enter your "+replicator(fobj.elements[i].id)+"\n";
  64.                         flg=1;
  65.                     }
  66.                     if(fobj.elements[i].name=="mem_email" && fobj.elements[i].value!=""){
  67.                         if(!echeck(fobj.elements[i].value)){
  68.                             str+="Your email needs a recheck\n";
  69.                             flg=1;
  70.                         }
  71.                     }
  72.                 break;
  73.                 case "textarea":
  74.                     if(fobj.elements[i].value==""){
  75.                         str+="You must enter your "+replicator(fobj.elements[i].id)+"\n";
  76.                         flg=1;
  77.                     }
  78.                 break;
  79.                 case "select-one":
  80.                     if(fobj.elements[i].value==""){
  81.                         str+="You must enter your "+replicator(fobj.elements[i].id)+"\n";
  82.                         flg=1;
  83.                     }
  84.                 break;
  85.             }
  86.         }
  87.         if(flg!=1){
  88.             if(fobj.name=="bulkfrm"){
  89.                 var limit=parseInt(0);
  90.                 var inpObj=fobj.getElementsByTagName("input");
  91.                 var t_qty=document.getElementById("rows_t").value;
  92.                 if(t_qty==1){
  93.                     limit=limit+parseInt(document.getElementById("prod_qty_1").value);
  94.                 }else{
  95.                     //limit=limit+parseInt(document.getElementById("prod_qty_1").value);
  96.                     for(var w=1; w<=t_qty; w++){
  97.                         limit=limit+parseInt(fobj.elements["prod_qty_"+w].value);
  98.                     }
  99.                     alert(limit);
  100.                 }
  101.                 if(limit<25){
  102.                     str+="Minimum Order is for 25 sticks\n";
  103.                     alert(limit);
  104.                     flg=1;
  105.                 }
  106.             }
  107.         }
  108.         if(flg==1){
  109.             return str;
  110.         }else{
  111.             return true;
  112.         }
  113.     }
  114.     function frmCater(fobj){
  115.         var str="";
  116.         for(var i=0; i<fobj.length; i++){
  117.             switch(fobj.elements[i].type){
  118.                 case "text":
  119.                     str+=fobj.elements[i].name+"="+fobj.elements[i].value+"&";
  120.                 break;
  121.                 case "textarea":
  122.                     str+=fobj.elements[i].name+"="+fobj.elements[i].value+"&";
  123.                 break;
  124.                 case "select-one":
  125.                     str+=fobj.elements[i].name+"="+fobj.elements[i].options[fobj.elements[i].selectedIndex].value+"&";
  126.                 break;
  127.                 case "hidden":
  128.                     str+=fobj.elements[i].name+"="+fobj.elements[i].value+"&";
  129.                 break;
  130.                 case "file":
  131.                     str+=fobj.elements[i].name+"="+fobj.elements[i].value+"&";
  132.                 break;
  133.             }
  134.         }
  135.         str=str.substr(0,(str.length - 1));
  136.         return str;
  137.     }
  138.     function replicator(str){
  139.         for(var t=0; t<frm_org.length; t++){
  140.             str=str.replace(frm_org[t],frm_rep[t]);
  141.         }
  142.         return str;
  143.     }
  144. </head>
  145. <body>
  146. <div id="CollapsiblePanel3" class="CollapsiblePanel">
  147. <div class="text_orange_12_b ">
  148. <span class="text_orange_12_b" style="float:left;">Returns and complaints</span><span class="text_grey_10_small CollapsiblePanelTab" style="text-align:right; float:right; display:block;" ></span><span style="float:left;" class="line_form"></span><br /></div>
  149. <div class="CollapsiblePanelContent text_grey_12_trebuchet" id="compl">
  150. <form name="complfrm" id="complfrm" method="post" enctype="multipart/form-data">
  151. <input type="hidden" name="mem_id" id="mem_id" value="<?=$member_id;?>" />
  152. <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="100000" />
  153. <br /><span class="text_grey_12_trebuchet frm_span">Name</span><br />
  154. <span class=" text_grey_12_trebuchet frm_span"><input type="text" name="mem_name" id="mem_name" value="" class="input_grey text_grey_12_trebuchet" /></span><br />
  155. <span class="text_grey_12_trebuchet frm_span">Email</span><br />
  156. <span class="frm_span"><input type="text" name="mem_email" id="mem_email" value="" class="input_grey text_grey_12_trebuchet" /></span><br />
  157. <span class="text_grey_12_trebuchet frm_span">Telephone</span><br />
  158. <span class="frm_span"><input type="text" name="mem_tel" id="mem_tel" value="" class="input_grey text_grey_12_trebuchet" /></span><br />
  159. <span class="text_grey_12_trebuchet frm_span">Best Time to Call<span class="error">&nbsp;&nbsp;e.g <em>"5AM to 7PM"</em></span></span><br />
  160. <span class="frm_span"><input type="text" name="mem_ttc" id="mem_ttc" value="" class="input_grey text_grey_12_trebuchet" /></span><br />
  161. <span class="text_grey_12_trebuchet frm_span">Shipping Address</span><br />
  162. <span class="frm_span"><input type="text" name="mem_shp_add" id="mem_shp_add" value="" class="input_grey text_grey_12_trebuchet" /></span><br />
  163. <span class="text_grey_12_trebuchet frm_span">Nature of complaint </span><br />
  164. <span class="frm_span">
  165. <select name="mem_comp_type" id="mem_comp_type" class="input_1 text_grey_12_trebuchet">
  166. <option value="Warranty_Claim">Warranty Claim</option>
  167. <option value="Refund">Refund</option>
  168. <option value="Exchange">Exchange</option>
  169. <option value="Other">Other</option>
  170. </select>
  171. </span><br /><br />
  172. <span class="text_grey_12_trebuchet frm_span">Upload image1:</span>
  173. <span class="frm_span"><input type="file" name="mem_pic_1" id="mem_pic_1" value="" /></span><br />
  174. <span class="text_grey_12_trebuchet frm_span">Upload image2:</span>
  175. <span class="frm_span"><input type="file" name="mem_pic_2" id="mem_pic_2" value="" /></span><br />
  176. <span class="text_grey_12_trebuchet frm_span">Upload image3:</span>
  177. <span class="frm_span"><input type="file" name="mem_pic_3" id="mem_pic_3" value="" /></span><br /><br />
  178. <span class="text_grey_12_trebuchet frm_span">Message:</span><br />
  179. <span class="frm_span"><textarea type="text" name="mem_msg" id="mem_msg" rows="25" cols="25" class="bgimg_profile_grey_very_big" style="border:0px;" ></textarea></span><br />
  180. <span class="frm_span"><input type="button" name="Submit" id="Submit" value="Submit" class="button_bg_submission_page_on" onclick="Submit_Global(this.form);" style="border:0;" align="right" /></span>
  181. <span class="frm_span"><input type="reset" name="Reset" id="Reset" value="Reset" class="button_bg_submission_page_on" style="border:0;" align="right" /></span>
  182. </form>
  183. </div>
  184. </div>
  185. </body>
  186. </html>
  187.  
  #2  
Old September 1st, 2008, 09:50 AM
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,526
Provided Answers: 12

re: concatinating and sending the input type/file via ajax

You can't do file uploads with the XMLHttpRequest object, but you can use an iframe. See, for example, this link.
  #3  
Old September 1st, 2008, 09:55 AM
omerbutt's Avatar
Needs Regular Fix
  
Join Date: Nov 2006
Location: Earth Obviously :P
Posts: 340
Provided Answers: 1

re: concatinating and sending the input type/file via ajax

Quote:
Originally Posted by acoder
You can't do file uploads with the XMLHttpRequest object, but you can use an iframe. See, for example, this link.
hi acoder
i already tried it and it is not outputting the same results as it do in the demo , all i did is that i changed the file name in <form action="up.php">
see here this link
  #4  
Old September 1st, 2008, 10:38 AM
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,526
Provided Answers: 12

re: concatinating and sending the input type/file via ajax

You're not getting the same output because you're using the same file name and outputting the form too. You either need to use a different file/page or detect if a form has been submitted and only display the form if there's no submission.
  #5  
Old September 1st, 2008, 12:56 PM
omerbutt's Avatar
Needs Regular Fix
  
Join Date: Nov 2006
Location: Earth Obviously :P
Posts: 340
Provided Answers: 1

re: concatinating and sending the input type/file via ajax

Quote:
Originally Posted by acoder
You're not getting the same output because you're using the same file name and outputting the form too. You either need to use a different file/page or detect if a form has been submitted and only display the form if there's no submission.
hmm idi it the normal submit way thanks for the help acoder
regards,
omer aslam
  #6  
Old September 1st, 2008, 02:17 PM
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,526
Provided Answers: 12

re: concatinating and sending the input type/file via ajax

So you abandoned the "same page" file upload?
  #7  
Old September 2nd, 2008, 09:23 AM
omerbutt's Avatar
Needs Regular Fix
  
Join Date: Nov 2006
Location: Earth Obviously :P
Posts: 340
Provided Answers: 1

re: concatinating and sending the input type/file via ajax

Quote:
Originally Posted by acoder
So you abandoned the "same page" file upload?
:D yeah didnt had the time :(
  #8  
Old September 2nd, 2008, 01:02 PM
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,526
Provided Answers: 12

re: concatinating and sending the input type/file via ajax

It should degrade to that option anyway if JavaScript were to be disabled. If you do have time in future, you can always choose to resurrect this thread.
  #9  
Old September 3rd, 2008, 07:27 AM
omerbutt's Avatar
Needs Regular Fix
  
Join Date: Nov 2006
Location: Earth Obviously :P
Posts: 340
Provided Answers: 1

re: concatinating and sending the input type/file via ajax

Quote:
Originally Posted by acoder
It should degrade to that option anyway if JavaScript were to be disabled. If you do have time in future, you can always choose to resurrect this thread.
yeah sure acoder i would do
Reply

« previous question | next question »

/bytes/development

/bytes/it

/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 225,702 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