Sisyphus stores each radio button as a new key value pair

[nedgip]

Hi,

I'm using sisyphus for to build an accessibility checklist which is basically a massive form and I would like to save the form data on each key press.

You can see what I'm getting at here...
https://storage.googleapis.com/a11ypal.com/index.html

When I select a radio button (pass, fail or not applicable) sisyphus saves the following to local storage.

[id=wcagChecklist][name=Accessibility_assessment_tool][id=wcagChecklist_fail_1][name=result_1]

Compared to what is stored in the local storage on the demo page.

sample_formsample_formsample_form_color

Does sisyphus convert the attributes of a form input to a string before saving to the local storage?

The problem is that every selection I make gets stored as a new kay value pair in local storage instead of the just updating the value. So if I select 'not applicable' and then select 'passed' when I refresh 'not applicable' is selected. Local storage seems to show both key value pairs have been stored. Hope that is making sense!

I can't work out what I'm doing wrong with it, each button has a unique id but shares the same name as the other buttons in the fieldset grouping.

My js file includes the following...

$(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()}
}
)});

And this is a sample of the 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>

Please help!

Chris

[simsalabim]

Chris, I didn't dig deep into the issue but don't see anything wrong with your example by the link you provided. All selections I made persisted correctly after I refreshed the page.

[nedgip]

Hi, Thanks so much for taking a look, I really appreciate it!

You can reproduce the issue by selecting 'not applicable' for one of the guidelines and then changing the selection to 'passed'. When you refresh the page 'not applicable' is selected. When I look at local storage I can see that both buttons have a key value pair and 'not applicable' seems to trump 'passed'.

When I looked at sisyphus.js demo page I can see only 1 record is stored for the radio buttons, changing the selection updates the value for the record.

Thanks again

Chris

[MrJack91]

Hi there

Any news to this issue? I can confirm the issue. Can't find some options to define the local storage key.
Like @nedgip said: in the demo page there are using a own key rule, so that this problem will not appear in the demo page. Badly the demo page uses a minified js script, so that showing the effective options is not that easy.

Thanks in advance
Michael

[MrJack91]

@nedgip I get it. You have to name your multiple-fields with the suffix []. Sadly this []-thing is not documented on the plugin site.

You will get a storage key like this:
[id=bt-form-basic][name=bt-form-basic][id=btc_setting_books_19][name=btc_setting_books[]]

So for working with checkboxes and radios you have additional to edit the source file:
in sisyphus.js edit the line 14, function getElementIdentifier() from:
return '[id=' + el.attr( "id" ) + '][name=' + el.attr( "name" ) + ']';
to:
return el.attr( "name" );

After that your key will look like this:
bt-form-basicbtc_setting_books[]

There was a commit, which adds the id to the identifier, which seems to be a very good idea. So you do this change you will maybe get problems, if you have the same form-/fields-name combo on the same page.
I will test my work, we will see it.

[Kreyco]

Hi @nedgip @MrJack91 pull request #150 solved this issue and save inputs radio correctly. Now is merged, please download master file sisyphus.min.js again and try it out.

Regards.

@simsalabim this issue now can be closed. 😄