Сохранять форму при изменении любого из значений формы
Вот как я сейчас сохраняю свою форму каждые 2 минуты. Я хочу увеличить это, чтобы экономить чаще или даже лучше, если он будет сохраняться каждые 2 минуты, а также сразу после того, как пользователь закончит вносить какие-либо изменения.
Моя форма в основном содержит элементы формы Radio, Textarea, но было бы неплохо, если бы она отслеживала все элементы, если не большинство.
Есть идеи, как мне это сделать?
<script>
window.setInterval(saveForm, (1000*60*2)); // 1000 millisecons = 1 sec
function saveForm()
{
var actionurl = document.getElementById("myform").action;
var postdata = $('#myform').serializeArray();
$.ajax({
method: "POST",
url: actionurl,
data: postdata
}).done(function( msg ) {});
}
</script>
HTML
<form action = "/myform/complete/15" id = "myform" method = "post" accept-charset = "utf-8">
<div class = "view-wrap">
<div class = "view-item">
<div class = "row">
<div class = "col-md-3">
<span style = "font-size: 14px;">1. This is first statement for a new assesment.</span>
</div>
<div class = "col-md-9">
<div class = "row">
<div class = "col-md-3">
<div class = "answers_opts_div">
<ul class = "list-unstyled" id = "answerslist_856">
<li>
<input type = "radio" id = "answer_radio_856_1" name = "answers[856]" value = "5" />
<label for = "answer_radio_856_1" style = "color:#449D44">Strongly Agree</label>
</li>
<li>
<input type = "radio" id = "answer_radio_856_2" name = "answers[856]" value = "4" />
<label for = "answer_radio_856_2" style = "">Agree</label>
</li>
<li>
<input type = "radio" id = "answer_radio_856_3" name = "answers[856]" value = "3" />
<label for = "answer_radio_856_3" style = "">Undecided</label>
</li>
</ul>
</div>
</div>
<div class = "col-md-9">
<textarea name = "answer_comments[856]" rows = "5" data-answerslist = "answerslist_856" class = "form-control answercomments" placeholder = "comment required" style = "border-width:4px;"></textarea>
</div>
</div>
</div>
</div>
<div class = "view-item">
<div class = "row">
<div class = "col-md-3">
<span style = "font-size: 14px;">1. This is the second statement for a new assesment.</span>
</div>
<div class = "col-md-9">
<div class = "row">
<div class = "col-md-3">
<div class = "answers_opts_div">
<ul class = "list-unstyled" id = "answerslist_857">
<li>
<input type = "radio" id = "answer_radio_857_1" name = "answers[857]" value = "5" />
<label for = "answer_radio_857_1" style = "color:#449D44">Strongly Agree</label>
</li>
<li>
<input type = "radio" id = "answer_radio_857_2" name = "answers[857]" value = "4" />
<label for = "answer_radio_857_2" style = "">Agree</label>
</li>
<li>
<input type = "radio" id = "answer_radio_857_3" name = "answers[857]" value = "3" />
<label for = "answer_radio_857_3" style = "">Undecided</label>
</li>
</ul>
</div>
</div>
<div class = "col-md-9">
<textarea name = "answer_comments[857]" rows = "5" data-answerslist = "answerslist_857" class = "form-control answercomments" placeholder = "comment required" style = "border-width:4px;"></textarea>
</div>
</div>
</div>
</div>
</div>
</form>
Это поможет вам понять предложение .on ('input'), а также другие способы достижения этого stackoverflow.com/questions/6458840/…
@GerardoBLANCO Я добавил свою форму выше.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Согласно другим комментариям, лучше всего прослушивать события input и change, запускаемые любыми элементами ввода в форме. Просто привяжите этот прослушиватель событий к saveForm, и все будет в порядке:
// Save form every 2 minutes
window.setInterval(saveForm, 1000 * 60 * 2);
// Listen to input or change events to save form
// Might want to throttle your callback here
$('#myform :input').on('change input', saveForm);
function saveForm() {
// The rest of your logic
}
Причина, по которой прослушиваются оба события input и change, заключается в совместимости браузера: Internet Explorer не поддерживает запуск события oninput для флажков и переключателей..
Недостатком является то, что это приводит к очень частому срабатыванию saveForm, поэтому улучшенная версия будет ограничивать обратный вызов, запускаемый событием input / change, чтобы он не срабатывал чрезмерно. Это можно сделать с помощью плагин jQuery debounce / throttle:
// Listen to input or blur events to save form
// Only fire once every 250ms
$('#myform :input').on('change input', $.debounce(saveForm, 1000));
Приведенный выше код устраняет события изменения и ввода, поэтому данные формы отправляются только каждую секунду. Чтобы определить, подходит ли вам лучше дребезг или дроссель, посмотрите эту очень интересную визуализацию: http://demo.nimius.net/debounce_throttle/
Да, чрезмерная стрельба - это моя главная проблема, поскольку я собирался уменьшить таймер, чтобы говорить каждые 30 секунд или около того, но я подумал, что это не очень хорошая идея.
@NoNice В этом случае всегда используйте функцию противодействия / дросселирования, которая помогает уменьшить количество обращений к серверу. Предложенный мной плагин очень широко используется и определенно вам очень поможет :)
Спасибо - я просто собираюсь проверить это. Повторные миллисекунды ... 1000 миллисекунд = 1 секунда ... 60 секунд = 1 минута ... так каждые 2 минуты ???
@NoNice Ой, ваши расчеты интервалов на самом деле верны :) Я обновил свой ответ
Этому плагину почти 8 лет. Я использую JQuery 1.10.1. Вы все еще рекомендуете этот плагин или любую альтернативу? Я попытался выполнить поиск в Google, но мне кажется, что я нашел loadash или другие решения?
Было бы много способов сделать то, что вы пытаетесь достичь. Я думаю, что хорошим решением было бы добавить прослушиватель событий, который будет запускаться в форме, когда пользователь взаимодействует с ним.
С этим вы можете использовать setTiemout и clearTiemout.
Использование keyup для текстовой области и click для остальной части формы установит тайм-аут в одну секунду для функции сохранения. Если пользователь запускает другое событие до запуска функции, timeOut будет сброшен и сброшен.
Надеюсь это поможет :)
function saveForm()
{
console.info('Save');
var actionurl = document.getElementById("myform").action;
var postdata = $('#myform').serializeArray();
$.ajax({
method: "POST",
url: actionurl,
data: postdata
}).done(function( msg ) {});
clearTimeout(inter);
}
var inter = setTimeout(saveForm, (1000));
var form = document.getElementById('myform');
form.addEventListener('click',function(){
clearTimeout(inter);
inter = setTimeout(saveForm, (1000));
});
form.addEventListener('keyup',function(){
clearTimeout(inter);
inter = setTimeout(saveForm, (1000));
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action = "/myform/complete/15" id = "myform" method = "post" accept-charset = "utf-8">
<div class = "view-wrap">
<div class = "view-item">
<div class = "row">
<div class = "col-md-3">
<span style = "font-size: 14px;">1. This is first statement for a new assesment.</span>
</div>
<div class = "col-md-9">
<div class = "row">
<div class = "col-md-3">
<div class = "answers_opts_div">
<ul class = "list-unstyled" id = "answerslist_856">
<li>
<input type = "radio" id = "answer_radio_856_1" name = "answers[856]" value = "5" />
<label for = "answer_radio_856_1" style = "color:#449D44">Strongly Agree</label>
</li>
<li>
<input type = "radio" id = "answer_radio_856_2" name = "answers[856]" value = "4" />
<label for = "answer_radio_856_2" style = "">Agree</label>
</li>
<li>
<input type = "radio" id = "answer_radio_856_3" name = "answers[856]" value = "3" />
<label for = "answer_radio_856_3" style = "">Undecided</label>
</li>
</ul>
</div>
</div>
<div class = "col-md-9">
<textarea name = "answer_comments[856]" rows = "5" data-answerslist = "answerslist_856" class = "form-control answercomments" placeholder = "comment required" style = "border-width:4px;"></textarea>
</div>
</div>
</div>
</div>
<div class = "view-item">На всех keyup и click? Сервер будет засыпан запросами ...
Да, этого я тоже хочу избежать - иначе я мог бы просто уменьшить таймер в моем исходном коде выше, чтобы он говорил каждые полсекунды.
Да, я не знаю, хорошее ли это решение, но я пошел с этим -> «Я хочу увеличить это, чтобы чаще экономить»
@NoNice, поэтому вы хотите сэкономить, если после любого изменения прошло x количество времени
Можете ли вы добавить тестовую форму