提交表单后如何清空所有字段（不修改HTML结构）

嘿，你的需求超容易实现！不用改任何HTML结构，只需要在AJAX的success回调里加一行代码，就能搞定所有字段清空的需求啦～

核心实现思路 #

直接利用表单原生的reset()方法，它会自动把表单里所有输入元素（文本框、邮箱框、textarea等）重置到初始状态，完全是最简洁的方案。在jQuery里可以通过两种方式调用：

// 方式1：获取原生DOM元素调用reset
$('#my-form')[0].reset();
// 方式2：用jQuery触发reset事件
$('#my-form').trigger('reset');

修改后的完整jQuery代码 #

把这行代码插入到你现有的成功回调里就行，完整代码如下：

$(document).ready(function() {
  $('#my-form').submit(function(e) {
    $.ajax({
      type: "POST",
      url: "handler.php",
      data: $("#my-form").serialize(),
      success: function(data) {
        alert("Vielen Dank für Ihre Anfragen, wie werden Sie so rasch wie möglich kontaktieren!");
        // 新增：一键清空所有表单字段
        $('#my-form')[0].reset();
        
        // 可选：同步重置滑块组件（如果需要恢复初始状态）
        $('#slider-range-min').slider('value', 0); // 根据你的滑块初始化逻辑调整初始值
        $('#amount').val(''); // 清空金额显示框
      }
    });
    e.preventDefault();
  });
});

额外说明 #

1. 为什么用$('#my-form')[0]？因为jQuery对象本身没有reset()方法，需要拿到原生DOM元素才能调用这个原生方法；trigger('reset')是jQuery的事件触发写法，效果和原生调用完全一致，选哪种都可以。
2. 关于滑块组件：它不属于表单原生输入元素，所以原生reset()不会自动重置它的位置。如果需要把滑块也恢复到初始状态，就加上代码里的可选部分，根据你之前的滑块初始化逻辑调整值就行。
3. 整个方案完全保留了你原有的按钮和HTML结构，没有任何破坏性修改，完全符合你的要求～

内容的提问来源于stack exchange，提问作者Mara