【问题标题】:Hide button inside a table after form submit?表单提交后隐藏表格内的按钮?
【发布时间】:2014-09-19 01:24:27
【问题描述】:

所以,我正在尝试创建一个包含删除按钮的行,以便在按下删除后隐藏。 问题是..删除按钮提交表单,我无法预定义我的按钮类/ID,因为它多次回显(php脚本读取一个目录,然后将所有文件放在一个表中)

这是当前脚本,它确实在后台发布表单,但它没有隐藏元素,我自己尝试了一些东西,但脚本最终隐藏了页面上的所有按钮,否则它不会完全工作..

按钮蜂鸣:

echo "<input type='submit' value='delete' name='submit'>";

背后的脚本:

$("#delform").submit(function() {

    var url = "../../setdel.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#delform").serialize(), // serializes the form's elements.
           success: function(data)
           {
             // location.reload(); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
});

【问题讨论】:

  • @PHPglue OP 正在使用submit 按钮,这通常会导致页面回发/刷新
  • 我不知道任何其他方式,我的脚本从当前登录的用户中读出一个目录,然后将所有文件显示在一个表中,我知道如何处理删除的唯一方法是使用提交给删除所选文件的 php 文件的表单。

标签: javascript php jquery html forms


【解决方案1】:

捕捉按钮的点击而不是捕捉提交。示例:

echo "<input type='submit' value='delete' name='delete' class='trigger_delete'>";
                                            //  ^^ don't name your buttons as submit
                                            // it will conflict to .submit() method

关于 JS:

$('.trigger_delete').on('click', function(e){
    e.preventDefault(); // prevent triggering submit
    var url = "../../setdel.php";

    $.ajax({
        type: 'POST',
        url: url,
        data: $("#delform").serialize(),
        success: function(response) {
            console.log(response);
            $(e.target).closest('tr').hide(); // or .fadeOut();
        }(e) // <--- this one
     });
});

【讨论】:

  • 它确实删除了,但这只是隐藏了该表中的所有删除按钮,行仍然存在:)
  • @Sjef92 好的,所以我确实删除了,检查我的修订,我忘了引用触发按钮的对象,再试一次
  • 仍然只有删除按钮,这次不是所有的删除按钮,而是指定的一个。所以这是进步! :D
  • @Sjef92 啊,所以你真正想要的是被删除的整行,而不是按钮本身?所以这个按钮在&lt;tr&gt;&lt;td&gt;&lt;input delete&gt;&lt;/td&gt;&lt;/tr&gt; 里面是这样的吗?
  • @Sjef92 再次检查我的修订,应该删除整行而不是只删除按钮
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-07-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-03-24
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多