Используя предварительно заполненную форму, отправьте только измененные поля

Question

У меня есть html-форма, которая использует выбранные и текстовые входы. Форма заполняется значениями по умолчанию. Как я могу представить только те входы, которые были изменены пользователем по их значениям по умолчанию? Обратите внимание, что эта страница должна храниться во встроенной системе с ограниченным пространством, поэтому использование библиотеки javascript не может быть и речи.

Пример 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> 

Для того, чтобы быть ясно, входы, что пользователь не меняется, не должен отображаться в запросе POST, когда форма была отправлена.

Answer 1

Согласно предложению Бармара использовать массив для отслеживания значений, которые были изменены, это решение, с которым я столкнулся, и он работает.

Вот это ЯШИ:

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> 

Это работает, потому что элементы формы, которые заблокированы не включены в запросе POST. Спасибо всем за их предложения.

Answer 2

Если вы можете использовать HTML5, вы можете использовать атрибут placeholder, example. Имейте в виду, что это не будет работать с более старыми браузерами, такими как IE6-8.

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

Если вы не можете использовать то, что вам придется сделать обнаружить на подчиненной форме с яваскрипт и проверить значение объектов ваши отправляют. Другой вариант заключается в том, чтобы иметь метку вашего текста предварительного просмотра и скрывать его, когда выбраны поля ввода или содержат значение, которое не является пустым.

Answer 3

метод waldol1 работает. Здесь я делаю предложение и предлагаю альтернативный путь.

Улучшение:

Для чистого кода, просто использовать "добавить (это)" для каждого входного элемента.

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

Затем в функции Add(), просто добавьте еще одну строку, чтобы получить имя элемента, щелкнул

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

Альтернативное решение:

Я не представление формы классическим способом; Я просто использую элементы ввода и делаю вещи с помощью Javascript. Я не забочусь об отключении элементов формы и не хочу полагаться на это как на флаг. Вместо этого я использую объект JS для хранения измененных переменных, а затем просто запускаю объект, когда я создаю свои параметры (в моем случае, отправлять через запрос AJAX).

Определите глобальный объект «tosubmit» (вы можете использовать массив, если хотите).

var tosubmit = new Object(); 

Для любого элемента ввода Я хочу обновляемым, я называю добавить (это), когда есть изменения:

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

Функция JS добавляет измененный элемент в мой временный объект хранения.

function add(e) { 

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

Когда я готов, я создаю параметры для моего обновления AJAX. В моем случае я запускаю функцию с идентификатором, в моем случае. Я запускаю объект tosubmit, и если обновление выполнено успешно, я очищаю его, готовый к другому использованию.

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


}