Question

我希望js获取位于模态中的表单的字段。我的模态的id是这样设置的：th:id="myModal+${employee.id}"。我的表单的ID就是这样：<form th:id="update+${employee.id}" class="form-horizontal" role="form">。我想在我的js中恢复这个表单id，我所做的事情将无法工作。

我在下面发布了我的模态和JS代码：

<button type="button" class="btn btn-default" data-toggle="modal" th:attr="data-target='#myModal'+${employee.id}">
    Update Modal
</button>
<div class="modal fade" th:id="myModal+${employee.id}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            <form th:id="update+${employee.id}" class="form-horizontal" role="form">
                <div class="modal-body">
                    <input type="text" name="fname" id="fname" />
                    <input type="text" name="id" th:value="${employee.id}" id="id" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">                
                        Close
                    </button>
                    <input type="button" class="btn btn-default" value="Update" id="update" th:onclick="'javascript:updateEmp();'" />
                </div>
            </form>
        </div>
    </div>
</div>

function updateEmp() {
    var location = "http://localhost:8080/update";
    console.log($("#update+id"));
    var employeeForm = $("#update+id").serializeJSON();
    console.log(employeeForm);
    var employeeData = JSON.stringify(employeeForm);
    console.log(employeeData);
    $.ajax({
        url: location,
        type: 'POST',
        data: employeeData, //not included for GET
        //dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (results) {}

我真的不知道该怎么做。

Answer 1

由于您使用的是jQuery，因此请使用它绑定事件。您可以使用Class Selector $('.class')

添加CSS类和绑定事件

HTML 的

<input type="button" 
       class="btn btn-default updateButton" 
       value="Update"  />

脚本

$(function(){
    $(document).on('click', ".updateButton", function(){
        //Get form ans serialize it
        var employeeForm = $(this).closest('form').serializeJSON();

        //Rest of the code
    });
});

Answer 2

HTML

<input type="button" class="btn btn-default" value="Update" id="update" th:onclick="'javascript:updateEmp(this);'" />

JS

function updateEmp(button) {
    $.ajax({
        url: location,
        type: 'POST',
        data: $(button).parent('form').serialize(), //not included for GET
        //dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (results) {}

    })
}

将包含id的表单名称转移到jquery

2 个答案: