Zymic Forums

Webmaster resources

Welcome

Welcome to the Zymic webmaster forums. Our forums are here to provide people the free ability to discuss a range of websites related topics such as design, development coding and marketing.

In order to post you will need to register for a zymic account or if you already have one simply login by using the form on the left.


	Zymic Webmaster Forums Web Design & Development Client Side Scripting JavaScript


	Send Php Array With Ajax

Artzi Media View Member Profile Find Member's Posts	Oct 11 2010, 04:55 AM Post #1
Newbie Group: Members Posts: 11 Joined: 21-April 09 From: League City, TX Member No.: 92,097	I have a form that takes image uploads and uses AJAX to add more upload fields. Basically, they are named "pics[0]", "pics[1]", etc so that the PHP script can process it as an array. However, I also want to use AJAX to submit this form. Currently, I am using an AJAX code I found online to submit, but I have two issues: The script returns a static message rather than the PHP file results I don't think the AJAX is handling the form submit properly due to the naming system to process as an array Here is the code for the form: CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Dynamic Upload Example</title> <!-- Linked files. --> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="dynamic_file_upload.js"></script> <script type="text/javascript"> $(document).ready(function() { //if submit button is clicked $('#submit').click(function () { //Get the data from all the fields var pics = $('input[name=pics]'); //Simple validation to make sure user entered something //If error found, add hightlight class to the text field //organize the data properly var data = 'pics=' + pics.val(); //disabled all the text fields $('.text').attr('disabled','true'); //show the loading sign $('.loading').show(); //start the ajax $.ajax({ //this is the php file that processes the data and send mail url: "test.php", //GET method is used type: "GET", //pass the data data: data, //Do not cache the page cache: false, //success /* success: function (html) { //if process.php returned 1/true (send mail success) if (html==1) { //hide the form $('.form').fadeOut('slow'); //show the success message $('.done').fadeIn('slow'); //if process.php returned 0/false (send mail failed) } else alert('Sorry, unexpected error. Please try again later.'); } / success: function (html) { $('.form').fadeOut('slow'); $('.done').fadeIn('slow'); document.write(html); } }); //cancel the submit button default behaviours return false; }); }); </script> <style type="text/css"> body{text-align:center;} .clear {clear:both} .block { width:400px; margin:0 auto; text-align:left; } .element { padding:5px; margin:2px; font-family:arial; font-size:12px; } .element label { float:left; width:75px; font-weight:700 } .element input.text { float:left; width:270px; padding-left:20px; } .element .textarea { height:120px; width:270px; padding-left:20px; } .element .hightlight { border:2px solid #9F1319; background:url(iconCaution.gif) no-repeat 2px; } .element #submit { float:right; margin-right:10px; } .loading { float:right; background:url(ajax-loader.gif) no-repeat 1px; height:28px; width:28px; display:none; } .done { background:url(iconIdea.gif) no-repeat 2px; padding-left:20px; font-family:arial; font-size:12px; width:70%; margin:20px auto; display:none } </style> </head> <body> <h1>Dynamic Upload Example</h1> <div class="block"> <div class="done"> Yay! </div> <div class="form"> <form action="test.php" method="post"> <div class="element"> <div id="files"> <div id="file1" class="row"> 1: <input type="file" name="pics[0]"> </div> </div> <p> <a id="add-file-upload">Add File Upload</a> </p> <!--- DOM templates. ---> <div id="element-templates" style="display: none;"> <div id="::FIELD1::" class="row"> ::FIELD2::: <input type="file" name="::FIELD3::"> </div> </div> </div> <div class="element"> <input type="submit" id="submit" value="Upload"> <div class="loading"><!-- --></div> </div> </form> </div> </div> <div class="clear"><!-- --></div> </body> </html> As you can see, the form fades out after submit and the div classed as "done" fades in. How can I get the results of the PHP file to fade in instead? I tried html.fadeIn('slow') and $(html).fadeIn('slow'). I added in that document.write to force the page to erase everything and output the results of the PHP file (so I could see if the array was processing correctly), but of course I ultimately don't want to do it like this. I also don't think the JS is processing the array. It's submitting, currently, an input field (the file upload fields) named "pics" because that's what I set it to in the JS. However, the "technical" names of my fields are, like I said, "pics[0]", "pics[1]", "pics[2]", etc. If I use a normal form submit without any JS, I can submit these all via POST with just the name "pics", so the PHP recognizes all of these array fields as $_POST['pics']. Shouldn't this be the same for GET? This doesn't seem to be the case because that document.write is outputting "undefined1". Meaning $_GET['pics'] is undefined. And the 1 is just some boolean stuff that is unneeded now, but it does let me know that the AJAX is outputting the PHP file, but the array is not sending correctly via GET.