jQuery定时自动保存表单异常：重复创建新表单求助

嘿，我一眼就揪出了你代码里的两个关键问题，正是它们导致表单不断被重复创建：

核心问题拆解 #

1. 选择器写错导致ID回填失败
   你成功回调里的$("success").html(data);是在找<success>这种不存在的标签，而不是class或id为success的元素！这行代码会直接报错，导致后面的$('.formid').val(data);根本没机会执行——.formid永远是空的，所以判断条件formidlength.length <1永远成立，自然不断创建新表单。

2. 变量命名混淆（虽不致命但容易踩坑）
   var formidlength = $('.formid').val();里的变量名起错了，它存的是.formid的值，不是长度，用它的length属性判断虽然初始有效，但逻辑上容易搞混，不如直接判断值是否为空。

修正后的完整代码 #

jQuery部分 #

var userid = $('.userid').val();
var timer = setInterval(function() {
  var formId = $('.formid').val();
  // 直接判断表单ID是否为空，比判断length更直观
  if (!formId) {
    // 首次创建新表单
    $.ajax({
      type: 'post',
      url: ajax_object.ajaxurl,
      data: {
        action: 'save',
        data: $('form').serialize(),
        form_user: userid,
      },
      success: function(data) {
        // 修正选择器！假设你的提示元素是class为success的div，根据实际调整
        $(".success").html(data);
        // 这行终于能正常执行，回填formid了
        $('.formid').val(data);
        
        // 可选优化：创建成功后，把定时器改成更新逻辑，避免无效轮询
        clearInterval(timer);
        timer = setInterval(function() {
          // 这里是更新表单的AJAX，后端要对应实现update的action
          $.ajax({
            type: 'post',
            url: ajax_object.ajaxurl,
            data: {
              action: 'update',
              data: $('form').serialize(),
              form_id: formId, // 用刚拿到的ID做更新标识
              form_user: userid,
            },
            success: function(updateData) {
              $(".success").html(updateData);
            },
            error: function(xhr) {
              console.error('更新失败:', xhr.responseText);
            }
          });
        }, 3000); // 建议把间隔拉长到3秒，减少服务器压力
      },
      error: function(xhr) {
        // 加个错误提示，方便调试
        console.error('创建表单失败:', xhr.responseText);
        $(".success").html('保存失败，请稍后重试');
      }
    });
  }
}, 600);

HTML部分（补充提示元素） #

<div class="entry-content">
  <input type="hidden" class="formid" name="formid" value="">
  <input type="hidden" class="userid" name="userid" value="1">
  <!-- 新增提示用的容器，对应上面的选择器 -->
  <div class="success"></div>
  <div class="form-wrapper">
    <form method="post" class="new">
      <!-- 这里放你的表单输入字段 -->
    </form>
  </div>
</div>

关键改动说明 #

• 修复选择器错误：把$("success")改成.success（如果是ID就用#success），确保ID能正常回填到隐藏域。
• 简化空值判断：用!formId代替formidlength.length <1，空字符串、null都会被正确判定，逻辑更清晰。
• 优化定时器逻辑：首次创建成功后，切换成更新模式的定时器，避免无意义的轮询，还能减少服务器请求压力。
• 增加错误处理：添加AJAX的error回调，方便你排查请求失败的问题。

额外小建议 #

• 别用600ms这么短的间隔，3-5秒足够了，太频繁的请求会拖慢服务器。
• 也可以改成监听表单字段变化再触发保存，比固定轮询更高效。

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