Sisyphus.js не преобразует входные атрибуты формы в одну строку для хранения в локальном хранилище браузера
Я надеюсь получить помощь по проблеме, с которой я столкнулся при использовании sisyphus.js для автоматического сохранения некоторых данных формы.
Я создаю контрольный список доступности wcag 2.O, который в основном представляет собой массивную форму, и я хотел бы сохранять данные формы при каждом нажатии клавиши.
Вы можете увидеть, что я получаю здесь... https://storage.googleapis.com/a11ypal.com/index.html
Когда я выбираю переключатель (пропуск, сбой или неприменимо), sisyphus сохраняет следующее в локальном хранилище.
[ID =wcagChecklist][имя =Accessibility_assessment_tool][ID =wcagChecklist_fail_1][имя =result_1]
Это сравнивается с тем, что хранится в локальном хранилище на демонстрационной странице sisyphus, когда выбран переключатель. http://sisyphus-js.herokuapp.com/
sample_formsample_formsample_form_color
... на демонстрационной странице sisyphus.js, по-видимому, объединяет входные атрибуты формы в одну строку для хранения пары ключ-значение в локальном хранилище.
Проблема в том, что каждый сделанный выбор сохраняется в виде новой пары значений ключа в локальном хранилище, а не просто обновляется значение пары kayvalue для имени группы. Надеюсь, что это имеет смысл!
Поэтому, если я выберу "не применимо", а затем выберу "пройдено" при обновлении страницы, "не применимо" будет выбрано снова. Локальное хранилище показывает, что две пары ключ-значение были сохранены, одна для "неприменимо" и одна для "передано".
Я не могу понять, что я делаю с этим неправильно, каждая кнопка имеет уникальный идентификатор, но имеет то же имя, что и другие кнопки в группе набора полей.
Мой файл JS включает в себя следующий код...
$(function() {
var form = $("#wcagChecklist");
$(form).sisyphus({
onSave:function() {
$('#dataPersisted').show().delay(700).fadeOut()},
onRestore: function() {
$('#dataRestored').show().delay(700).fadeOut()},
onRelease: function() {
$('#dataReleased').show().delay(700).fadeOut()}
}
)});
И это образец HTML...
<fieldset class='resultsRadioBtns wcagAResultsRadioBtns' data-number="1">
<legend class="sr-only">Result radio buttons for 1.1.1 – Non-text Content</legend>
<input tabindex="0" id="wcagChecklist_pass_1" class="passedButton passed wcagAPassed visible" type="radio" name="result_1" value="Passed" aria-checked="false" data-number="1">
<label for="wcagChecklist_pass_1">
<span>Pass <i class="fa fa-thumbs-o-up" aria-hidden="true"></i></span>
</label>
<input tabindex="0" id="wcagChecklist_fail_1" class="failed wcagAFailed visible" type="radio" name="result_1" value="Failed" aria-checked="false" data-number="1">
<label for="wcagChecklist_fail_1">
<span>Fail <i class="fa fa-thumbs-o-down" aria-hidden="true"></i></span>
</label>
<input tabindex="0" id="wcagChecklist_na_1" class="notApplicable visible wcagANotApplicable" type="radio" name="result_1" value="Not applicable" aria-checked="false" data-number="1">
<label for="wcagChecklist_na_1">
<span>Not applicable <i class="fa fa-ban" aria-hidden="true"></i></span>
</label>
<div class="form-group">
<label for="comments_1">Comments</label>
<textarea class="form-control bottomSpace commentFocus" id="comments_1" rows="3" data-ng-model="aComment1"></textarea>
</div>
</fieldset>
Пожалуйста помоги!
Крис