jquery 使用值填充123 FormBuilder字段

hivapdat  于 12个月前  发布在  jQuery
关注(0)|答案(2)|浏览(108)

这个问题可能对123FormBuilder来说太具体了,但我把它放在那里,希望有人有一些见解。
我将自定义HTML添加到表单中,沿着jQuery,以允许用户从可用停车位的图像中选择1个停车位(就像在剧院中挑选座位一样)。

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("Are you sure you want to change your Parking Selection?")){
      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"));
}

字符串
有一些文档here,建议您必须设置控件与输入字段的值。这里是一个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元素,但不清楚如何更新它,以便表单在提交时接受此数据。

更新

我让它工作 * 一次 *,并没有能够复制它。
我更新了代码如下:

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


当我检查input元素时,它的属性似乎发生了变化,但是当我提交表单并查看结果时,我仍然有一个0值。

c9x0cxw0

c9x0cxw01#

在不了解123 FormBuilder的情况下,我发现.attr("value", s)很奇怪:我会使用.val(s),这是在jQuery中设置输入元素值的正确方法(例如,请参阅“Difference between attr() and val() in jQuery“)。
仔细检查$rvSpot选择器是否正确,是否针对正确的元素。并确保value属性直接位于输入元素上,并且没有其他脚本或表单验证可能会在提交时将值重置为0
我还将使用.on( "change" [, eventData ], handler)(因为.change()处理程序API已被弃用)在设置值后触发更改事件。这很重要,因为某些表单侦听更改事件以注册值已更新。

+------------------+           +-----------------+
| User Interaction | --click-> | makeSelection() |
+------------------+           +-----------------+
         |                                     |
         |                                     |
         v                                     v
+------------------+           +------------------+
| Update $rvSpot   |           | startCountdown() |
+------------------+           +------------------+

字符串
您的更新代码将是:

// rest of your code

function makeSelection(e){
  // existing code
  $.post("https://myurl.tld/take-spot.php", { land: l, spot: s }, function(results){
    el.addClass("selected");
    $rvSpot.val(s).trigger("change"); // use trigger to programmatically trigger the change event
    console.log($rvSpot.val()); // for debugging
    startCountdown();
  });
}

// rest of your code

// Bind change event handler to $rvSpot if needed elsewhere in the code
$rvSpot.on("change", function() {
  // Handler code here
});


这应该会正确地更新$rvSpot的值,并通知任何其他事件侦听器该值已更改。
请记住验证input元素的name和ID属性,以确保表单在提交时能够识别输入。
另一种方法将在How to Prefill Form Fields:123 FormBuilder中描述,它通过构造一个自定义URL来支持预填充表单字段,该URL具有与表单字段ID和要预填充的值相对应的参数。当您希望根据已知信息将用户定向到某些字段已填充的表单时,这很有用。
但是,此方法与您一直使用的方法不同,后者涉及在表单已加载到用户浏览器中之后使用JavaScript动态设置表单字段的值。
根据123 FormBuilder文档,表单字段不是通过使用jQuery操作DOM元素直接填充的(就像您尝试使用$rvSpot.val(s).trigger("change")所做的那样)。相反,您将使用表单的字段ID和所需的预填充值作为查询参数来构造URL。
对于您的JavaScript代码中描述的场景,您似乎希望在用户与表单交互时实时更新表单字段,而不是在表单加载之前通过URL预填充它。因此,123 FormBuilder文档中的预填充URL方法并不直接适用于您的情况。
在您的JavaScript代码中,当您动态设置输入的值并希望表单在提交时识别它时,您需要确保:

  1. JavaScript代码正确地更新输入字段的值。
    1.触发表单生成器用来检测变化的任何事件监听器。
    1.表单的提交过程识别动态设置的值。
    如果表单提交无法识别JavaScript更新的值,则可能是由于表单生成器的内部机制跟踪更改或验证输入,这可能是由于JavaScript .trigger("change")方法未复制的用户输入事件。
    上面提到的处理程序($rvSpot.on("change", function() {...})与第2点有关。
    一个例子是
$rvSpot.on("change", function() {
  // That is the handler code that will run every time the value of $rvSpot changes.
  var newValue = $(this).val();
  
  // You might want to perform some validation, logging, or other functionality when the value changes.
  console.log("New parking spot selected:", newValue);

  // If the form relies on some validation or additional processing on change events,
  // you would include that logic here. For example:
  validateParkingSpot(newValue); // A hypothetical function to validate the selection.
  
  // Or, if you need to enable/disable a submit button based on this value:
  var isFormValid = newValue !== "0" && newValue !== ""; // Simple validation check.
  $("#submit-button").prop("disabled", !isFormValid); // Enable/disable the button.
});


这就是确保表单的提交过程识别动态设置的值的方法,因为处理程序确保无论输入值发生变化,无论该变化是直接来自用户还是来自脚本,都将处理从验证到启用提交按钮的所有步骤。
.attr("value")不是一个好的方法,但我尝试了.val(),并没有得到改善的结果;所以我正在尝试替代品。
检查Input元素,它有来自123 Forms的focusblur事件绑定到它。我没有看到任何for更改。
我怀疑你是对的,我需要找到一些更高的形式验证。似乎只是将值添加到Input并不足以让它被接受。
如果输入元素绑定了focusblur事件,则123 FormBuilder可能会将这些事件用作其验证或状态管理系统的一部分。缺少直接更改事件处理程序并不一定意味着不会检测到对输入值的更改,但它确实表明表单可能依赖于focusblur事件来触发其内部更改检测机制。
使用.val()设置值后,您可以尝试触发focusblur事件来模拟用户交互:

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


这与Mark Schultheiss的评论类似:
也许只需更改$rvSpot.trigger("focus").attr("value", s).trigger("blur");以首先填充值,然后触发触发器,即$rvSpot.val(s).trigger("focus").trigger("blur");
这应该模拟用户选择一个值:输入得到值(val(s)),用户“关注”输入(trigger("focus")),然后离开它(trigger("blur"))。如果表单生成器正在寻找这些事件来验证或处理输入,则此序列更有可能被识别为合法的用户操作。
表单可能有附加到其字段的其他事件处理程序,用于验证或其他目的。您可以在浏览器的开发人员工具中检查元素,以查看是否有在代码中不可见的事件侦听器。

如果表单生成器使用更复杂的机制来跟踪更改,则可能需要使用MutationObserver来监视输入元素的更改并做出相应的React。
确保输入字段具有与服务器期望的相对应的name属性。表单数据在提交时通常由name属性键控。
如果所有其他方法都失败了,并且您可以控制服务器端逻辑,请考虑在表单提交后直接在服务器上更新值。这将是一个不太优雅的解决方案,并且只应在没有其他选项可用时使用。

gkl3eglg

gkl3eglg2#

我终于在这里找到了答案:
https://www.123formbuilder.com/docs/js-tips-how-to-pass-an-input-from-one-field-to-another-in-the-same-form/
似乎有一个带有Get和Set方法的处理程序。
下面是工作代码。

var $drop = $("[data-id='000000000']");
var $rvSpot = $("[data-id='000000000']");
var targetControlId = 000000000,
targetControlInstance = loader.getEngine().getDocument().getElementById(targetControlId);

$("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("select option:selected").data("index");
  var s = el.attr("id");
  if($(".selected").length){
    if(!confirm("Are you sure you want to change your RV Selection?")){
      return false;
    }
    removeSelected(l, el, function(){
      console.log("Spot removed, callback executed");
      makeSelection(e);
    });
  } else {
      console.log("Making Selection", l, s);
      $.post("https://www.unscruz.org/ticketing/take-spot.php", { land: l, spot: s }, function(results){
          el.addClass("selected");
          targetControlInstance.setValue({value: s});
          $(".countdown").append("<span id='spot-selected'>Selected: " + s + "</span>");
          startCountdown();
      });
  }
}

function removeSelected(l, el, callback){
    var s = $(el).attr('id');
    console.log("Removing Selection", l, s);
    $.post("https://www.unscruz.org/ticketing/release-spot.php", { land: l, spot: s }, function(){
        $(".selected").removeClass("selected");
        targetControlInstance.setValue({value: ""});
        stopCountdown();
        if(callback != undefined && typeof callback == "function"){
            callback();
        }
    });
}

字符串

相关问题