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 the

Answer 1

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.

Answer 2

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);


}

Answer 3

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.