如何为123FormBuilder字段赋值并确保表单提交时生效？

我在123FormBuilder中为表单添加了自定义HTML与jQuery，实现类似影院选座的停车位选择功能，但遇到表单提交时无法正确识别选中车位值的问题。

现有功能代码 #

var $drop = $("[data-id='109672317'] select");
var $rvSpot = $("[data-id='110061531'] input");

$("path.enabled").on("mouseover", function(){
  $(this).toggleClass("highlight");
}).on("mouseout", function(){
  $(this).toggleClass("highlight")
}).on("click", makeSelection);

function makeSelection(e){
  var el = $(e.target);
  var l = $drop.find("option:selected").data("index");
  var s = el.attr("id");
  console.log("Making Selection", l, s);
  if($(".selected").length){
    if(!confirm("确认要更改停车位选择吗？")){
      return false;
    }
    removeSelected(l, e.target);
  }
  $.post("https://myurl.tld/take-spot.php", { land: l, spot: s }, function(results){
    el.addClass("selected");
    $rvSpot.trigger("focus").val(s).trigger("blur");
    console.log($rvSpot.val());
    startCountdown();
  });
}

function removeSelection(l, el){
  s = $(el).attr('id');
  console.log("Removing Selection", l, s)
  $.post("https://myurl.tld/release-spot.php", { land: l, spot: s }, function(){
    $(".selected").removeClass("selected");
    $rvSpot.trigger("focus").val(0).trigger("blur");
    stopCountdown();
  });
}

function startCountdown(){
  var m = 09, s = 60, t, $ct = $(".countdown .timeleft");
  $ct.html("10:00");
  $ct.data("timer", setInterval(function(){
    s--;
    if(s == 00){
      m--;
      s = 59;
    }
    if(m < 2){
      $ct.css("color", "red");
    }
    if(m == 00 && s == 00){
      stopCountdown();
      removeSelection($(".image-map", $(".selected")));
    }
    $ct.html(m + ":" + s);
  }, 1000));
}

function stopCountdown(){
  clearInterval($(".countdown .timeleft").data("timer"));
}

表单对应HTML片段 #

<div data-role="container" data-type="virtual-form-table-row" data-hash="0000001d" data-type-id="0" data-colspan="20" data-num-children="1">
  <div data-role="control" data-type="text" data-hash="0000001c" data-type-id="23" data-colspan="20" data-is-hidden="1" data-renderer-type="tln" data-id="110061531"><label data-role="label" id="text-0000001c-acc" data-i18n-text="control_label_110061531">Parking Spot</label><dt data-role="instructions" id="text-0000001c-instr-acc" data-is-empty="1" data-i18n-text="control_instructions_110061531"></dt>
    <div data-role="input-row" data-is-first-row="1" data-is-last-row="1" data-fill-colspan="0">
      <div data-role="input-container" data-ui-role="ui-element" data-size="full"><span data-role="prefix-label" id="price-0000001c-prefix-acc" style="display: none;"></span><input type="text" data-role="i123-input" data-no-theme="" aria-labelledby="text-0000001c-acc text-0000001c-error-acc text-0000001c-instr-acc" id="text-0000001c"
          value="0" placeholder="" style="padding-left: 8px;"></div>
    </div><label data-role="error" id="text-0000001c-error-acc" data-is-empty="1"></label></div>
</div>

问题详情 #

文档提示需为Control元素而非直接为Input字段设置值，我能定位到对应的Control元素，但不清楚如何更新它才能让表单提交时识别数据。

我曾成功过一次但无法复现，后来将代码修改为：

$rvSpot.trigger("focus").attr("value", s).trigger("blur");

现在查看Input元素时，其value属性确实已修改，但表单提交后，后台收到的值仍为初始的0。

解决方案 #

核心原因 #

123FormBuilder这类低代码表单工具，会将表单数据存储在内部状态对象中，单纯修改Input的DOM属性或值，不会同步到这个内部状态，导致提交时仍使用初始值。

解决步骤 #

1. 定位Control元素：找到对应data-role="control"的容器（即HTML中data-id="110061531"的div）
2. 调用官方内置方法更新值：123FormBuilder提供了setVal()方法用于给控件设置值，需直接操作控件实例而非DOM元素。

修改后的代码片段（替换原设置Input值的部分）：

// 获取Control容器与控件实例
var $control = $("[data-id='110061531']");
var controlInstance = $control.data("control");

// 调用官方方法设置值
if(controlInstance && typeof controlInstance.setVal === "function"){
  controlInstance.setVal(s);
}

// 保留焦点触发，确保UI状态同步
$rvSpot.trigger("focus").trigger("blur");

额外注意事项 #

• 如果无法获取controlInstance，可以尝试触发Input的input事件强制同步内部状态：

  $rvSpot.val(s).trigger("input").trigger("blur");
  

• 倒计时函数中的removeSelection调用参数存在问题，需修正为获取当前选中的车位元素与对应的场地值：

  var selectedEl = $(".selected");
  var currentLand = $drop.find("option:selected").data("index");
  removeSelection(currentLand, selectedEl);
  

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