Newbie to Javascript: how to avoid sending data that have not changed?

Question

I'm a newbie Javascript learner and I want to post serialized data of input checkboxes. The data are sent to the server in order to update the corresponding field in SQL table. Later, the user can review the selections he made the first time and deselect some checkboxes. If I understand well, only the selected items will be sent, not the unselected ones. How can I send all the info I need to update the newly selected items and the newly unselected ones?

The only solution I found is to make 2 updates: the first resets to 0 all the rows and the second one sets to 1 the selected items (newly selected or not) that are sent in the serialized array. Is there a more optimal way to do the job? Ideally, I would update only the data that have changed. Is it possible?

Regards, Patrick

You don't submit the form every time there is a change, you just submit it once when they click the submit button. Is there a special reason to update the database live while they're filling out a form? — Sam Eaton, Mar 28 '15 at 21:09
Sorry if I was not clear. I do submit the form only once they click Submit. But the question remains: how to update only the rows that correspond to the checkboxes that have changed (newly selected and newly unselected)? — Patrick, Mar 28 '15 at 21:12

score 1 · Accepted Answer · edited May 23 '17 at 11:56

If I understand it correctly you can filter the checkboxes and then you can add the unselected boxes to the parameters too.

I've found the code for that here at SO. See this question.

The demo below and here a jsfiddle is doing a ajax post only if the user changed the data. Not sure if this is what you want.

(The demo at SO is a bit modified because JSONP is required to get no CORS error.)

var data = "";

$('form').submit(function (evt) {
    evt.preventDefault();
    //console.log($(this).serialize());
    var formData = $(this).serialize();

    // source from this SO question https://stackoverflow.com/questions/10147149/how-can-i-override-jquerys-serialize-to-include-unchecked-checkboxes
    // include unchecked checkboxes. use filter to only include unchecked boxes.
    $.each($('form input[type=checkbox]')
        .filter(function (idx) {
        return $(this).prop('checked') === false
    }),

    function (idx, el) {
        // attach matched element names to the formData with a chosen value.
        var emptyVal = "off";
        formData += '&' + $(el).attr('name') + '=' + emptyVal;
    });
    
    console.log(formData);
    if ( data != formData ) { // check if user changed the data.
        $.ajax({
            url: 'http://jsfiddle.net/echo/jsonp/',
            type: 'POST',
            //data: formData, // this will work but for jsfiddle echo the code below is required.
            dataType: "jsonp",
            data: {
                json: JSON.stringify({
                    serialized: formData
                }),
                delay: 1
            },
            success: function(res) {
                console.log('posted: ', res);
            }
        });
    }
    
    data = formData;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label for="first">check1</label>
    <input name="first" id="first" type="checkbox" />
    <label for="second">check2</label>
    <input name="second" id="second" type="checkbox" />
    <label for="third">check3</label>
    <input name="third" id="third" type="checkbox" />
    <label for="fourth">check4</label>
    <input name="fourth" id="fourth" type="checkbox" />
    <input type="submit" value="update" />
</form>

Maybe I don't understand it correctly but I don't see why it can be useful to send all the checkboxes (after all the unselected items can be easily determined : they are the ones that are not selected!). My objective was to send only the items that were updated (selected or unselected) in order to do later a single SQL UPDATE and not two. Am I missing something? — Patrick, Mar 29 '15 at 17:03
Oh, OK, you're right. I've misunderstood what you were looking for. Now it's clear. Please have a look at the jsfiddle. I've updated it and now it should work for you. I'll update my answer later. — AWolf, Mar 29 '15 at 19:39
Thank you for all your help AWolf. I'm not sure the modified version is doing what I want though. For example, if checkboxes 1,2 and 4 were selected first time and you deselect the 2, I would expect in your console updated data as { second="off"} but it is { first="on", fourth="on"}. — Patrick, Mar 30 '15 at 14:33
As you wrote in your comment the `off` values can be easily determined. Everything that's not `on` is `off`. So in your example, the server can update your data so only first and fourth will be `on`. — AWolf, Mar 30 '15 at 14:37

Newbie to Javascript: how to avoid sending data that have not changed?

1 Answers1