Ajax form within eModal does not submit

Question

I use eModal to call for a modal remotely via ajax. Although within the modal I have a form and the javascript code does not listen to it and thus it doesn't post. My codes are as follows;

eModal and Ajax for the form;

    $(document).ready(function() {

    // process the PROJECT UPDATE form  
    $('#proj-edit').submit(function(event) {

    // get the form data
    var formData = {
        'projID'            : $('input[name=projID]').val(),
        'projname'          : $('input[name=projname]').val(),
        'projstart'         : $('input[name=projstart]').val(),
        'projend'           : $('input[name=projend]').val(),
        'projhotel'         : $('input[name=projhotel]').val(),
        'projcity'          : $('input[name=projcity]').val(),
        'projstatus'        : $('#projstatus').val()
    };

    if (formData.projname == ''      || 
        formData.projstart == ''     || 
        formData.projend == ''       || 
        formData.projhotel == ''     || 
        formData.projcity == '') {

        return false;
    }

    // process the form
    $.ajax({
        type        : 'POST',
        url         : 'inc/prjedit.ajax.php',
        data        : formData,
        dataType    : 'json',
        encode      : true
    })
        // using the done promise callback
        .done(function(data) {

            // log data to the console so we can see
            console.log(data); 

            // here we will handle errors and validation messages
            if ( ! data.success) {

            } else {

                $('#proj-edit').trigger('reset');
                swal("Success!", "Edit success!", "success");
            }
        })

        // using the fail promise callback
        .fail(function(data) {

            // show any errors
            console.log(data);
        });
    event.preventDefault();
});

$('button[id=demo]').click(function() {
        var value = $(this).val();
        ajaxDemo(value)
    });

    function ajaxDemo(value) {
        var title = 'Ajax modal';
        var params = {
            size: eModal.size.lg,
            title: title,
            type: 'GET',
            url: 'inc/demo.ajax.php?pID='+ value
        };

        eModal.setEModalOptions({ 
            loadingHtml: '<div class="text-center"><span class="fa fa-circle-o-notch fa-spin fa-5x text-primary"></span></div>',
        });

        return eModal
            .ajax(params);
    }

});

The modal content is rather simple;

<form class="form" method="POST" action="" id="proj-edit" name="proj-edit">
// the input fields are here. Although since it is too long, I did not include them in here.
<button type="submit" class="btn btn-info" name="update-prj">Register</button>
</form>

I should note that the JavaScript code is in a different document named magic.js, the modal works although it does not submit the form. What am I missing here or what am I doing wrong?

---

The console log has this to say about all this;

(When eModal opens ->) XHR finished loading: GET "http://localhost/parantez/inc/demo.ajax.php?pID=301".k.cors.a.crossDomain.send @ jQuery-2.1.4.min.js:4n.extend.ajax @ jQuery-2.1.4.min.js:4n.fn.load @ jQuery-2.1.4.min.js:4ajax @ eModal.js:336ajaxDemo @ magic.js:270(anonymous function) @ magic.js:253n.event.dispatch @ jQuery-2.1.4.min.js:3r.handle @ jQuery-2.1.4.min.js:3
(When form is submitted ->) Navigated to http://localhost/

---

This issue has now been solved thanks to this post. Thank you very much for taking your time to answer, I highly appreciate your input. Kudos to all of you.

Answer 1

you are passing javascript object to php which is not valid in ajax request

use JSON.stringify() to convert json object into string and inside php use json_decode function to make object of json ...

like this

$.ajax({
    type        : 'POST',
    url         : 'inc/prjedit.ajax.php',
    data        : JSON.stringify(formData),
    dataType    : 'json',
    encode      : true
})

if you don't want to send json data then use formData to send data with ajax same as from submission like that

data = new FormData();
data.append('projID', $('input[name=projID]').val());

do this for all and then simply pass data to ajax function like this

$.ajax({
    url: 'http://example.com/script.php',
    data: data,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function(data){
       alert(data);
    }
});

ok hope this will help ...