Sending data to server via ajax

[Violet_82]

Hi guys, I have a form which contains a file upload input field. When I select a file, mainly text files, the actual content of the file is displayed in a textarea field. Now, what I need to do, is to send that information - the data contained in the file - as a string to the server using ajax. one of the reasons for doing it that way, rather than sending the actual file, is that users must be able to edit the file information (even copying and pasting into the text displayed in the textarea). Now, I'm not really good with ajax I'm afraid, as I only used it a few times, so I'm trying to get this done but I'm having some difficulty.
Here is the current javascript code as i described above, without the ajax part (the javascript is part of a spring application that's why it's all inside quotes):
This is the popup with the relevant info (input field and textarea as described above.)

JavaScript.getCurrent().execute(""
    +"var $HTMLpopup = $('<div class=\"popupContainer\">"
        +"<span class=\"cancelBtn big\"></span>"
        +"<div class=\"wrapper\">"
            +"<form>"
                +"<div class=\"mask\">"
                    +"<input type=\"file\" title=\" \"name=\"uploadFile\" class=\"uploadFile\" accept=\".mol,.sdf\">/*filters files to upload*/"
                    +"<span class=\"pseudoBtn\">Browse</span>"
                    +"<input type=\"text\" name=\"displayFile\" class=\"displayFile\" placeholder=\"no file loaded\">"
                    +"<span class=\"cancelBtn small\"></span>"
                +"</div>"
                +"<textarea class=\"fileResult\"></textarea>"
                +"<button type=\"submit\" class=\"submitBtn\">Upload</button>"
                +"<div class=\"clear\"></div>"
            +"</form>"
        +"</div>"
    +"</div>');"
    +"$('.popupTriggerBtn').click(function(){"
        +"/*console.log('button clicked!');*/"
        +"var $body = $('body');"
        +"$HTMLpopup.appendTo($body);"
    +"});"

The popup then gets added to the page and here is the code that, if there is no file attached, prevents the submission and displays an error:

+"$submitBtn.click(function(){"
        +"if(isFileUploadEmpty()){/*IF EMPTY*/"
            +"/*alert('submit clicked');*/"
            +"removeError();"
            +"showError('empty');"
            +"return false;/*DON'T SUBMIT*/"

        + "}"                                                      
    + "});"

Right, on to the ajax bit now.
Now, as I don't need to get the whole form submitted but just the text of the file as a string, I don't suppose I need to send the whole form across to the server, right?
So, I'm thinking I will add an action to the form - which currently hasn't any - and make an ajax call like this:

$.ajax({
            url: formAction,
            data: formData,
            contentType: hasFormData ? false : 'application/x-www-form-urlencoded; charset=UTF-8',
            processData: hasFormData ? false : true,
            type: "POST",
            success: function(data, textStatus, jqXHR){
                    //hideForm($currentForm,data);
                    $(".form-error").remove();//remove error first thing
                    clearFields();//clear fields
                    addSuccessMsg();//add a success message
                },
            error: function(jqXHR, textStatus, errorThrown){
                    //hideForm($currentForm,textStatus);
                }
        });

My question though is about the data that I need to pass to the server. Do I have to stryingify the text - it should be already a string shouldn't it? - and if so how and how do I pass it to the server?
thanks

[Violet_82]

Right, I've made some changes to the code.
The form action tag is empty: I don't have any PHP file to handle that because there will be some libraries that I'll use to validate the actual string sent to the server and, like I said, since this is an application I can't even post to the page itself, as I wouldn't have a clue how to do that, so the action is an empty string.
+"<form action=\"\" id=\"fileForm\">"
I'm now preventing the submission of the form and I've added the ajax functionality, here is the code:

+"/*ON CLICK SUBMISSION BUTTON*/"
    +"var $submitBtn = $HTMLpopup.find('.submitBtn');"
    +"$submitBtn.click(function(e){"
        +"e.preventDefault();/*prevent submission*/"
        +"if(isFileUploadEmpty()){/*IF FIELD EMPTY*/"
            +"/*alert('submit clicked');*/"
            +"removeError();"
            +"showError('empty');"
            +"/*return false;*/"
        + "}"
        +"else{/*IF NOT EMPTY*/"    
            +"/*AJAX OPS*/"
            +"if (window.XMLHttpRequest){/*XMLHttpRequest SUPPORT?*/"
                +"console.log('XMLHttpRequest supported!');"
                +"var postData = 'text';"
                +"/*var action = $HTMLpopup.find('form#fileForm').attr('action');*/"
                +"$.ajax({"
                    +"type:'post',"
                    +"url:'url',"
                    +"dara:'postData',"
                    +"contentType: 'application/x-www-form-urlencoded',"
                    +"success: function(responseData, textStatus, jqXHR){"
                        +"alert('data saved');"
                    + "},"
                    +"error: function(jqXHR, textStatus, errorThrown){"
                        + "console.log(errorThrown);"
                    + "}"   
                + "});"
            + "}"
        +"}"
    + "});"

So, here, providing you select a file (if not you get a clientside error), when you click submit (again note I'm preventing the submission of the form with e.preventDefault()) I reckon I'm sending something to the server because then I get the alert., but what is it that I'm sending? Have I managed to send the string contained in the textarea? How do I find out?
thanks