Question

我有索引文件，我加载并显示表单。现在我无法获取我处理已接收值的其他文件的值。像这样我得到事件被解雇但我在调试saveEdit.php文件时没有得到任何价值

HTML：

form name="formDetail" method="post" action="#" >
    <table id="edittable" border="1" cellspacing="2" cellpadding="1">

        <tbody>
            <tr>
                <td>
                    <label>Nimi:</label>
                </td>
                <td>
                    <input id="nimi" name="nimi" placeholder="Kappaleen nimi" type="text">
                </td>
                <td>
                    <label>Levy:</label>
                </td>
                <td>
                    <input id="levy" name="levy" placeholder="Levyn tunnus" type="text" width="10px">
                </td>
            </tr>
            <tr>
                <td>
                    <label>Artisti:</label>
                </td>
                <td>
                    <input id="artisti" name="artisti" placeholder="Kappaleen esittäjä" type="text">
                </td>
                <td>
                    <label>Kieli:</label>
                </td>
                <td>
                    <input id="kieli" name="kieli" placeholder="Alkuperäiskieli" type="text" width="20">
                </td>
            </tr>
            <tr>
                <td>
                    <label>Numero:</label>
                </td>
                <td>
                    <input id="numero" name="numeron" placeholder="Numero" type="text">
                </td>
                <td>
                    <input name="submit" class='save_button' type="button" value="Tallenna" />
                    <input name="delete" type="button" value="Poista" /></td>
            </tr>
        </tbody>
    </table>
    <input type="hidden" name="id_number" id="id_number"   />
</form>

使用Javascript：

jQuery(document).ready(function ($) {
    $('body').on('click', '.clickable-row', function () {
        $('tr').removeClass('selected');
        $(this).addClass('selected');

        var selectedRow = $(this);
        var td = $(selectedRow).children('td');
        console.log(td);

        $('#nimi').val(td[0].innerText);
        $('#artisti').val(td[1].innerText);
        $('#levy').val(td[2].innerText);
        $('#kieli').val(td[3].innerText);
        $('#numero').val(td[4].innerText);
        $('#id_number').val(td[4].innerText);

        console.log("test");
        $('#edit').show();
    });


    $('#formDetail').on('click', '.save_button', function () {
        $.post("saveEdit.php", $(this).serialize())
            .done(function (data) {
                console.log(data)
            });
    });

    $('#pageContent').load('container.php');
});

Answer 1

尝试使用带有preventDefault()的提交处理程序来停止处理标准提交POST：

$('#formDetail').on('submit', function (event) {
    event.preventDefault();
    $.post("saveEdit.php", $(this).serialize())
        .done(function (data) {
            console.log(data)
        });
});

Answer 2

继续使用委派的提交侦听器，因为看起来您正在使用ajax加载内容。

但您还需要阻止默认的浏览器表单提交过程：

$(document).on('submit', '#formEditeditBiisi', function(event) {
  event.preventDefault();//prevent browser submitting form
  $.post("saveEdit.php", $(this).serialize())
    .done(function(data) {
      console.log(data)
    });
});

获取表单提交活动？

2 个答案: