How to submit form after an Ajax call

Question

I have a form like something like this

<form id="formCategorias" action="./index.php" method="post">
<input type="hidden" value="5" name="pais">
<table>
    <tbody>
        <tr class="row">
            <td>Renta Comerciales</td>
            <td>
                <input type="text" class="validate" value="" id="inputcat_0" name="" style="border: 1px solid rgb(221, 221, 221);">
                <select id="categoria_0" name="categoria_0">
                    <option value="0">Provincias</option>
                    <option value="Oficinas">Oficinas (11)</option>
                    <option value="Ranchos">Ranchos (12)</option>
                    <option value="Naves Industriales">Naves Industriales (15)</option>
                </select>
                <button onclick="seleccionarCategoria(0)" type="button">+</button>
            </td>
        </tr>
        <tr>
            <td align="right" colspan="2">
                <input type="submit" id="categorias" value="Enviar" name="submit">
            </td>
        </tr>
    </tbody>
</table>

And I am handling it using a following script

$(document).on('submit', '#formCategorias', function (event) {
    $(".validate", this).css("border", "1px solid #ddd");
    event.preventDefault();

    var valid = true;
    $.each($(".validate", this), function () {
        if ($(this).val().length == 0) {
            $(this).css("border", "1px solid red");
            valid = false;
        }
    });
    var formTosubmit = $(this).attr('id');


    var jsonCategoria = JSON.stringify(categoria),
        jsonFeed = JSON.stringify(feed),
        url = "xxxxxxxxxx/feeds/web/ajax.php";
    if (jsonCategoria != '' && jsonFeed != '') {
        var posting = $.post(url, {
            im_core: 'updateCategorias',
            Categorias: jsonCategoria,
            xmlFeeed: jsonFeed,
            idFeed: 11
        }).done(function (data) {
            if (data == 1) {
                valid = true;
            } else alert("Check the form");
        });
    }
    if (valid == true) alert('#' + formTosubmit);
    $('#' + formTosubmit).submit();
});

The problem is that after ajax call when I use the submit() function to submit the form , the browser is doing the Ajax call() repeatedly , resulting into error ,

The fix could be the submit() function should submit the form on the url provided in the action tag instead of the url given to the ajax call ,

Can any one suggest me something

Thanks in Advance

Answer 1

There are 2 problems here

1. Since you are calling the jQuery submit event, it will trigger the submit handler again creating an infinite recursive call. To fix this call the form element(dom object)'s submit method
2. Since ajax is asynchronous check the valid condition within the post callback itself

So

$(document).on('submit', '#formCategorias', function (event) {
    $(".validate", this).css("border", "1px solid #ddd");
    event.preventDefault();

    var valid = true;
    $.each($(".validate", this), function () {
        if ($(this).val().length == 0) {
            $(this).css("border", "1px solid red");
            valid = false;
        }
    });

    var frm = this;
    var formTosubmit = $(this).attr('id');


    var jsonCategoria = JSON.stringify(categoria),
        jsonFeed = JSON.stringify(feed),
        url = "xxxxxxxxxx/feeds/web/ajax.php";
    if (jsonCategoria != '' && jsonFeed != '') {
        var posting = $.post(url, {
            im_core: 'updateCategorias',
            Categorias: jsonCategoria,
            xmlFeeed: jsonFeed,
            idFeed: 11
        }).done(function (data) {
            if (data == 1) {
                valid = true;
                alert('#' + frm.id);
                frm.submit()
            } else {
                alert("Check the form");
            }
        });
    }
});

Answer 2

My approach would be below

1. write ajax call

   $request = $ajax ( ... )

   do not write .done or success: parameter within ajax here

2. send a value in callback from ajax URL which have true or false value

    $request.done(function(resp) { if ( resp.parameter === true ) $('#formID').submit(); }); $request.fail( function () { alert('ajax fails'); }); 

---

Alternative : use dataFilter: parameter in $.ajax added in jquery 1.5

demo code :

$response = $.ajax( {
    .....
    dataType: 'JSON',
    dataFilter: function(result, type) {
            // console.group('DataFilter');
            // console.log(result);
            // console.log(type);
            // console.groupEnd();
            if (type === 'JSON') {
                var parsed_data = $.parseJSON(result);
                // console.info('Parsed Data');
                // console.log(parsed_data);   
                // code to pre-filtering function to sanitize the response.
                $finalThing = JSON.stringify({ everyThing : true });
                return $finalThing;
            } // end of if
        } // end of DataFilter
}); // end of $.ajax

$response.done (function(resp) {
    // here now `resp` will have $finalThing which comes from dataFilter
    if( resp.everyThing == true ) { $('#formId').submit(); }
});

dataFilter Reference

This is a pre-filtering function to sanitize the response. You should return the sanitized data. The function accepts two arguments: The raw data returned from the server and the 'dataType' parameter.

Answer 3

In your called php, did you try simply us an echo ?

Xavier