Using AJAX to submit a form

Question

I am using Ajax with JQUERY to submit a form. For some reason I cannot seem to get the AJAX to run. The form is within a fancybox 2 modal, so I think that may have something to do with it, but I cannot figure it out. Is there something I have to do specific to making an AJAX call within a fancybox modal?

My Code: collection_create_input IS TRUE

$(".edit-post").submit(function(e) {

    var dataString = $(this).serialize();


if (collection_create_input == "true") {
    $.ajax({  
        type: "POST",  
        url: "checkcollection.php",  
        data: dataString,
        async: false,
        success: function(data) {
          $(this).parent(".modal-content").find("#field1secondary").show();
        }
    });
}

        e.preventDefault();

    });

NOTE:

Check http://stackoverflow.com/a/14343547/1055987 or http://stackoverflow.com/a/16956120/1055987 or http://stackoverflow.com/a/11299547/1055987 for reference and code samples — JFK, Jan 30 '14 at 18:30

score 0 · Answer 1 · answered Jan 30 '14 at 15:04

0

Are you making sure also to include the jQuery library?

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

If you are using ajax in this way, you have to include it, else it won't run.

answered Jan 30 '14 at 15:04

TheYaXxE

4,196
3
22
34

score 0 · Answer 2 · answered Jan 30 '14 at 15:06

The very first thing to note here, is

Is collection_create_input true when you send the ajax request?

Because if it is false, it will not execute. And the ajax request won't be made as you want it to be sent.

Second thing that you should worry about is the usage of serialize() method.

What you should try is this:

$(this).serialize();

As it is stated here in the document: http://api.jquery.com/serialize/

score 0 · Answer 3 · answered Jan 30 '14 at 15:13

What does the html form look like? Is the content of the fancybox dialog being generated at the time the dialog is opened or is a hidden div that is being displayed. I regularly have forms in a fancybox 2 dialog that work.

You may want to try using the jquery on event and bind to a target. This would bind to the body, but watch for any submit event that occurs with forms that have the class .edit-post. That way you can load the form anytime and it will still be processed.

$("body").on("submit", ".edit-post", function(e) {

    var dataString = $this.serialize();


if (collection_create_input == "true") {
    $.ajax({  
        type: "POST",  
        url: "checkcollection.php",  
        data: dataString,
        async: false,
        success: function(data) {
          $(this).parent(".modal-content").find("#field1secondary").show();
        }
    });
}

        e.preventDefault();

    });

score 0 · Answer 4 · answered Jan 30 '14 at 15:14

0

I recommend to use jquery form plugin

http://malsup.com/jquery/form/

While this can also be achieved via iframes but better would be this plugin.

answered Jan 30 '14 at 15:14

Innovation

1,514
17
32

score 0 · Answer 5 · answered Jan 30 '14 at 15:14

In browser console, check for XHR request and response. This should help in debugging the problem. If there is no response. make sure your jquery is working for this function and there's no conflict. Also, try alert("working"); after every code line. This should help you to find the broken part.

score 0 · Answer 6 · answered Jan 30 '14 at 15:23

Try to return false as follows. Also can you update your question with HTML markup?

$(".edit-post").submit(function(e) {
    var dataString = $(this).serialize();
    if (collection_create_input == "true") {
    $.ajax({  
        type: "POST",  
        url: "checkcollection.php",  
        data: dataString,
        async: false,
        success: function(data) {
          $(this).parent(".modal-content").find("#field1secondary").show();
        }
    });
    return false;
    }
});

Using AJAX to submit a form

6 Answers6