Javascript如何提交表单？

Question

我有一个问题，我想用 javascript 通过表单提交，但显然我在尝试执行此操作时遇到了问题，想知道是否有人可以帮助我解决该问题，可以在下面找到有关该问题和代码示例。

你好。当我提交添加的表单时，我的表单 .submit 函数没有调用，有人可以帮忙吗？

首先，表单位于模态框内:

<div class="modal fade" id="editPositionModal" role="dialog">
    <div class="modal-dialog" style="width:460px;">
        <!-- Modal content-->
        <div class="modal-content" id="edit-position-content">

        </div>
    </div>
</div>

如您所见，表单尚未添加，因此我使用函数添加它:

function modifyPosition(businessId, positionId) {
    $.ajax({
        url: ajaxCallUrl + 'api/ajax/positions/' + positionId + '/get-edit-content',
        type: "GET",
        error: function(req, message) {
            showErrorNotification('It seems something went wrong, sorry...');
        },
        statusCode: {
            400: function (response) {
                showErrorNotification(response.responseText);
            },
            500: function (response) {
                showErrorNotification(response.responseText);
            }
        },
        success: function(data) {
            lastModifiedPositionId = positionId;

            $('#edit-position-content').html(data);
            $('#editPositionModal').modal('show');
        },
    });
}

我在单击打开带有表单的模式的按钮上调用上述函数。

这是ajax请求获取的模态内容:

<div class="modal-header">
    <button class="close" data-dismiss="modal" type="button">&times;</button>
    <h4 class="modal-title">Creating a new position</h4>
</div>
<div class="modal-body">
    <form id="save_edit_position" method="POST">
    <label>Position Title</label>
    <input type="text" class="form-control" style="margin-bottom:20px;" value="{{ $position->position_title }}">
    <label>Position Pay</label>
    <input type="text" class="form-control" style="margin-bottom:20px;" value="{{ $position->position_shift_wage }}">
    <label>Position Type</label>
    <select class="form-control" name="business_position_type" id="position_type_modify">
        <option value="employee">Employee</option>
        <option value="supervisor">Supervisor</option>
        <option value="manager">Manager</option>
        <option value="ownership">Ownership</option>
    </select>
</div>
<div class="modal-footer">
    <button class="btn btn-success" type="submit"><i class="fa fa-sign-in"></i> &nbsp;Save</button>
    </form>
</div>
<script>
var element = document.getElementById('position_type_modify');
element.value = '{{ $position->position_type }}';
</script>

这里是表单提交的 JavaScript 处理程序，位于包含模式内容的页面末尾:

$("#save_edit_position").submit(function(e) {
    alert('Submit Called...');
    e.preventDefault(); 

    $.ajax({
        type: "POST",
        url: ajaxCallUrl + 'api/ajax/positions/' + lastModifiedPositionId + '/save-position',
        data: $("#save_edit_position").serialize(),
        error: function(req, message) {
            showErrorNotification('It seems something went wrong, sorry...' + message);
        },
        statusCode: {
            400: function (response) {
                showErrorNotification(response.responseText);
            },
            500: function (response) {
                showErrorNotification(response.responseText);
            }
        },
        success: function(data)
        {
            var mymodal = $('#editPositionModal');
            mymodal.modal('hide');
            showNotification(data, updatePositionsTable(pageBusinessId)); // show response from the php script.
        }
    });
});

Answer 1

委托(delegate)您提交事件，您的表单会动态添加到页面，因此您需要事件委托(delegate)来绑定(bind)您的事件

$('body').on('submit',"#save_edit_position",function(e) {
....

或使用委托(delegate)点击事件

$('body').on('click',"#save_edit_position input[type='submit']",function(e) {
    ....

请注意，如果页面上有多个具有相同 ID 的表单，则只有第一个具有该 ID 的表单才有效ID 必须是唯一的