concatinating and sending the input type/file via ajax

omerbutt · #1 September 1st, 2008, 09:41 AM

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

<title><?=SITE_TITLE;?></title>

<script type=text/javascript>

var kids=["SHOKI","SIMI"];

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"];

    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"];

function GetXmlHttpObject(){

        objXMLHttp=null;

        try{

            // Firefox, Opera 8.0+, Safari

            objXMLHttp=new XMLHttpRequest();

        }

        catch (e){

            // Internet Explorer

            try{

                objXMLHttp=new ActiveXObject("Msxml2.XMLHTTP");

            }

            catch (e){

                try{

                    objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");

                }

                catch (e){

                    alert("Your browser does not support AJAX!");

                    return false;

                }

            }

        }

        return objXMLHttp;

    }

function Submit_Global(fobj){

        var validator;

        var str="";

validator=valContactFrm(fobj);

        if(validator==true){

                str=frmCater(fobj);

                str+="&comp_id="+Math.random();

                alert(str);

                xmlSubmitContactComp=GetXmlHttpObject();

                if(xmlSubmitContactComp==null){

                    alert("You Need to upgrade your browser");

                    return;

                }else{

            xmlSubmitContactComp.onreadystatechange=$_compfrm;

    xmlSubmitContactComp.open("POST","ajax/contact_done.php",true);

xmlSubmitContactComp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlSubmitContactComp.setRequestHeader("Content-length",str.length);

xmlSubmitContactComp.setRequestHeader("Connection","close");

xmlSubmitContactComp.send(str);

}

}else{

alert(validator);

}

function valContactFrm(fobj){

        var str="Please Look At The Following\n************************\n";

        var flg=0;

        for(var i=0; i<fobj.length-2; i++){

            switch(fobj.elements[i].type){

                case "text":

                    if(fobj.elements[i].value==""){

                        str+="You must enter your "+replicator(fobj.elements[i].id)+"\n";

                        flg=1;

                    }

                    if(fobj.elements[i].name=="mem_email" && fobj.elements[i].value!=""){

                        if(!echeck(fobj.elements[i].value)){

                            str+="Your email needs a recheck\n";

                            flg=1;

                        }

                    }

                break;

                case "textarea":

                    if(fobj.elements[i].value==""){

                        str+="You must enter your "+replicator(fobj.elements[i].id)+"\n";

                        flg=1;

                    }

                break;

                case "select-one":

                    if(fobj.elements[i].value==""){

                        str+="You must enter your "+replicator(fobj.elements[i].id)+"\n";

                        flg=1;

                    }

                break;

            }

        }

        if(flg!=1){

            if(fobj.name=="bulkfrm"){

                var limit=parseInt(0);

                var inpObj=fobj.getElementsByTagName("input");

                var t_qty=document.getElementById("rows_t").value;

                if(t_qty==1){

                    limit=limit+parseInt(document.getElementById("prod_qty_1").value);

                }else{

                    //limit=limit+parseInt(document.getElementById("prod_qty_1").value);

                    for(var w=1; w<=t_qty; w++){

                        limit=limit+parseInt(fobj.elements["prod_qty_"+w].value);

                    }

                    alert(limit);

                }

                if(limit<25){

                    str+="Minimum Order is for 25 sticks\n";

                    alert(limit);

                    flg=1;

                }

            }

        }

        if(flg==1){

            return str;

        }else{

            return true;

        }

    }

    function frmCater(fobj){

        var str="";

        for(var i=0; i<fobj.length; i++){

            switch(fobj.elements[i].type){

                case "text":

                    str+=fobj.elements[i].name+"="+fobj.elements[i].value+"&";

                break;

                case "textarea":

                    str+=fobj.elements[i].name+"="+fobj.elements[i].value+"&";

                break;

                case "select-one":

                    str+=fobj.elements[i].name+"="+fobj.elements[i].options[fobj.elements[i].selectedIndex].value+"&";

                break;

                case "hidden":

                    str+=fobj.elements[i].name+"="+fobj.elements[i].value+"&";

                break;

                case "file":

                    str+=fobj.elements[i].name+"="+fobj.elements[i].value+"&";

                break;

            }

        }

        str=str.substr(0,(str.length - 1));

        return str;

    }

    function replicator(str){

        for(var t=0; t<frm_org.length; t++){

            str=str.replace(frm_org[t],frm_rep[t]);

        }

        return str;

    }

</head>

<body>

<div id="CollapsiblePanel3" class="CollapsiblePanel">

<div class="text_orange_12_b ">

<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>

<div class="CollapsiblePanelContent text_grey_12_trebuchet" id="compl">

<form name="complfrm" id="complfrm" method="post" enctype="multipart/form-data">

<input type="hidden" name="mem_id" id="mem_id" value="<?=$member_id;?>" />

<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="100000" />

<br /><span class="text_grey_12_trebuchet frm_span">Name</span><br />

<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 />

<span class="text_grey_12_trebuchet frm_span">Email</span><br />

<span class="frm_span"><input type="text" name="mem_email" id="mem_email" value="" class="input_grey text_grey_12_trebuchet" /></span><br />

<span class="text_grey_12_trebuchet frm_span">Telephone</span><br />

<span class="frm_span"><input type="text" name="mem_tel" id="mem_tel" value="" class="input_grey text_grey_12_trebuchet" /></span><br />

<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 />

<span class="frm_span"><input type="text" name="mem_ttc" id="mem_ttc" value="" class="input_grey text_grey_12_trebuchet" /></span><br />

<span class="text_grey_12_trebuchet frm_span">Shipping Address</span><br />

<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 />

<span class="text_grey_12_trebuchet frm_span">Nature of complaint </span><br />

<span class="frm_span">

<select name="mem_comp_type" id="mem_comp_type" class="input_1 text_grey_12_trebuchet">

<option value="Warranty_Claim">Warranty Claim</option>

<option value="Refund">Refund</option>

<option value="Exchange">Exchange</option>

<option value="Other">Other</option>

</select>

</span><br /><br />

<span class="text_grey_12_trebuchet frm_span">Upload image1:</span>

<span class="frm_span"><input type="file" name="mem_pic_1" id="mem_pic_1" value="" /></span><br />

<span class="text_grey_12_trebuchet frm_span">Upload image2:</span>

<span class="frm_span"><input type="file" name="mem_pic_2" id="mem_pic_2" value="" /></span><br />

<span class="text_grey_12_trebuchet frm_span">Upload image3:</span>

<span class="frm_span"><input type="file" name="mem_pic_3" id="mem_pic_3" value="" /></span><br /><br />

<span class="text_grey_12_trebuchet frm_span">Message:</span><br />

<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 />

<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>

<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>

</form>

</div>

</div>

</body>

</html>

acoder · #2 September 1st, 2008, 09:50 AM

You can't do file uploads with the XMLHttpRequest object, but you can use an iframe. See, for example, this link.

omerbutt · #3 September 1st, 2008, 09:55 AM

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

acoder · #4 September 1st, 2008, 10:38 AM

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.

omerbutt · #5 September 1st, 2008, 12:56 PM

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

acoder · #6 September 1st, 2008, 02:17 PM

So you abandoned the "same page" file upload?

omerbutt · #7 September 2nd, 2008, 09:23 AM

Quote:

Originally Posted by acoder

So you abandoned the "same page" file upload?

:D yeah didnt had the time :(

acoder · #8 September 2nd, 2008, 01:02 PM

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.

omerbutt · #9 September 3rd, 2008, 07:27 AM

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

Popular Articles

What is Bytes?