I have i page where i ma using to create dynamic rows using jQuery. I also use this library "sisyphus.js" and "sisyphus.min.js" and "jquery-1.7.min.js". I am not able to preserve my dynamically rows in my form.

I paste code here.

    <script type="text/javascript" src="jquery-1.7.min.js"></script>
    <script src="sisyphus.js" language="javascript"></script>

    <script language="javascript" >
        jQuery('#form1').sisyphus();
        jQuery('form').sisyphus({timeout: 5});
    </script>

    <script type="text/javascript">
        $(document).ready(function(){       

            $('.del').live('click',function(){
                $(this).parent().parent().remove();
            });

            $('.add').live('click',function(){
                $(this).val('Delete');
                $(this).attr('class','del');
                var appendTxt = "<tr><td><select  name='ptype[]' ><option value='1' >ONE</option><option value='2' >TWO</option></select></td><td><select name='product[]' ><option value='3' >ONE333</option><option value='4' >TWO444</option></select></td><td><input type='text' name='dsc[]' /></td><td><input type='text' name='qty[]' /></td></td><td><input type='button' class='add' value='Add More' /></td></tr>";
                $("tr:last").after(appendTxt);          
            });        
        });
    </script>

    <style>

    .add{
       border-top: 1px solid #96d1f8;
       background: #65a9d7;
       background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
       background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
       background: -moz-linear-gradient(top, #3e779d, #65a9d7);
       background: -ms-linear-gradient(top, #3e779d, #65a9d7);
       background: -o-linear-gradient(top, #3e779d, #65a9d7);
       padding: 2px 4px;
       -webkit-border-radius: 40px;
       -moz-border-radius: 40px;
       border-radius: 40px;
       -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
       -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
       box-shadow: rgba(0,0,0,1) 0 1px 0;
       text-shadow: rgba(0,0,0,.4) 0 1px 0;
       color: white;
       font-size: 11px;
       font-family: Georgia, serif;
       text-decoration: none;
       vertical-align: middle;
       }
    .add:hover {
       border-top-color: #28597a;
       background: #28597a;
       color: #ccc;
       }
    .add:active {
       border-top-color: #1b435e;
       background: #1b435e;
       }


     .del{
        border-top: 1px solid #96d1f8;
       background: #65a9d7;
       background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
       background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
       background: -moz-linear-gradient(top, #3e779d, #65a9d7);
       background: -ms-linear-gradient(top, #3e779d, #65a9d7);
       background: -o-linear-gradient(top, #3e779d, #65a9d7);
       padding: 2px 4px;
       -webkit-border-radius: 40px;
       -moz-border-radius: 40px;
       border-radius: 40px;
       -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
       -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
       box-shadow: rgba(0,0,0,1) 0 1px 0;
       text-shadow: rgba(0,0,0,.4) 0 1px 0;
       color: white;
       font-size: 11px;
       font-family: Georgia, serif;
       text-decoration: none;
       vertical-align: middle;
       }
    .del:hover {
       border-top-color: #28597a;
       background: #28597a;
       color: #ccc;
       }
    .del:active {
       border-top-color: #1b435e;
       background: #1b435e;
       }
    </style>

    <form name="form1" id="form1" action="" >
    <table id="options-table">
      <tr>
        <td>Type</td>
        <td>Product</td>
        <td>Desc</td>
        <td>Qty</td>                        
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><select  name="ptype[]" >
            <option value="1" >ONE</option>
            <option value="2" >TWO</option>
          </select></td>
        <td><select name="product[]" >
            <option value="3" >ONE333</option>
            <option value="4" >TWO444</option>
          </select></td>
        <td><input type="text"   name="dsc[]" /></td>
        <td><input type="text"   name="qty[]" /></td>          
        <td><input type="button" class="add" value="Add More" /></td>
      </tr>  
      </tr>
    </table>
    </form>

Hi,

I installed the plugin, by just including the minimized version in the end of my scripts. I use bootstrap 2.3, with some of other scripts... modals, tooltips, popovers, etc. Also use select2 version 2.x.

It works with input fields and checkboxes, but not with selects and textareas. So I started to take scripts out to check If could be a compatibility issue. Found that select2 has a incompatibity, cause it worked without it... but what I couldn't find a solution are the textareas and they are the most important for me.

They have id's and names. I tried to take control tags out and also coping the example HTML. Didn't work. Tried in IE, Chrome and Firefox.

Is there any known issues with bootstrap 2.3 ? Like the order of script loading or something ?

Cheers

Hi,

I have a webpage were it saves the contents of two textboxes:

FirstName LastName

Into the ListBox.

Using jQuery statement:

$listbox.append($('').attr('value', $textbox.val()).text(self.FullName));

I tried replacing "Form" with option and select did not work.

I looked at http://sisyphus-js.herokuapp.com/#interaction and it looks like it is possible but for some reason it is not working for me.

//Save All of Form Data to HTML5 Local Storage <-- This works, but it is also hard coded html $(function () { $("form").sisyphus(); });

//Save All names from Listbox to HTML5 Local Storage  <-- Does not work, option is generated at runtime with jQuery.
$(function () { $("option").sisyphus(); });

Does having it generated in the DOM have any effect?

Thanks, Brian Davis

I've got a three-page checkout process (each has it's own submit button) followed by a thank you page. My goal is to keep the data saved on the three pages, but release it once the transaction is finished and the thank you page is loaded. The data is being saved correctly, but it's not being released on the final step.

On the checkout pages I've got: $( function() { $( "form" ).sisyphus( { autoRelease: false } ); } );

On the thank you page I've got: $( function() { $("form").sisyphus().manuallyReleaseData(); } );

I'm a complete javascript newbie. Thanks in advance for any help on this.

Hi,

Thank you for the great plugin (will contribute once get it working).

An installation note would be great so people avoid simple mistakes.

I've included the script at the bottom of my Tweeter Bootstrap 3 under all other JS includes like jQuery, added code initiating the plugin with 0 second timeout and nothing happens. There is no error messages nor it's saving the form's state in Chrome (Firefox seem to have been doing it anyway when refresh pages).

The page in question: smartinsurance.webcoder.eu

TESTED ON: Mac OS X: 10.8.5 (12F45) Safari (latest) Chrome (latest) Firefox (latest)

Hi all, I´m new to Sisyphus and jQuery. I have integrated it to my site. My Form is checked by PHP for mistake, the data is written to MYSQL and the user is redirected to a confirmation site. Now my question. I have added following code to my form site ...

$( function() { $( "#formdata" ).sisyphus({ autoRelease: false }); } );

Input is correct, checked by PHP and user is redirected. How can I clear the data now from the new site ...

I tried $('#formdata').sisyphus.manuallyReleaseData(); but seems not to be workin. Any help for a newbie is apreciated.

Shouldn't Sisyphus always ignore password inputs?

If the value of password fields is stored in LocalStorage then any other script on the page could grab this data, and hijack the user's credentials as they're filling out a form.

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

When I release ajax loaded form manually and load this form for 2nd time, it doesn't work anymore. It's because these forms, are still marked as started.

Plugins like jQuery UI, or Select2 trigger a change event and are never saved through the oninput binding. This adds support for that.

Tests run in Chrome, Safari 6, IE 8 & 9.

Hello! I want to unbind a form from sisyphus because the site I'm coding uses ajax in a lot of places. What is happening:

1 - I'm binding sisyphus to form self.sisyphus = $('form').sisyphus();

2 - The form is sent by ajax so in the ajax call I use: self.sisyphus.manuallyReleaseData();

The tricky part is here, because the method is called, but after this, saveDataTimeout is called again, so the form is sent again!

What should I do?

• Based on the existing literature, it seems like IndexedDB might be a more performant choice than local storage
• Have you thought about persisting the data to indexeddb instead of local storage?

see:

• Stack overflow: How is indexedDB conceptually different from HTML5 local storage?
• https://nolanlawson.com/2015/09/29/indexeddb-websql-localstorage-what-blocks-the-dom/
• https://stackoverflow.com/questions/5924485/how-is-indexeddb-conceptually-different-from-html5-local-storage

Hey, I'm running into an issue using Wordpress with the plugin Caldera Forms. I use sisyphus to allow users to come back to fill out forms later in case they couldn't finish it the first time. The issue is, it seems to be persisting the nonce from the original session which blocks submission unless you clear all the data. Any ideas as to how I could avoid this issue. Not sure if it's specific to Caldera forms setup or if it's a wordpress issue. Thanks!

• Reggie

I dynamically create a new grid row on several forms when the user clicks an ‘Add Row’ button. All of the data in those new rows gets correctly saved to localStorage. My problem is they don’t get restored if the user doesn’t save the page before, e.g., crashing. When the user returns, the ‘new’ dynamically added controls are no longer in the document, so those values are ignored during restore.

I’m just now getting started on figuring out how to ‘re-insert’ those nodes to the document when restoring.

I’m posting here in the hopes that someone has experience to share that would give me a head start.

Hi creator of Sisyphus,

We're trying to incorporate your tool in our webforms, and it works most of the time. The one time it does not work is when there are several instances of CKEditor on the page. IS this a known bug and if so, will there be some action taken on that?

Maybe you have a working example of Sisyphus with several CKEditors? We think the script does not take into account this possibility. Any ideas or solutions?

Love to hear from you, thanks up front for your time.

Kind regards,

Sebastiaan Naafs - van Dijk