时间戳

首页 > 解决方案 > 在一页中添加和编辑表单

javascript - 在一页中添加和编辑表单

问题描述

我的页面中有两个按钮“添加”和“编辑”。当我尝试单击“添加”按钮时，我得到一个弹出表单，我填写详细信息并将被添加到数据库中。当我单击“编辑”按钮时，同样的事情应该显示相同的表单并填写详细信息。我知道如何从后端获取数据。但我不知道我应该如何区分添加和编辑以一种形式。

https://jqueryui.com/dialog/#modal-form

我已经参考了这个链接，并添加了添加表单的详细信息。有人可以帮助我如何进行编辑吗？

<html>

        <input class="btn btn-info" type="button" id="create-user" value="Add user">


        <div class="row-fluid top-space-20">
            {% if result | length == 0 %}
            <div>
                <p>There are no user details ,If you want you can add it </p>
            </div>
            {% else %}
            <table class="table table-striped">
                <thead>
                    <th>user name</th>
                    <th>user duration</th>
                    <th>user Description</th>
                    <th>user requirements</th>
                    <th>Actions</th>
                </thead>
                {% for each_item in result %}
                <tbody>
                    <td>{{each_item.user_name}}</td>
                    <td>{{each_item.user_time}}</td>
                    <td>{{each_item.user_description}}</td>
                    <td>{{each_item.user_requirement}}</td>
                    <td>
                        <input class="btn btn-info" type="button" id="edituser" value="Edit">

                    </td>
                </tbody>
                {% endfor %}
                {% endif %}
            </table>
        </div>
    </div>
    <div id="dialog-form" title="Create new user">
        <p class="validateTips">All form fields are required.</p>

        <form>
            <fieldset>
                <label for="username">user name</label>
                <input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all">
                <label for="duration">Duration</label>
                <input type="text" name="duration" id="duration" class="text ui-widget-content ui-corner-all">
                <label for="description">Description</label>
                <input type="text" name="description" id="description" class="text ui-widget-content ui-corner-all">
                <label for="requirements">Requirements</label>
                <input type="requirements" name="requirements" id="requirements"
                    class="text ui-widget-content ui-corner-all">
                <input type="hidden" id='departmentId' ,value="{{department_id}}">
                <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
            </fieldset>
        </form>
    </div>

    <script>
        $(function () {
            var dialog, form,
                username = $("#username"),
                duration = $("#duration"),
                description = $("#description"),
                requirements = $("#requirements"),
                allFields = $([]).add(username).add(duration).add(description).add(requirements),
                tips = $(".validateTips");

            function updateTips(t) {
                console.log(t);
                tips
                    .text(t)
                    .addClass("ui-state-highlight");
                setTimeout(function () {
                    tips.removeClass("ui-state-highlight", 1500);
                }, 500);
            }

            function checkLength(o, n, min, max) {

                if (o.val().length > max || o.val().length < min) {
                    o.addClass("ui-state-error");
                    updateTips("Length of " + n + " must be between " +
                        min + " and " + max + ".");

                    return false;
                } else {
                    return true;
                }
            }

            function addUser() {
                var valid = true;
                allFields.removeClass("ui-state-error");
                var username = $("#username");
                var duration = $("#duration");
                var description = $("#description");
                var requirements = $("#requirements");
                var departmentId = document.getElementById("departmentId").value;
                valid = valid && checkLength(username, "username", 3, 16);
                valid = valid && checkLength(duration, "duration", 3, 16);
                valid = valid && checkLength(description, "description", 3, 300);
                valid = valid && checkLength(requirements, "requirments", 5, 300);

                if (valid) {
                    var username = $("#username").val();
                    var duration = $("#duration").val();
                    var description = $("#description").val();
                    var requirements = $("#requirements").val();
                    var departmentId = document.getElementById("departmentId").value;
                    $("#users tbody").append("<tr>" +
                        "<td>" + username + "</td>" +
                        "<td>" + duration + "</td>" +
                        "<td>" + description + "</td>" +
                        "<td>" + requirements + "</td>" +
                        "</tr>");
                    $.ajax({
                        type: 'POST',
                        url: '/department/%d/user' % departmentId,
                        data: {
                            'username': username,
                            'duration': duration,
                            'description': description,
                            'requirements': requirements
                        },
                        success: function (result) {
                            console.log(result);
                            alert("The user has been added");
                            document.location.href = "/departments";
                        },
                    })

                    dialog.dialog("close");
                }
                return valid;
            }

            dialog = $("#dialog-form").dialog({
                autoOpen: false,
                height: 400,
                width: 350,
                modal: true,
                buttons: {
                    "Create user": addUser,
                    Cancel: function () {
                        dialog.dialog("close");
                    }
                },
                close: function () {
                    form[0].reset();
                    allFields.removeClass("ui-state-error");
                }
            });

            form = dialog.find("form").on("submit", function (event) {
                event.preventDefault();
                addUser();


            });

            $("#create-user").button().on("click", function () {
                console.log("I am first");
                dialog.dialog("open");
            });
        });
    </script>


</body>


</html>

标签： javascriptjquery

解决方案

有多种方法可以做到，下次请发布代码。让我假设您正在使用模型来查看

https://jqueryui.com/dialog/#modal-form。

有关更多详细信息，请发布代码，我们可以帮助您

这是更新的答案

<tbody>
                    <td>{{each_item.user_name}}</td>
                    <td>{{each_item.user_time}}</td>
                    <td>{{each_item.user_description}}</td>
                    <td>{{each_item.user_requirement}}</td>
                    <td>
                        <input class="edituser btn btn-info" type="button" value="Edit" data-user-id = "{{each_item.user_id}}">

                    </td>
                </tbody>

把id改成class

       $(".edituser").button().on("click", function () {
           var id = $(this).attr("data-user-id");
           var tempUser;
           for(var user in results){
               if(user.id == id){
                     tempUser = user;
                }
           }
             $("#username").val(tempUser.user_name);
             $("#duration").val(tempUser.user_name);;

            dialog.dialog("open");
        });

您可以使用“用户 ID”相应地设置值

并在提交时更改用于构造视图的“结果”对象中的值

推荐阅读