在同一个 php 文件中提交表单时如何在选项卡之间切换？

Question

我的页面有两个选项卡面板。一个是导入选项卡，另一个是编辑选项卡。在导入选项卡中，我有一个有多行的 table，每行都有编辑和删除按钮。当我单击编辑按钮时，我想显示编辑选项卡，其中包含来自导入选项卡的表单提交数据。但是我用表单提交制作了这两个按钮（edit/delete）。所以，问题是我无法进入编辑选项卡，因为当我单击编辑按钮时表单会重新加载。

<ul class="tab_bar">
    <li id="import_tab" onClick="switchImport()">Import File</li>
    <li id="edit_tab" onClick="switchEdit()">Edit Questions</li>
</ul>
<div class="panel" id="import_panel"> 
<?php                   
    $row_no = 0;
    echo "<tbody>";
    while($q_row = mysql_fetch_array($quest_query)) {
    echo "<tr>";
    echo "<td id='tbl_no'>".++$row_no."</td>";
    echo "<td id='tbl_quest'>".$q_row['question']."</td>";
    echo "<td id='tbl_act'>
          <form id=\"edit_form\" method=\"post\">
          <input type=\"hidden\" name=\"q_id\" value=\" ".$q_row['id']. " \" />
          <input type=\"hidden\" name=\"q_row_no\" value=\" ".$row_no." \" />
          <input type=\"submit\" id=\"btn_edit\" name=\"Edit\" value=\"Edit\"> / <input type=\"submit\" id=\"btn_delete\" name=\"Delete\" value=\"Delete\">
          </form>
          </td>";
    echo "</tr>";
    }
 echo "</tbody>";
?>
</div><!-- import panel end -->

<div class="panel" id="edit_panel">
     #I want to show this tab panel when I click edit from import tab
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#import_table").DataTable();

        $("#edit_form").submit(function(e){
            $("#edit_tab").trigger("click");
        });
    });
    function get(obj) {
        return document.getElementById(obj);
    }
    function switchImport() {
        get("import_tab").style.background = "#8CB3E3";
        get("edit_tab").style.background = "#fff";
        get("import_panel").style.display = "block";
        get("edit_panel").style.display = "none";
    }
    function switchEdit() {
        get("import_tab").style.background = "#fff";
        get("edit_tab").style.background = "#8CB3E3";
        get("import_panel").style.display = "none";
        get("edit_panel").style.display = "block";
    }
    </script>

我已经尝试使用触发器，但它不起作用。

$("#edit_form").submit(function(e){
    $("#edit_tab").trigger("click");
 });

我可以使用 ajax 执行该操作吗？请给我建议。

Answer 1

$("#edit_form").submit(function(e){
    // some actions you want to do
    // ......

    return false; // prevent the default submit event
    // e.preventDefault() // or this approach, it also works    
});

Answer 2

现在，我可以解决问题了。在编辑面板中，我们可以简单地设置 css 这样的样式

<div class="panel" id="edit_panel">
     <style type="text/css">
        #import_tab{background:#fff;}
        #edit_tab{background:#8CB3E3;}
        #import_panel{display:none;}
        #edit_panel{display:block}
    </style>

 #other php code
</div>

所以现在，当我们从导入选项卡中单击编辑按钮时，我们可以进入编辑面板。

在同一个 php 文件中提交表单时如何在选项卡之间切换？

How to switch between tab when form submitting in same php file?

php

tabs

form-submit