Using prepopulated form, submit only changed fields

Question

I have an html form that uses select and text inputs. The form comes pre-populated with default values. How can I submit only the inputs that were changed by the user from their default values? Note that this page is to be stored in an embedded system with limited space, so using a javascript library is out of the question.

Example html:

<form>
    <input type="text" name="field1" value="value1" />
    <input type="text" name="field2" value="value2" />
    <select name="field3">
        <option value="option1" select>Option 1</option>
        <option value="option2" select>Option 2</option>
    </select>
    <input type="Submit" />
</form>

To be clear, inputs that the user does not change should not show up in the POST request when the form is submitted.

What have you tried so far? Basically, you should add `onchange` handlers to each of the input elements, and adds it to an array of changed elements. Then write an `onsubmit` handler that collects the values of all the elements in that array, serializes the values, and submits them to the server. — Barmar, May 20 '13 at 23:03
I think that should provide enough for you to try to write it yourself. If you can't get it working, come back and show your code. — Barmar, May 20 '13 at 23:04

score 8 · Accepted Answer · edited Oct 24 '15 at 00:40

As per Barmar's suggestion to use an array to track which values have changed, this is the solution I have come up with and it works.

Here is the js:

var tosubmit = []
function add(name) {
    if(tosubmit.indexOf(name) == -1)
        tosubmit.push(name);
}

function is_changed(name) {
    for(var k = 0; k < tosubmit.length; k++)
        if(name == tosubmit[k])
            return name && true;
    return false;
}

function before_submit() {
    var allInputs = document.getElementsByTagName("input");
    var allSelects = document.getElementsByTagName("select");
    for(var k = 0; k < allInputs.length; k++) {
        var name = allInputs[k].name;
        if(!is_changed(name))
            allInputs[k].disabled = true;
    }
    for(var k = 0; k < allSelects.length; k++) {
        var name = allSelects[k].name;
        if(!is_changed(name))
            allSelects[k].disabled = true;
    }
}

html:

<form onSubmit="beforeSubmit()">
    <input type="text" name="field1" value="value1" onchange="add('field1')" />
    <input type="text" name="field2" value="value2" onchange="add('field2')" />
    <select name="field3" onchange="add('field3')">
        <option value="option1" select>Option 1</option>
        <option value="option2" select>Option 2</option>
    </select>
    <input type="Submit" />
</form>

This works because form elements that are disabled are not included in the POST Request. Thanks everyone for their suggestions.

score 2 · Answer 2 · answered May 20 '13 at 23:10

If you can use HTML5, you can use the placeholder attribute, example. Keep in mind this won't work with older browsers like IE6-8.

<form>
<input type="text" placeholder="placeholder text" name="field1" value="" />
<input type="Submit" />
</form>

If you can't use that, you'll have to do a detect on form submit with javascript and check the value of the objects your submitting. The other option is to have a label of your preview text and hide it when input boxes are selected or contain a value that isn't empty.

not a great solution; the inputs will still be sent via POST, just with "" (blank values) which was not what the asker wanted. — James Stott, May 21 '13 at 15:19

score 0 · Answer 3 · answered Feb 07 '18 at 18:20

waldol1's method works. Here I'm making a suggestion, and offering an alternate way.

Improvement:

For cleaner code, just use "add(this)" for each input element.

<input onchange="add(this)" />

Then, in the add() function, just add one more line to get the name of the element being clicked

function add(e) {
    var name = e.name;
// do stuff
}

Alternate solution:

I'm not submitting a form the classic way; I'm just using input elements and doing stuff with Javascript. I don't care about disabling form elements, and don't want to rely on that as a flag. Instead I'm using a JS object to store my changed variables, then I just run through the object when I build my parameters (in my case, to submit via AJAX request).

Define a global "tosubmit" object (you could use an array if you want).

var tosubmit = new Object();

For any input element I want updateable, I call add(this) when there's a change:

<input onchange="add(this)" />

The JS function adds the changed element to my temporary storage object.

function add(e) {

    // Store the element and it's value, ready for use later.
    tosubmit[e.name] = e.value;
}

When I'm ready, I build parameters for my AJAX update. In my casI run the function with an ID, in my case. I run through the tosubmit object, and if the update is successful, I clear it out, ready for another use.

function sendUpdate(id) {

    // Start building up my parameters to submit via AJAX to server.
    var params = "id="+encodeURIComponent(id);

    // Run through the tosubmit object, add any updated form elements.
    for (var i in tosubmit) {
        params = params + "&" + i + "=" + encodeURIComponent(tosubmit[i]);
    }

    // (Do other stuff, build my http request, etc)

    // Eventually submit params with the http request
    http.send(params);


}

Using prepopulated form, submit only changed fields

3 Answers3

Linked