How to send specific data from Django Form with POST request in AJAX?

Question

So i am currently working on Django project that form contains two submit button. form contain 3 field(contact number, contact name, message) and two button(search , send). after send button click i just want to send contact_number field and message field with ajax post request . but it's send all field with ajax request. Can you help me how to send specific field data with ajax post request.

form image

ajax script while ajax request i only add 3 field in data but i got all field in my post request .

var KTLoginGeneral = function () {

    // var success= $('#success');
    // var error = $('#fail');
    var handleSignInFormSubmit = function () {
            $('#send_msg_submit').click(function (e) {
                e.preventDefault();
                var btn = $(this);
                var form = $(this).closest('form');
                console.log("send submit");
                form.validate({
                    rules: {
                        number: {
                            required: true,
                        },
                        message: {
                            required: true
                        }
                    }
                });
                if (!form.valid()) {
                    return;
                }
                btn.addClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', true);
                form.ajaxSubmit({
                    type: 'POST',
                    url: 'msg/single',
                    data: {
                        number: $('#number').val(),
                         message: $('#message').val(),
                        csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
                    },
                    success: function (response, status, xhr, $form) {
                        // similate 2s dela
                        console.log(response);
                        var result = response['success'];

                        if (result) {
                            btn.removeClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', false);
                            error.hide();
                            success.show();
                            success.text(response['error_msg']);
                            $('#message_form').resetForm();
                        } else {
                            console.log("else error");
                            success.hide();
                            error.show();
                            error.text(response['error_msg']);
                            setTimeout(function () {
                                btn.removeClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', false);
                            }, 2000);
                        }
                    },
                    error(response, e) {
                        btn.removeClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', false);
                        console.log("error");
                        success.hide();
                        error.show();
                    }
                });
            });

            $('#search').click(function (e) {
                e.preventDefault();
                var btn = $('#search');
                var form = $(this).closest('form');
                var search_name = $('#search_name');

                form.validate({
                    rules: {
                        search_name: {
                            required: true,
                        },
                    }
                });
                if (!form.valid()) {
                    return;
                }
                btn.addClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', true);
                form.ajaxSubmit({
                    type: 'POST',
                    url: 'msg/single',
                    data: {
                        search_name: search_name.val(),
                        csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
                    },
                    success: function (response, status, xhr, $form) {
                        console.log(response);
                        var result = response['success'];

                        if (result) {
                            btn.removeClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', false);
                             $('#kt_modal_1').on('show.bs.modal', function (event) {
                                  var button = $(event.relatedTarget);// Button that triggered the modal
                                  var recipient = button.data('whatever');// Extract info from data-* attributes
                                  var modal = $(this);
                                  modal.find('.modal-title').text('Search Result');
                                  modal.find('.modal-body input').val(recipient)

                                });
                        } else {
                            console.log("else error");
                            success.hide();
                            error.show();
                            error.text(response['error_msg']);
                            setTimeout(function () {
                                btn.removeClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', false);
                            }, 2000);
                        }
                    },
                    error(response, e) {
                        console.log("error");
                        success.hide();
                        error.show();
                        btn.removeClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', false);
                    }
                });
            });
 };

    // Public Functions
    return {
        // public functions
        init: function () {
            handleSignInFormSubmit();
        }
    };
}();
// Class Initialization
jQuery(document).ready(function () {
    KTLoginGeneral.init();
});

but when i print post request in my view it contain all data

<QueryDict: {'csrfmiddlewaretoken': ['EvwkSZPrJYPTHDqKKG0jpfGq98FjIGsM6P83BQ9MGDOxvf0psum1VBZ3IU71XRwh'], 'number': ['8264056065'], 'search_name': [''], 'message': ['hello']}>

expected output

<QueryDict {'csrfmiddlewaretoken': ['EvwkSZPrJYPTHDqKKG0jpfGq98FjIGsM6P83BQ9MGDOxvf0psum1VBZ3IU71XRwh'], 'number': ['8264056065'], 'message': ['hello']}>

but i don't need search_name in my post request.

Does this answer your question? [Passing list of values to django view via jQuery ajax call](https://stackoverflow.com/questions/11176594/passing-list-of-values-to-django-view-via-jquery-ajax-call) — metatoaster, May 15 '20 at 04:34
No. but i update my question just look at once if you get any idea. — Meet, May 15 '20 at 04:39
The idea is to call `$.ajax()` directly, without going through the `form.ajaxSubmit` indirection which may in fact does other things that you don't want, especially how much the code attempted to override the default behavior. — metatoaster, May 15 '20 at 04:47
you are right with i need to call with `$.ajax` . Thanks for answer . — Meet, May 15 '20 at 04:52

score 0 · Answer 1 · answered May 15 '20 at 04:50

0

request.POST is for form-encoded content. For JSON, you should access the plain body directly:

json_object = json.loads(request.body)`

answered May 15 '20 at 04:50

ahmed hlaimi

51
6

problem with my ajax call where i use `form.ajaxSubmit` . it's send all form data i just need to call with `$.ajax()`. thanks for answer . – Meet May 15 '20 at 04:55

How to send specific data from Django Form with POST request in AJAX?

1 Answers1