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

concatinating and sending the input type/file via ajax

omerbutt
100+
P: 638
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.  
Sep 1 '08 #1
Share this Question
Share on Google+
8 Replies


acoder
Expert Mod 15k+
P: 16,027
You can't do file uploads with the XMLHttpRequest object, but you can use an iframe. See, for example, this link.
Sep 1 '08 #2

omerbutt
100+
P: 638
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
Sep 1 '08 #3

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

omerbutt
100+
P: 638
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
Sep 1 '08 #5

acoder
Expert Mod 15k+
P: 16,027
So you abandoned the "same page" file upload?
Sep 1 '08 #6

omerbutt
100+
P: 638
So you abandoned the "same page" file upload?
:D yeah didnt had the time :(
Sep 2 '08 #7

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

omerbutt
100+
P: 638
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
Sep 3 '08 #9

Post your reply

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