collect value only from the text input that have been changed

扶醉桌前 提交于 2019-12-13 18:19:38

问题


I have a html page that after ajax call show a lot of data rows, in every row i have input text with different value, the user can edit this text input and then press a button to do some calculate action.

How can I collect with javascript(jQuery) only this values that have been changed, and send them to php script. I search a simple way, not to save all big array of old values then compare with new values, Is there such solution?


回答1:


You can use the .data() function to keep a copy of their original values, then compare that against their values when submitting to make sure that only changed values are submitted.

var inputs = $('input[type="text"]').each(function() {
    $(this).data('original', this.value);
});

$('#form').submit(function(){
    inputs.each(function() {
        if ($(this).data('original') !== this.value) {
            // Do something for the changed value
        } else {
            // And something else for the rest.
        }
    });
});

See a demo of this here: http://www.jsfiddle.net/yijiang/twCE9/




回答2:


You can use the onChange event of the input field and collect the info in some hidden field or global array field for this.




回答3:


You bind to the change event for each data input and either store those name-value pairs in a global array or into hidden form fields.

An alternative would be to add a "changed" class to each field which was edited. Then when they submit the form, you could either create a new form with just those elements of class changed or remove the other elements from your form containing all the text inputs.

<input type="text" class="data_input" name="name1" value="value1" />
<input type="text" class="data_input" name="name2" value="value2" />
...
<input type="text" class="data_input" name="nameX" value="valueX" />

Then in your JS

$(document).ready(function() {
    $(".data_input").change(function() {
        $(this).addClass('changed');
    });

Or if you're willing to use a global array:

var changedArr = [];
$(document).ready(function() {
    $(".data_input").change(function() {
        changedArr.push({'name': $(this).attr('name'), 'value': $(this).val()});
    });


来源:https://stackoverflow.com/questions/4067180/collect-value-only-from-the-text-input-that-have-been-changed

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!