LocalStorage input=radio || checkbox || select && show div if :checked on load

Question

I have several questions about localStorage forms.

So I have these 3 types of inputs:

• Select
• Checkbox

• Radio

  <form id="form54" name="form54" enctype="multipart/form-data" method="post" action="#public">
  
      <!-- select -->
      <div>
          <select name="Q1">
              <option value="0">opt1</option>
              <option value="1">opt2</option>
              <option value="2">opt3</option>
              <option value="other">Other</option>
          </select>
  
          <textarea id="Q-option-other-value" class="with-attachments" maxlength="100" placeholder="placeholder" name="Q1-other"></textarea>
      </div>
  
      <br><br>
  
      <!-- checkbox -->
      <div>
          <input id="opt3a" type="checkbox" name="Qthree" value="" store="opt2a">
          <label for="opt3a">opt1</label>
  
          <input id="opt3b" type="checkbox" name="Qthree" value="" store="opt2b">
          <label for="opt3b">opt2</label>
  
          <input id="opt3c" type="checkbox" name="Qthree" value="other" store="opt2c">
          <label for="opt3c">Other</label>
  
          <textarea id="Q3-checkbox-other-value" class="with-attachments" maxlength="150" placeholder="placeholder" name="Q3-other"></textarea>
      </div>            
  
      <br><br>
  
      <!-- radio -->  
      <div>
          <input id="opt4a" type="radio" name="Qfour" value="1" store="opt4a">
          <label for="opt4a" class="label-for-radio">opt1</label>
  
          <input id="opt4b" type="radio" name="Qfour" value="2" store="opt4b">
          <label for="opt4b" class="label-for-radio">opt2</label>
  
          <input id="opt4c" type="radio" name="Qfour" value='scheduled' store="opt4c">
          <label for="opt4c" class="label-for-radio">other</label>
  
          <input class="absolute" type="date" name="Qfour">
      </div>
  

  
  
  

For each one I have a "special option" that shows a different input if that option is selected.

Plus, I have localStorage, but I can't make it work for checkbox and radio. It only works in textarea and input=select.

I have some scripts in jQuery:

• Input Select: show textarea if value=other is selected
• Input Checkbox: when click on textarea select value=other
• Input Checkbox: if value=other is not selected, change textarea css
• Input Radio: if val=scheduled is checked, show type=date
• LocalStorage : save and clear localstorage for textareas and input select

What is missing - here i need your help

• Input Select: hide textarea if select=other is not selected ON PAGE LOAD (with localStorage, if there is data saved, the textarea is visible even if select=other isn't selected . ps. if you put (display: none), textarea will be invisible if select=other is selected, so that doesn't fix the problem)
• LocalStorage for checkbox and radio (with button to save and delete data)

Fiddle: http://jsfiddle.net/sandrin4p/ury7dvt5/17/

Answer 1

Just setting the values for the select, radio and checkbox inputs won't do the trick. The .val() function just sets the value="" attribute.

if (localStorage.getItem("flag") == "set") {

        var data= $("#form54").serializeArray();

        $.each(data, function(i, obj) {

            console.log(i, obj);

            if($("[name='" + obj.name +"']").attr('type') === 'radio' ||
               $("[name='" + obj.name +"']").attr('type') === 'checkbox') {

              if(obj.name) $("[name='" + obj.name +"']").prop('checked', true);
              else $("[name='" + obj.name +"']").prop('checked', false);

            } else if( $("[name='" + obj.name +"']").attr('type') === 'select') {
                if(obj.name) $("[name='" + obj.name +"'] option[value='" + obj.value +"']").prop('selected', true)
                else $("[name='" + obj.name +"'] option[value='" + obj.value +"']").prop('selected', false)

            } else 
              $("[name='" + obj.name +"']").val(localStorage.getItem(obj.name) );
            }

        });

    }

should do the trick. (sorry for any typos just did this quickly (and i dont know if your object has a .value prop.

But i think you get the idea.

Good luck