Question

所以这是我知道我最初应该问的问题，在这里： How do I get these jQM 1.4 values out of a form with jQuery?

我的问题是这个 - 我有一个设置面板，允许用户选择年龄，性别和公制或英制单位。我将设置存储在localStorage中，每当用户重新打开应用程序时，我想将它们从localStorage中拉出来，以便在应用程序中实现它们。

这是表格

<form style="margin:0;padding:0;width:">                   
  <b>Age</b><br>        
  <input type="range" data-mini="true" data-highlight="true" name="ageview" id="ageview" min="0" max="99" value="30" >
  <p>                                                      
    <b>Gender</b><br>        
    <input type="checkbox" data-role="flipswitch" name="genderview" id="genderview" checked="" data-on-text="f" data-off-text="m" data-wrapper-class="custom-label-flipswitch" data-mini="true">                   
  <p>
    <b>Units</b><br>            
  <fieldset data-role="controlgroup" data-mini="true">        
    <input type="radio" name="unitsview" id="metric_units" value="metric" checked="">
    <label for="metric_units">cm &amp; kg</label>
    <input type="radio" name="unitsview" id="imp_units" value="imp">
    <label for="imp_units">inches &amp; lbs</label>          
  </fieldset>
</form>

当用户点击保存按钮时，id =＆＃34; newsettings＆＃34;这个脚本运行

$("#newsettings").click(function(){
    age_set = $("#ageview").val();
    gender_set = $("#genderview:checked").length > 0 ? 'f' : 'm';
    units_set = $("input[name=unitsview]:checked").val();
    settingsObject = { "ageset" : age_set, "genderset" : gender_set, "unitset" : units_set} //put settings in an object
    localStorage.setItem('settings', JSON.stringify(settingsObject)); //store string in localSettings}
);

感谢杰克在另一个主题中。

问题是我不知道如何将这些更改重新放入表单中。我唯一可以工作的是Age，就像这样

$("#ageview").val(age_set);

我已经尝试过两次

$("input[name=unitsview]").val(units_set);

和

$("input[name=unitsview]:checked").val(units_set);

，两者都没有。

而且我不知道从哪里开始性别。

我不是仅仅使用我的表单设置要求解决方案。滑块输入显然适用于Age。我的问题有两个：

有没有办法轻松插入保存的值？和
如果没有，是否有其他方法可以在表单中捕获这些设置？是否还有其他易于操作的控件？

Answer 1

这是 DEMO

$("#setVals").on("click", function(){
    var age = 32,
        gender = 'male',
        units = 'imp_units';

    $("#ageview").val(age);
    $("#genderview").prop("checked", gender == 'female').flipswitch( "refresh" );
    if (units == 'metric_units'){
        $("#unit_choice1").prop("checked", true).checkboxradio( "refresh" );
        $("#unit_choice2").checkboxradio( "refresh" );
    } else {            
        $("#unit_choice2").prop("checked", true).checkboxradio( "refresh" );
        $("#unit_choice1").checkboxradio( "refresh" );
    }
});

在flipswitch上，将checked属性设置为true或false，然后在窗口小部件上调用refresh。对于单选按钮，您可以为相应的按钮设置checked属性，然后在两者上调用小部件刷新。

Answer 2

如果值存储在变量中，@ ezanker的答案是正确的。但是，当您使用 localStorage 保存数据并在以后检索它们时，您无法使用该方法。

您需要使用JSON.stringfy(array)将所有数据保存到数组，将数组转换为 JSON字符串才能存储它在 localStorage 。

要检索商店数据， JSON字符串应解析 JSON数组，以便使用JSON.parse(localStorage)读取存储的值

第一步：

循环表单元素，检索类型，值和 id 。将每个属性推送到数组。识别类型是关键步骤，在此基础上，检索元素的值。此外， type 将在 switch语句中用于更新表单。

var elements = []; /* array of data */

$("#form_ID input").each(function () {

    /* type is either [type] or [data-role] */
    var elm_type = !! $(this).jqmData("role") ? $(this).jqmData("role") : $(this).prop("type");

    /* value is "string" or "boolean" */
    var elm_val = $(this).prop("type") === "checkbox" || $(this).prop("type") === "radio" ? $(this).prop("checked") : $(this).val();

    /* value will updated based on element's ID */
    var elm_id = "#" + $(this).prop("id");

    /* push data into elements array */
    elements.push({
        "type": elm_type,
            "value": elm_val,
            "id": elm_id
    });
});
/* array to string and save it */
localStorage["info"] = JSON.stringify(elements);

第二步：

要读取存储在 localStorage 中的数据，首先需要解析。然后循环使用值并使用 switch语句更新表单。

为什么切换语句？ jQuery Mobile中的每个小部件都有自己的增强/更新方法。即更新复选框/单选按钮的值，.checkboxradio("refresh")应该用于在该元素上重新应用样式。

请注意，我已使用.ui-page-active选择器按活动页面中的 id 定位元素。这是预防措施，因为它不是针对任何其他页面中的元素。您可以使用相同的 id 但在两个条件下; 1）不要在同一页面上使用它们。 2）使用页面的id 选择器来定位它们。
```
/* string to array */
var load_info = JSON.parse(localStorage["info"]);

$.each(load_info, function (i, data) {
    switch (data.type) {
      case "number": /* slider */
          $(".ui-page-active").find(data.id).val(data.value).slider("refresh");
          break;
      case "flipswitch": /* flipswitch */
          $(".ui-page-active").find(data.id).prop("checked", data.value).flipswitch("refresh");
          break;
      case "radio": /* radio button */
          $(".ui-page-active").find(data.id).prop("checked", data.value).checkboxradio("refresh");
          break;
    }
});
```

Demo ^（1）

^（1）对表单进行更改 - ＆gt;保存 - ＆gt;下一页 - ＆gt;加载 - ＆gt;瞧！

Answer 3

感谢您的反馈。我一直试图在我正在使用的选项中引用我的选项，就像这样。

$("#ageview").val(age);
if(gender == "f"){
    $("#genderview option[value='f_gender']").prop("selected", true).flipswitch( "refresh");
    $("#genderview option[value='m_gender']").flipswitch( "refresh");
} else{             
    $("#genderview option[value='m_gender']").prop("selected", true).flipswitch( "refresh");
    $("#genderview option[value='f_gender']").flipswitch( "refresh");
}   
if (units == "metric"){
    $("#metric_units").prop("checked", true).checkboxradio( "refresh" );
    $("#imp_units").checkboxradio( "refresh" );
} else {            
    $("#imp_units").prop("checked", true).checkboxradio( "refresh" );
    $("#metric_units").checkboxradio( "refresh" );
}

我只是不知道如何在jQuery Mobile中引用这些东西，官方文档让我困惑:(

编辑：对于编辑，这里是。这太令人沮丧了。

$("#genderview").val(gender).flipswitch("refresh");

就是这样。

2天的斗争。：（

但没有你们，我不可能做到。非常感谢。

获取值（设置）并返回到jQuery Mobile 1.4表单。怎么做？

3 个答案: