Monday, 15 March 2010

javascript - Radio button bind with textbox to localstorage or cookie not working properly -


This script has been customized from a user here, although once I add text to the check box in the checkbox, So it does not work properly.

For example, when I click on the second option option 2, no matter how I change my answer, once I refresh, it will automatically be used as 'others' Will return to the option. Most likely it will be the issue with this line

PS My JavaScript is really very bad.

Thanks I appreciate any help!

  $ ('Div.radio_button Input: Radio'). Bind ('change', function ($) ($ "'+ this.id +' box '). Toggle ($ (this) .This (': check ')); // Save data on the stored datadataset (This.id, $ (this) .is (': checked')? 'Check': 'no')}} At each (function () {// load, we read from the storage that the value is set: var val = storedData.get (this.id); if (val == 'checked') $ (this) .attr (' Checked ',' checked '); if (val ==' no ') $ (this) .removeAttr (' check '); if (val) $ (this). Trigger (' change ');});    

cause

One reason is this line:

  $ (this) .attr ('check', 'check');   

Use this instead:

  $ (this) .prop ('checked' is true);   

The second reason is that when you set the second option in your radio button for example, you can not delete the previous position in storage (or clear).

Then what happens f.ex (action pseudo) -

Option 1 (your 31A) setting:

  set (31A, Check   
  get (31a = check) (32b = zero)   

Now set two options: set (31b, check);

Now load and it happens: get < (31A = check) (32b = check)

A radio button should have only one option set, so it is forced to take one and the last one will be chosen, this is the reason that the last option is always set.

Solution

When you change options, you need to delete (or clear) the previous option.

The easiest way is to clean the storage and save all the options even though it is not noticeable for the user (unless you have thousands of items to save).

In the second method, you will need to keep track of the group of radio buttons group and accordingly set all the values ​​according to the option of changing that group if you use different forms and prefixes (or Using the Object.keys (localStorage) to do it again via the key to compare functions similar to cookies, you can use different prefixes.

With an animal-force approach to updating the working version storage:

  function updates () {localStorage.clear (); // brute-force here .. $ ('div.radio_button input'). Each (function () {storedData.set (this.id, $ (this) .is (': checked')? 'Checked': 'No');}); }   

The code that triggers it:

  $ ('div.radio_button input: radio'). Tie ('change', function () {$ ('#' + This.id + 'box'). Toggle ($ (this) .This (': check')) // Save data on change update ALL ); //storedData.set(This id, $ (this) .This (': check')? 'Check': 'no');});   

Of course you will need to do this for cookies, so the best option is to include a 'clear' method on your storage object.

No comments:

Post a Comment