JavaScript如何提交表格？

Question

我有一個問題，想通過JavaScript用表單提交，但是很明顯，在嘗試執行此操作時遇到了一個問題，想知道是否有人可以幫助我解決該問題，有關此問題和代碼示例的更多信息，請參見下文。

你好。 提交添加的表單時，我的form .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

委托您提交事件，您的表單會動態添加到頁面中，因此需要事件委托來綁定事件

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

或使用委派的Click事件

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

請注意，如果頁面上有多個具有相同ID的表單，則只有第一個具有ID的表單才能使用ID必須是唯一的

Answer 2

您應該使用onSubmit =“”函數處理程序onsubmit="functionhere();"

Answer 3

您的表格結構不正確

<div class="modal-footer">
    <button class="btn btn-success" type="submit"><i class="fa fa-sign-in"></i> &nbsp;Save</button>
    </form>

您不能合法地跨過表單標簽，並且根據以前的經驗，這可能會引起問題。

Answer 4

您還可以像這樣將提交類型更改為按鈕，並將onclick事件添加到javascript函數。 如果您的表單是動態生成的，但是我認為這應該可行。

<div class="modal-footer">
    <input class="btn btn-success" type="button" value="Save" onclick="_submitForm();"/>
</div>

而且你的js應該是

function _submitForm(){
    alert('Submit Called...');

    $.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 5

嘗試

$("form.save_edit_position").submit(function(e) {...}

我還有一個疑問，您能否為代碼中的表單提交共享javascript處理程序的確切位置！