传递来自REST API的AJAX PUT请求的仅编辑的表单字段

Question

I have a form with several fields in it, on Save button click it will a trigger an AJAX request to update my data. Currently its only working if I fill all of the fields in the form for update because I'm passing the $('#field').val() , but what if I want to only update one of the field? How can I do it without requiring the rest of the field because I'm using this for multiple editing based on which row(s) of data I've selected to update

below is my code :

HTML :

    <form id="create_project" method="POST" enctype="multipart/form-data">{% csrf_token %}
        <div>
            <label>Priority:</label>
                <select id="priority_field">
                    <option selected="selected">Select Your Priority</option>
                    <option value="Low">Low</option>
                    <option value="Normal">Normal</option>
                    <option value="Medium">Medium</option>
                    <option value="High">High</option>
                    <option value="Critical">Critical</option>
                </select><br>
            <label>Assign To: </label>
                <select id="assign_to_field" onchange="filter_by_users();">
                    <option selected="selected">Select Your User</option>
                    <option value="None">None</option>
                    {% for user in selected_project.user.all %}
                        <option value="{{ user }}">{{ user }}</option>
                    {% endfor %}
                </select>
            <br>
            <label> Start Date:</label>
            <input type="date" class="form-control" id="start_date_field"><br>
            <label>Duration:</label>
            <input type="number" class="form-control" id="duration_field"><br>
        </div>
        <div class="modal-footer modal_styling">
            <button type="button" class="btn btn-primary" onclick="editForm()">Edit
            </button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel
            </button>
        </div>

    </form>

javascript :

// TASK MULTI EDIT
function editForm(){
    var selected_task = gantt.getSelectedTasks();
    for(var i = 0; i < selected_task.length; i++){
        var task = selected_task[i];
        var data = gantt.getTask(task);
        $.ajax({
                type: 'PUT',
                url: '/api/dashboard/workorder_detail/' + data.workorder_id + '/',
                data: { "id" : data.workorder_id,
                        "priority": $('#priority_field').val(),
                        "assign_to": $('#assign_to_field').val(),
                        "start_date": $('#start_date_field').val(),
                        "duration": $('#duration_field').val(),
                    },
                success: function () {
                    location.reload();
                },
                error: function (err) {
                alert("Failed");
                }
        })
    }
}

Any help is much appreciated, thanks.

Answer 1

First You should handle it which fields is changed then you can select for sending as parameter on ajax request. This is listener for which field has changed and add class name of 'has-changed'

function changeEvent() {
    if(!$(this).hasClass('has-changed'))
        $(this).addClass('has-changed');
}

This is set event for inputs

$('#create_project input,select').on('change',changeEvent);

Then you can select changed fields with below code

var postData = {};
    $('#create_project .has-changed').each(function (i,e) {
        var id = $(e).attr('id');
        var value = $(e).val();
        postData[id]=value;

    });

after then you add the postData in your ajax 'data' properties like this

$.ajax({
            type: 'PUT',
            url: '/api/dashboard/workorder_detail/' + data.workorder_id + '/',
            data: postData,
            success: function () {
                location.reload();
            },
            error: function (err) {
                alert("Failed");
            }
        })

EDIT : you should use below code before "editForm" function because this code didn't read from browser before click edit button, you can see it works after click and change any form item and click second time edit button in your code.

function changeEvent() {
        if(!$(this).hasClass('has-changed'))
            $(this).addClass('has-changed');
    }

$('#edit_form input,select').on('change',changeEvent);

// TASK MULTI EDIT
function editForm(){
    var selected_task = gantt.getSelectedTasks();



    var postData = {};
    $('#edit_form .has-changed').each(function (i,e) {
        var id = $(e).attr('id');
        var value = $(e).val();
        postData[id]=value;

    });
    for(var i = 0; i < selected_task.length; i++){
        var task = selected_task[i];
        var data = gantt.getTask(task);
        $.ajax({
                type: 'PUT',
                url: '/api/dashboard/workorder_detail/' + data.workorder_id + '/',
                data: postData,
                success: function () {
                   // location.reload();
                   console.log(postData);
                },
                error: function (err) {
                alert("Failed");
                }
        })
    }
}