Ajax Multiple Forms with different Success functions

Question

Thanks to help on StackOverflow I was able to validate and submit two forms to different action pages. I need to have the success functions change depending on which form was submitted.

This is my javascript:

$("form").each(function() {
$(this).validate({
    submitHandler: function(form) {
        var $form=$(this)
        var data= $form.serialize()

        $.ajax({
            type    : 'POST',
            url     : $(form).attr('action'),
            data    : $(form).serialize(),
            cache   : false,
            dataType: 'text',
            success: function(data){
                    },
        });
        return false; // Temporary
    }
});

This is success for form 1:

 $("#e1").prepend(data);
 var magnificPopup = $.magnificPopup.instance; 
 magnificPopup.close();

This is success for form 2:

$("#messageTran").html(data);
$("#messageTran").hide();
$("#messageTran").fadeIn(1500);

What is the best way for me to achieve this? I am very new to javascript and haven't been able to find an answer for this. I have tried passing a form attribute with an if else statement, but have had no luck. Thank you in advance.

score 2 · Accepted Answer · edited May 23 '17 at 10:32

As you know, each action page will echo information back to the main page, which is available inside the AJAX success: function.

You can add a "header" to the returning data that identifies which action page is sending the data, then use an IF / ELSE structure to perform the appropriate action.

For example, action page first.php can send this text:

echo '1~This is from first.php';

In the success function, you can strip off that "header" character:

var hh = data.slice(0,1);
var therest = data.slice(2);
if (hh == 1) {
    $("#e1").prepend(therest);
    var magnificPopup = $.magnificPopup.instance; 
    magnificPopup.close(); 
} else {
    $("#messageTran").html(therest);
    $("#messageTran").hide();
    $("#messageTran").fadeIn(1500);
}

jsFiddle Demo

In response to a question re using JSON instead of a string that is manually parsed:

Of course one could use JSON, same principle. But much more challenging to explain in a concise answer. And for the JSON beginner, a significantly larger challenge than just using the above approach -- at least, it certainly was for me at first. Since the principle is the same, this is how I chose to communicate the concept.

For those seeking a demo that uses JSON, I can recommend these sources:

http://www.fourfront.us/blog/store-html-table-data-to-javascript-array

http://blog.kevinchisholm.com/javascript/associative-arrays-in-javascript

http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/

jquery AJAX and json format

Passing an array from PHP to Javascript using JQuery & JSON

http://xoops.org/modules/news/article.php?storyid=5103

That worked perfectly! I did not know about the slice function. I very much appreciate your help. — DROTH, Sep 03 '14 at 13:25
In fact, you could have used slice, substring or substr -- all three would work. See Ben Nadel's article for more. http://www.bennadel.com/blog/2159-using-slice-substring-and-substr-in-javascript.htm — cssyphus, Sep 03 '14 at 19:06
To be honest, this does not seem like a very clean solution. He needs to map the different forms to numbers now. Is there anyway to do this with a key:value solution? E.g. a JSON object instead of a String? — Joe Eifert, Feb 20 '15 at 13:57
@Johannes See addition to my answer. But please feel free to communicate an answer of your own -- I've earned hundreds of points myself by adding additional contributions to long-closed answers. — cssyphus, Feb 20 '15 at 16:39

Ajax Multiple Forms with different Success functions

1 Answers1