Parsing Data from Template to Controller Using Prototype JS Ajax.Request

ajaxcontrollersprototype-js

I have the following method in my template file:

function submit_serials(){
    var serials = $('serials').value;
    new Ajax.Request("<?php echo $this->getUrl('*/*/process'); ?>" + '?serials=' + serials, {
        method: 'POST', 
        onComplete: function(transport) {
            div = $('feedback');
            div.update(transport.responseText);
        }
    });
}

in my controller file I have:

public function processAction(){
    $serials = $_POST['serials'];
    ...
}

I'm getting a Request-URI too large error. I understand that there is too much info being stored in the serials variable, but how else can I parse this through to the controller? I read that you should be using the body of the AJAX request but I can't seem to figure out how to do so.

How can I parse the serials in the body of this Ajax request & fetch them from within the controller file?

Best Answer

You need form param serialize, and send form fields as it as param to ajax request

 new Ajax.Request(url,{
    method:'POST',
parameters:params,
    requestHeaders: {Accept: 'application/json'},
    onSuccess:function(transport){
        var response=transport.responseText.evalJSON(true);

    }.bind(this)
    });

If you work with varien form stucture then using form ID you can create Varien form vaidation:

//<![CDATA[
        var MobileLogin = new VarienForm('min-mobile-login', true);
            MobileLogin.submit = function(button, url) {
            if (this.validator.validate()) {
                var form = this.form;
                var oldUrl = form.action;
                if (url) { form.action = url; }
                var e = null;
                try { 
            //this.form.submit();
            //loggin(this.form.action,this.form.serialize(),this.form.method);

            new Ajax.Request(this.form.action,{
            method:'POST',
            parameters:this.form.serialize(),
            requestHeaders: {Accept: 'application/json'},
            onSuccess:function(transport){
                var response=transport.responseText.evalJSON(true);

            }.bind(this)
            });


        } catch (e) {
                }
                this.form.action = oldUrl;
                if (e) { throw e; }


            }
        }.bind(MobileLogin);
    //]]>

Here min-mobile-login is id form .Ex <form id="min-mobile-login" ....

And form button type should be submit and it content onclick function and and return false

    <button class="button" type="submit"  
onclick="MobileLogin.submit(this); return false;">Login</button>
Related Topic