X-Editable get value of unedited input field

Question

I currently have a form that I am using as a view/edit contact page. Instead of submitting values each time a single field is edited, I am trying to use a save button that would compile an object of values from the form and submit them to the database. The problem I am running into is that when I try to get the value of an input box, if that input field hasn't been edited, the value that comes back is ""

$('#view-contact-first-name').editable("getValue") 

I tried looking through x-editables documentation and tried using the savenochange: true, option but that didn't solve my problem either. Does anyone happen to know what I may be doing wrong. (Can post more code if needed)

 $('#view-contact-first-name').editable({
        type: 'text',
        name: 'FirstName',
       // url: '',
        emptytext: "Enter First Name",
        savenochange: true,
        validate: {
            view_contact_first_name: function (v) { if (v == '') return 'Required field!' }
        },
        display: function () {
            $(this).text(contact.FirstName);
        }
    });

Answer 1

What you are trying to do would defeat the purpose of x-editable.

Since x-editable allows only one input to be changed at a time, it makes sense to save only that input's value.

Your solution should be as follows, though a bit hacky:

HTML

<div id="containAllEditable"><!-- lots of x-editable inputs inside --></div>

JS

$('#containAllEditable .editable').editable({
    type: 'text',
    name: 'FirstName',
   // url: '',
    emptytext: "Enter First Name",
    savenochange: true,
    validate: {
        view_contact_first_name: function (v) { if (v == '') return 'Required field!' }
    },
    display: function () {
        $(this).text(contact.FirstName);
    },
}).on('save',function(){
    /*
    *  Event triggered when save is successful
    */
    var dataJson;
    $('#containAllEditable .editable').each(function(){
         /* We build a JSON list of all input found in the div */
         dataJson[$(this).attr('data-name')] = $(this).editable('getValue');
    });

    /* Do your ajaxy stuff and save all the form's variables */
    $.ajax({
         url:'url/to/saveform',
         data: dataJson,
    })
});