Topic: Submit Form

I'm trying to create an AJAX function that submits a form.  So far, what I have it doing, is compiling all the form data into a string and submitting that.  However, I think its maxing out the querystring.

Is there a way to submit the entire form through AJAX without sending it through the querystring?

//Global variables
var http = null;

//Create request
function ajaxCreateRequestObject() {

    //Basic variable
    var req;

    //Check for browser compatibility
    //Firefox, safari, opera...
    if(window.XMLHttpRequest)
        req = new XMLHttpRequest();
    //IE v5+
    else if(window.ActiveXObject)
        req = new ActiveXObject("Microsoft.XMLHTTP");
    //No compatibility
    else
        alert('Problem creating the XMLHttpRequest object.');
    
    //Return the function
    return req;
}
//Send request
function ajaxSendRequest(method, url, handler, parameters)
{
    //Open up and send request
    http.open(method, url, true);
    http.onreadystatechange = handler;
    http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    http.send(parameters);
}

function adminProfileNewSubmit()
{
    //Get the form elements
    var Title=document.getElementById('adminFormProfileNewTitle').value;
    var Body=document.getElementById('adminFormProfileNewDesc').value;
    var Annc=document.getElementById('adminFormProfileNewAnn').value;
    var Url=document.getElementById('adminFormProfileNewUrl').value;
    var Guest=document.getElementById('adminFormProfileNewGuest').value;
    var User=document.getElementById('adminFormProfileNewUser').value;
    var Skin=document.getElementById('adminFormProfileNewSkin').value;
    var Def=document.getElementById('adminFormProfileNewDefault').value;
    
    //Validate form
    statusbarUpdate('Validatin...',true);
    if(adminProfileFormVerify() == false)
    {
        //Update status
        statusbarUpdate('Submitting...',true);
        
        //Prepare parameters
        var data = 'Title='+escape(Title)+'&Body='+escape(Body)+'&Annc='+escape(Annc)+'&Url='+escape(Url)+'&Guest='+Guest+'User='+User+'&Skin='+escape(Skin)+'&Default='+Def+'';
        
        var buttons = new Array( ['Okay', 'modalDeactivate()', 'modalBoxButtonYes'] );
        modalInitiate('AdminResults', 'Success!', data, buttons, 300);
        
        //Create and send request
        http = ajaxCreateRequestObject();
        ajaxSendRequest('POST','AJAX/adminBoard.asp?Action=3', adminProfileNewSubmitHandler, data);
    }else
        statusbarHide();
}
function adminProfileNewSubmitHandler()
{
    //Finished request
    if(http.readyState == 4 && http.status == 200)
    {
        //Get response text
        var response = http.responseText;
        
        //Check for success
        if(response.indexOf('1')!=-1)
        {
            //Update content
            adminContentShowpage('adminBoard.asp','1')
            
            //Alert user to success
            var buttons = new Array( ['Okay', 'modalDeactivate()', 'modalBoxButtonYes'] );
            modalInitiate('AdminResults', 'Success!', 'The new profile has been created successfully.', buttons, 300);
        }else
        {
            //Alert
            var buttons = new Array( ['Okay', 'modalDeactivate()', 'modalBoxButtonYes'] );
            modalInitiate('AdminResults', 'Error!', 'There was an unknown error creating new profile.', buttons, 300);
        }
        
        //Hide statusbar
        statusbarUpdate('Loading...',false);
    }else if(http.readyState == 4 && http.status != 200)
        statusbarUpdate('Error with remote page.', true);
}

Anybody have any ideas?  I'd really appreciate the help.

Re: Submit Form

I don't believe there is a way to 'easily' submit forms via AJAX without building up the query string.  I'd recommend, though, making the adminProfileNewSubmit function a little more general, to allow for easier alteration of the form and more possible applications of the js.  So instead of simply retrieving the value of each field in a seperate statement, a more expandable approach would be to loop through the fields and retrieve the value based off its type.  (eg. switch(field.type) { case 'text' : bla bla bla; break; case 'checkbox' : bla bla bla; break; etc... })

Re: Submit Form

The problem is, I believe I am maxing out the query string length.  Is there a way to get around this?

Re: Submit Form

If you're sending it via post I don't really think there is a limit to how much information you send, although I might be wrong.

Re: Submit Form

Well the thing is, if I set the form to submit regularly (meaning, without AJAX--actually navigate to the page) it all works fine.  However, if I don't, then it comes back saying one of the variables in my query string is undefined.

Re: Submit Form

I noticed a similar thing using GET. I think this is actually a limitation in the browser. The length isn't limited, it's the amount of variables you pass wink

Re: Submit Form

So the query string can be as long as it wants, but it's limited by the number of variables in it?

Re: Submit Form

I think so, yes.

Re: Submit Form

I'll give that a try.  Thank you so much!

Re: Submit Form

How do you know that that error dosn't come from the way you get the variables and create the query string?  It seems unlikely that a browser would be limited to 'the number of variables in a query string' when it's all just one long string anyway.