Question

I have a form that’s calling a Post a .php file, which i though was the basis of ajax pushing (as opposed to retrieving data with ajax). Unfortunately, my browser will always load my called .php file instead of staying on the page containing the form. I’ thinking there’s a specific line of code I’m forgetting somewhere. What should I be looking for?

<form id="form-upload" enctype="multipart/form-data" action="_scripts/ajax/cropImage.php" method="post" onsubmit="return checkCoords();" style="min-height:450px; position:relative;">
                    <input type="hidden" id="x" name="x" />
                        <input type="hidden" id="y" name="y" />
                        <input type="hidden" id="w" name="w" />
                        <input type="hidden" id="h" name="h" />
                    <input type="hidden" id="ht" name="ht" />
                    <input type="hidden" id="wt" name="wt" />
                    <div style="position:absolute">
                    <h2>Upload a picture</h2>
                    <input id="input-upload" name="input-upload" type='file' onchange="readURL(this);" /><br/>
                    <img id="upload-preview" src="" alt="" />
                    <div style="position:absolute; bottom:0;">
                        <input type="submit" value="Upload" />
                        <input type="button" value="Cancel" onclick="$('#fancybox-close').trigger('click');"/>
                    </div>
                    </div>
                    <img id="spinner" style="position:absolute; background-color:transparent; left:49%; top:50%;" src="_images/uploads/ajax-loader.gif" height="32" width="32"/>
                </form>

Answer 1

Seems that your understanding of AJAX is a little wrong, don’t take me wrong, I suggest you to read more about it and try to implment it using Jquery libraries for Ajax. Those functions are very well documented and have great examples.

I would not use form tag while using ajax.

This is an example function you would use when use “submit” the data:

$.post("_scripts/ajax/cropImage.php", { 
                                       "y": yValue, 
                                       "x": xValue, 
                                       "h": hValue, 
                                          ...
                                       "input-upload": inputUploadValue
                                      });

Explaining: You will send all values at the object (“y”, “x”, etc) to “_scripts/ajax/cropImage.php”, as POST variables. You can also create a callback function, to receive data from the URL you sended those values, and validate if everything ran well.

It seems you’re using the action attribute of your Form and submiting it. Show us all your related code, please. (Text before showing the code)