Question

我有以下HTML代码

<form method="POST" action="http://localhost:8000/machines/11" accept-charset="UTF-8" role="form" id="formMachine" class="form-horizontal">
    <div class="tabs-container">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#generalInfo"> <i class="fa fa-comment"></i> General Information</a></li>
            <li class=""><a data-toggle="tab" href="#customMacros"><i class="fa fa-paperclip"></i> Custom Macros</a></li>
        </ul>
        <div class="tab-content">
            <div id="generalInfo" class="tab-pane active">
                <div class="panel-body" style="height:490px;">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Machine</label>
                        <div class="col-sm-10">
                            <input class="form-control" name="name" type="text" value="machine1">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="customMacros" class="tab-pane">
            <div class="panel-body">
                <label>My Macros</label>
                <div style="margin-top :20px;">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <td><strong>MacroName</strong></td>
                                <td><strong>MacroValue</strong></td>
                                <td><strong>Description</strong></td>
                                <td><strong>Action</strong></td>
                            </tr>
                        </thead>
                        <tbody class="tbody">
                            <tr>
                                <td>testmacro</td>
                                <td>this is test maro</td>
                                <td>1</td>
                                <td>
                                    <form action="http://localhost:8000/machines/macro/delete" class="form-horinzontal" id="deleteCustomMacroForm19" method="POST" >
                                        <input  type="hidden" name="customMacroID" value="19">
                                        <input type="hidden" name="_token" value="Ikt1wt7grJskDVY652xYi61G89nyZKhcjMdMSGfG">
                                        <input type="hidden" class="custommacroname" value="testmacro">
                                        <a href="#" id="deleteCustomMacroButton19" class="btn btn-sm btn-white deleteButton"><i class="fa fa-close"></i></a>
                                    </form>
                                </td>
                            </tr>
                            <tr>
                                <td>macro2</td>
                                <td>macro2</td>
                                <td>this is macro2</td>
                                <td>
                                    <form action="http://localhost:8000/machines/macro/delete" class="form-horinzontal" id="deleteCustomMacroForm21" method="POST" >
                                        <input  type="hidden" name="customMacroID" value="21">
                                        <input type="hidden" name="_token" value="Ikt1wt7grJskDVY652xYi61G89nyZKhcjMdMSGfG">
                                        <input type="hidden" class="custommacroname" value="macro2">
                                        <a href="#" id="deleteCustomMacroButton21" class="btn btn-sm btn-white deleteButton"><i class="fa fa-close"></i></a>
                                    </form>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</form>

单击删除按钮时，表单正在发布。以下是执行此操作的JS代码。

    $('tbody').on('click', 'a.deleteButton', function(e) {

        var buttonID = this.id;
        console.log(buttonID);
        var form = $(this).closest('form')[0];
        console.log(form);
        var formID = form.id;
        console.log("Form ID : "+ formID)
        var macroName = $(this).prev().val();


        // delete machine record
        var message = "Are you sure you want to delete <strong> " + macroName + " </strong> macro ?";
        var params = {title:"Delete Macro ? ", text: message, type:"warning", showCancelButton:true, allowEscapeKey:true,allowOutsideClick:false,confirmButtonText:'Yes'};
        submitAForm(buttonID,formID, params );

    });

问题我面临的问题是，只要点击第二项，表单iD工作正常，项目确实被删除，但是当单击第一项时，表单ID都是错误的。这只发生在第一个项目（它没有被删除），但是对于其他每个项目都可以正常工作。

当我点击第二项时，这就是我所看到的（以及哪些是正确的值）

https://infinit.io/_/csfAPG4

然而，当我点击第一项时，这就是我所看到的

https://infinit.io/_/3hd8X8F

在第二种情况下，FormID完全错误。你能告诉我我做错了什么吗？

谢谢

Answer 1

首先要做的事情是：不要嵌套表格（详见此处：Can you nest html forms?）。

解决这个问题，你应该很高兴。

Answer 2

这就是我的想法。它选择整体表单值id：formMachine（你的html的第一行）因为没有焦点，所以这是最接近的形式。然后在第二次单击时，按钮具有焦点，并且最近的形式是正常的。页面加载时，请确保表单中的某些内容具有焦点。

使用jquery

2 个答案: