清除父字段集中的文本框答案

【问题标题】：Clear text boxes in parent fieldset清除父字段集中的文本框
【发布时间】：2014-07-10 04:34:40
【问题描述】：

我正在使用这个"Fancy Slider" 插件，它基本上通过并排设置多个字段集来工作。由于每个字段集都是同一类的成员，因此我试图找到为每个表单添加清除按钮的最简单方法，并使用 jQuery 单独清除该特定表单中的输入字段。

我尝试使用.parent()、.parents() 和.closest() 来隔离用户正在处理的字段集，但没有成功。虽然我可以清除我正在处理的表单，但我最终会清除应用程序中每个字段集中的表单。我们经常使用 jQuery，所以我对此比较陌生。有任何想法吗？

jQuery

    $('#clearButton').click(function() {
        $(this).closest('fieldset').find('input:text').val('');
        $('#Pensgc').attr('readonly', false);
    });

剃须刀示例

<fieldset class="step">
    <legend>Display Exceptions</legend>
    <center>
        <table id="ExceptionEditing">
            <thead>
                <tr>
                    <th>Exception Name</th>
                    <th>Starting Letter</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < Model.ExceptionList.Count(); i++)
                {
                    <tr id="@Model.ExceptionList[i].Id">
                        <td>
                            @Html.TextBoxFor(anything => Model.ExceptionList[i].ExceptionName, new {style = "width:300px;", @readonly = "readonly", maxlength=255 })
                        </td>
                        <td style="padding-left:30px;" class="EditStartingLetter">
                            @Html.TextBoxFor(anything => Model.ExceptionList[i].StartingLetter, new {style = "width:10px;", @readonly = "readonly", maxlength=1 })
                        </td>
                        <td style="padding-left:10px;">
                            <a href="#" class="editException">Edit</a>
                        </td>
                        <td style="padding-left:10px;">
                            <a href="#" class="deleteException">Delete</a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </center>
</fieldset>
<fieldset class="step">
    <center>
        <legend>Create Exception</legend>
        <table>
            <tr>
                <td>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.createExceptionName)
                    </div>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.createExceptionName, new { @class="AlphaNumOnly", maxlength=255 })
                    </div>
                </td>
                <td>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.createExceptionLetter)
                    </div>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.createExceptionLetter, new { @class="AlphaNumOnly", maxlength=1 })
                    </div>
                </td>
            </tr>
        </table>
        <button type="submit" class="submitButton">Submit</button>
        <button type="submit" class="clearButton">Clear</button>
    </center>
</fieldset>

编辑

这是一个有效的小提琴：http://jsfiddle.net/rZa2j/

【问题讨论】：

工作 jsfiddle 帮助我们帮助你
您的选择器与您的 HTML 相比是错误的。您正在使用 #clearButton 这是一个 ID。在您的 HTML 中，您有 class="clearButton"。
请把生成的html贴出来
@NealR Kyle 有答案。您正在按 ID 选择按钮，但它只有类。
@MikeBell - 刚刚添加了一个小提琴

标签： javascript jquery html

【解决方案1】：

阅读文档后，我在他们的 JavaScript 中发现了以下行：

current = $this.parent().index() + 1;

其中 $this 指的是被点击的。这意味着：如果打开第二个选项卡，则 current 将为 1。

var fieldsetCount = $('#formElem').children().length;

这就是他们检索幻灯片数量的方式。通过将所有内容放在一起，您可以使用以下代码获取当前字段集：

var currentFieldsetIndex = $(".selected").index();
var $currentFieldset = $("#formElem").children().eq(currentFieldsetIndex);

然后你可以扩展你的功能

$currentFieldset.find("input:text").val("");

【讨论】：

【解决方案2】：

刚刚意识到我将type 属性设置为reset。以前从未使用过它，但是删除它可以解决问题。

<button class="clearButton">Clear</button>

【讨论】：

正要发布这个答案。使用reset 和submit 将导致表单在单击时执行其默认操作。为避免这种情况，您可以在 click 函数中使用 evt.preventDefault() 以确保表单不会执行其原生的 reset 和 submit 操作。