我在使用jquery将数据从localStorage返回到表单进行更新时遇到问题吗?

用户名

我正在创建一个移动应用程序,用于存储员工数据并检索它以进行更新。我找不到使用jQuery从localStorage调用/填充的方法。

如果有人可以看一下我的代码并告诉我我做错了或混在一起,那将是很高兴的。

谢谢。

预期行为

单击编辑按钮后,UI应转到编辑表单页面,并使用来自localStorage的数据填充编辑表单字段。

实际行为

单击编辑将转到编辑表单页面。字段未填充。

的HTML

        <hr style="height:3px; background-color:#ccc; border:0; margin-top:12px; margin-bottom:12px;">
      <form id="edit_employee_form" action="" >
              <div  class="ui-field-contain Employee No" data-controltype="textinput">
                <input name="employeeno" id="employeeno" data-clear-btn="true" value="" type="text" data-mini="true" >
            </div>
            <div class="ui-field-contain Parties" data-controltype="textinput" contenteditable="true">
                <input name="employeename" id="employeename" data-clear-btn="true"  
                value="" type="text" data-mini="true" required/>
            </div>
            <div class="ui-field-contain State" data-controltype="textinput">
                <input name="stateoforigine" id="stateoforigine" data-clear-btn="true" 
                value="" type="text" data-mini="true">
            </div>
            <div class="ui-field-contain Phone Employee" data-controltype="textinput">
                <input name="employeephone" id="employeephone" data-clear-btn="true" 
                value="" type="text" data-mini="true">
            </div>
           <div class="ui-field-contain Date Of Birth" data-controltype="dateinput">
           <input data-name="dateofbirth" data-inline="true" type="text" id="dateofbirth" data-clear-btn="true" value="" type="date" data-mini="true">
            <div  class="ui-field-contain id" data-controltype="textinput">
            <input name="id" input type="hidden" id="id" data-clear-btn="true"  placeholder="case id" value="" type="text" data-mini="true" >
            </div>
            </div>
                <div class="ui-block-a">
                     <input id="update" href="#employee_list_view_page" type="submit" data-inline="true" data-theme="b" value="Update"
                     data-mini="true" class="ui-btn ui-corner-all ui-btn ui-shadow ui-btn  Save">
                </div>
                  <div class="ui-block-b">
                   <div class="ui-block-b">
                    <input id="cancel" type="reset" value="Reset" class="ui-btn ui-corner-all ui-btn ui-shadow ui-btn">

            </div>
        </form>
     <div data-theme="a" data-role="footer" data-position="fixed">
                                <h2 class="ui-title">
                                   Employees Catalog
                               </h2>
                    </div>
                </div>
            </div>
        </body>
    </html>` 

单击编辑按钮以从localStorage填充数据的代码:

//Edit Case Function 

function Edit() {
    employees[i] = JSON.stringify({
        id: employees.length + 1,
        employeeno: $('#employeeno').val(),
        employeename: $('#employeename').val(),
        stateoforigine: $('#stateoforigine').val(),
        employeephone: $('#employeephone').val(),
        dateofbirth: $('#dateofbirth').val(),

    }); //Alter the selected item in the form
    localStorage.setItem("employees", JSON.stringify(employees));
    return true;
}
for (var i in employees) {
    var empData = JSON.parse(localStorage.getItem(employees[i]));
};

//register Edit button

$('.edit_button').live('click', function (e) {
    alert('Iwas clicked');
    e.stopPropagation();

    var empData = JSON.parse(localStorage.getItem('employees'));
    $('#employeeno').val('employeeno');
    $('#employeename').val('employeename');
    $("#stateoforigine").val('stateoforigine');
    $('#employeephone').val('employeephone');
    $('#dateofbirth').val('dateofbirth');
    $('#id').val(id);
    $("#id").attr("readonly", "readonly");
    $('#employeeno').focus();

    $.mobile.changePage('#edit_employee_page');
    return false;
});

样本localStorage文件:

[{"id":1,"employeeno":"DEF/234/20014","employeename":"Bill Foreman","stateoforigine":"Califonia","employeephone":"09543765432","dateofbirth":"12/11/1965"}]

关键是employees

manuel_m2

如果您的json是...

[{"id":1,"employeeno":"DEF/234/20014","employeename":"Bill Foreman","stateoforigine":"Califonia","employeephone":"09543765432","dateofbirth":"12/11/1965"}]

然后..

$.each(data, function(a, b) {

    $('#employeeno').val(b.employeeno);
    $('#employeename').val(b.employeename);
    $("#stateoforigine").val(b.stateoforigine);
    $('#employeephone').val(b.employeephone);
    $('#dateofbirth').val(b.dateofbirth);
    $('#id').val(b.id);

});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

我在使用jquery将数据从localStorage返回到表单进行更新时遇到问题吗?

来自分类Dev

使用jQuery + PHP进行表单处理时遇到问题

来自分类Dev

使用jQuery + PHP进行表单处理时遇到问题

来自分类Dev

使用Spring获取表单数据时遇到问题

来自分类Dev

使用CommandLink更新数据表时遇到问题

来自分类Dev

使用indexeddb jQuery API将数据插入indexeddb时遇到问题

来自分类Dev

在动态生成表单输入时进行验证时遇到问题吗?

来自分类Dev

我在使用Geolocation时遇到问题

来自分类Dev

我在使用 OneDrive 时遇到问题

来自分类Dev

我在JS DOM中进行表单验证时遇到问题

来自分类Dev

将表单数据保存到 ManyToMany 字段时遇到问题

来自分类Dev

jQuery序列化表单时遇到问题

来自分类Dev

Firestore查询在获取我需要在本机上进行响应的数据时遇到问题

来自分类Dev

在更新对象的属性时遇到问题吗?

来自分类Dev

我在将两个数字与条件运算符(?:)进行比较时遇到问题

来自分类Dev

对我的 Amazon Spectrum 表进行分区时遇到问题

来自分类Dev

我在返回数组的每个值时遇到问题

来自分类Dev

我的javascript函数返回值时遇到问题

来自分类Dev

我在返回函数上的变量时遇到问题

来自分类Dev

使用AJAX提交表单时遇到问题

来自分类Dev

在模块中使用用户表单时遇到问题

来自分类Dev

我在安装或更新 Ubuntu 时遇到问题

来自分类Dev

我从JDateChooser将日期存储到MySQL数据库时遇到问题

来自分类Dev

我从JDateChooser将日期存储到MySQL数据库时遇到问题

来自分类Dev

使用python向Solr添加数据时遇到问题吗?

来自分类Dev

我在响应本机中映射数据时遇到问题

来自分类Dev

在React上分解我的数据时遇到问题

来自分类Dev

我在从html表获取数据时遇到问题

来自分类Dev

从我的意图传递和接收数据时遇到问题

Related 相关文章

  1. 1

    我在使用jquery将数据从localStorage返回到表单进行更新时遇到问题吗?

  2. 2

    使用jQuery + PHP进行表单处理时遇到问题

  3. 3

    使用jQuery + PHP进行表单处理时遇到问题

  4. 4

    使用Spring获取表单数据时遇到问题

  5. 5

    使用CommandLink更新数据表时遇到问题

  6. 6

    使用indexeddb jQuery API将数据插入indexeddb时遇到问题

  7. 7

    在动态生成表单输入时进行验证时遇到问题吗?

  8. 8

    我在使用Geolocation时遇到问题

  9. 9

    我在使用 OneDrive 时遇到问题

  10. 10

    我在JS DOM中进行表单验证时遇到问题

  11. 11

    将表单数据保存到 ManyToMany 字段时遇到问题

  12. 12

    jQuery序列化表单时遇到问题

  13. 13

    Firestore查询在获取我需要在本机上进行响应的数据时遇到问题

  14. 14

    在更新对象的属性时遇到问题吗?

  15. 15

    我在将两个数字与条件运算符(?:)进行比较时遇到问题

  16. 16

    对我的 Amazon Spectrum 表进行分区时遇到问题

  17. 17

    我在返回数组的每个值时遇到问题

  18. 18

    我的javascript函数返回值时遇到问题

  19. 19

    我在返回函数上的变量时遇到问题

  20. 20

    使用AJAX提交表单时遇到问题

  21. 21

    在模块中使用用户表单时遇到问题

  22. 22

    我在安装或更新 Ubuntu 时遇到问题

  23. 23

    我从JDateChooser将日期存储到MySQL数据库时遇到问题

  24. 24

    我从JDateChooser将日期存储到MySQL数据库时遇到问题

  25. 25

    使用python向Solr添加数据时遇到问题吗?

  26. 26

    我在响应本机中映射数据时遇到问题

  27. 27

    在React上分解我的数据时遇到问题

  28. 28

    我在从html表获取数据时遇到问题

  29. 29

    从我的意图传递和接收数据时遇到问题

热门标签

归档