在通过ajax提交表单时,新添加的复选框出错

时间:2017-07-04 09:54:25

标签: javascript jquery ajax

无法通过另一个ajax脚本提交删除ajax脚本和新添加的复选框,而无需刷新页面。就像序列化没有看到它们

$('input:submit.delete-checked-categories').on('click', function()
        {
            $.ajax({
                type: 'POST',
                url: 'delete-selected-categories',
                data: $('form.categories').serialize(),
                dataType: 'json',
                success: function(data) {
                    $('div#alert').html('Done!');
                    $('div#alert').animate({top: '100'}, 'fast');
                    $('div#alert').fadeIn(300);
                    $('div#alert').delay(200).fadeOut(300);
                    $("input[type=checkbox]:checked").closest("tr").remove();
                },
                error: function(data) {
                    $('div#alert').html('Error!');
                    $('div#alert').animate({top: '100'}, 'fast');
                    $('div#alert').fadeIn(300);
                    $('div#alert').delay(200).fadeOut(300);
                }
            });
        });

这就是我的提交输入jquery脚本的样子。

我可以检查多个复选框,按下它,然后从表中删除DB和行中的所有复选框。但是我可以通过下面的脚本在这个表单中添加带有新输入的新行

$('input[name="new-category"]').on('click', function(form) {
            form.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'add-category-in-categories',
                data: $('form.categories').serialize(),
                dataType: 'json',
                success: function(data)
                {
                    $('div#alert').html('Done!');
                    $('div#alert').animate({top: '100'}, 'fast');
                    $('div#alert').fadeIn(300);
                    $('div#alert').delay(200).fadeOut(300);
                    $('table.table1 > tbody:last-child').append(data);

                },
                error: function(data)
                {
                    $('div#alert').html('Error!');
                    $('div#alert').animate({top: '100'}, 'fast');
                    $('div#alert').fadeIn(300);
                    $('div#alert').delay(200).fadeOut(300);
                }
            });
        });

表看起来像......

...
<tr id="row-32">
                    <td>
                        <input type="checkbox" name="category[]" value="32" />
                    </td>
                    <td>
                        <a href="http://localhost/projekt2/admin/post?id=32">11</a> (0)                 </td>
                    <td>
                        111                 </td>
                </tr>
                                <tr id="row-33">
                    <td>
                        <input type="checkbox" name="category[]" value="33" />
                    </td>
                    <td>
                        <a href="http://localhost/projekt2/admin/post?id=33">222</a> (0)                    </td>
                    <td>
                        222                 </td>
                </tr>
                                <tr id="row-11">
                    <td>
                        <input type="checkbox" name="category[]" value="11" />
                    </td>
                    <td>
                        <a href="http://localhost/projekt2/admin/post?id=11">dfgdfgsfdgdfg</a> (1)                  </td>
                    <td>
                        sdgfgdgfdgfdgfdgdfgdfg                  </td>
                </tr>
...

问题是,新添加的复选框我无法在不刷新页面的情况下提交。由于脚本提醒Error并且没有任何反应,因此data: $('form.categories').serialize(),没有看到新添加的复选框

enter image description here

使用我无法删除的复选框添加新tr后的效果如何: enter image description here

和html:

<tr>
        <td>
        <input type="checkbox" name="category[]" value="35" checked="checked">

        </td>
        <td>
        <a href="http://localhost/projekt2/admin/category?id=35">tyuyt</a>
        </td>
        <td>
        uytuytu
        </td>
        </tr>

没有ajax和jquery,只需对此&#34;类别[]&#34;的var_dump执行表单发布请求只检查新添加的类别我得到了&#34; NULL&#34;值

此输入位于表格中。整张表是内部形式。效果很好,但不是没有刷新页面。

php中的脚本:

echo json_encode('<tr>
        <td>
        '.form_checkbox(array('name' => 'category[]', 'value' => $category['id'], 'checked' => 'checked')).'
        </td>
        <td>
        '.anchor('admin/category?id='.$category['id'], $category['nazwa']).'
        </td>
        <td>
        '.$category['opis'].'
        </td>
        </tr>');

0 个答案:

没有答案