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

委托您提交活动，您的表单会动态添加到页面中，因此您需要事件委派来绑定您的活动

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

或使用委派的点击事件

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

请注意，如果您在页面上有多个具有相同ID的表单，则只有第一个带有ID的表单才能使用 ID必须是唯一的

Answer 2

你应该使用onSubmit =＆＃34;＆＃34;函数处理程序 df1 = pd.concat([df1.head(3)] * 100, ignore_index=True) %%timeit pd.DataFrame({ 'id': df1['id'].values.repeat([len(w) for w in df1['x,y'].values.tolist()]), 'x,y': df1['x,y'].values.sum() }) 1000 loops, best of 3: 579 µs per loop %%timeit pd.DataFrame({ 'id': df1['id'].repeat(df1['x,y'].str.len()), 'x,y': df1['x,y'].sum() }) 1000 loops, best of 3: 841 µs per loop %%timeit pd.DataFrame({'id': np.repeat(df1['id'].values, df1['x,y'].str.len()), 'x,y': df1['x,y'].values.sum()}) 1000 loops, best of 3: 704 µs per loop

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

您还可以将提交类型更改为此类按钮，并将exit事件添加到javascript函数中。如果您的表单动态生成，但我认为这应该有效。

onclick

你的js应该是

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

Answer 5

尝试

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

我还有一个疑问，请您在代码中分享表单提交的javascript处理程序的确切位置!!

Javascript如何提交表单？

5 个答案: