Question

我想在单击“清除”按钮时清除表单中的所有字段。 ajax请求仅将表单从标记<form>替换为</form>。单击“清除”按钮时，控制台输出正在运行。

我有以下表格：

<div class="col-lg-5 formWrapper">
    <form data-th-fragment="layoutForm" id="layoutForm" class="form-horizontal" data-th-object="${layout}" data-th-action="@{/layouts/add}" method="POST" role="form">
        <div class="row">
            <input id="objectId" data-th-field="*{id}" type="hidden">
            <input data-th-if="*{filePath} !=null" data-th-field="*{filePath}" type="text" hidden="hidden">
            <label for="layoutName" >Layout name</label>
            <input data-th-field="*{name}" id="layoutName" class="form-control" type="text">
        </div>
        <div class="row">
            <div class="col-lg-4">
                <label for="status">Status</label>
                <select id="status" data-th-field="*{status}"class="form-control">
                    <option value="1">Active</option>
                    <option value="0">Blocked</option>
                </select>
            </div>
            <div class="col-lg-6">
                <label for="exhibitorName">Exhibitor</label>
                <select data-th-field="*{exhibitor}" name="exhibitorName"  id="exhibitorName" class="form-control">
                    <option data-th-each="exhibitor : ${exhibitorsList}" data-th-value="${exhibitor.id}" data-th-text="${exhibitor.exhibitorName}"></option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class=" col-lg-3">
                <input id="clearForm" type="reset" value="Clear" class="form-control btn-lg btn btn-default">
            </div>
            <div class=" col-lg-3 col-lg-offset-4">
                <input id="submitButton" type="submit" value="Add" class="form-control btn-lg btn btn-success">
            </div>
        </div>
    </form>
</div>

表单看起来像这样：

jQuery如下：

$(document).ready(function() {
    $('.formWrapper').on('click','#clearForm', function (event) {
        $(this).closest('form').find("input[type=text]").val("");
        console.log("ASD");
    });
});

剪切是我如何替换表单：

$("body").on('click','#editLayout', function(event){
    var ajax = $.ajax({
        url : "/layouts/edit/" + $(this).data("id"),
        dataType : "html",
        success: function (data) {
            $("#layoutForm").replaceWith(data);
            $('#submitButton').val('Edit').addClass('btn-warning').removeClass('btn-success');
        }
    });
});

Answer 1

试试这个，

$('#form_id').trigger("reset");

或

$('#form_id')[0].reset();

重置按钮根本不需要任何脚本（或名称或ID）：

<input type="reset">

你已经完成了。但是如果你真的必须使用脚本，请注意每个表单控件都有一个表单属性引用它所在的表单，所以你可以这样做：

<input type="button" onclick="this.form.reset();">

但重置按钮是更好的选择。

Answer 2

尝试使用$（'＃clearForm'）。reset（）;或$（'＃clearForm'）[0] .reset（）;

jQuery和Ajax没有工作$ .on

2 个答案: