0

在 formstack 表单中，我需要能够将列表作为参数传递给表单，并从该列表中创建用户可以选择的复选框或下拉菜单，并将其保存在 formstack 的数据库中并像所有其他一样发送到集成字段。这是我想发送的示例：

http://theformurl?list=option1,option2,option3,option4

由此，我尝试在页眉、页脚或嵌入代码中的任何一个（或两者的混合）中使用代码插入来在加载时创建一个看起来和行为与所有其他字段一样的新字段。

我一直在修补 Jenna Molby 使用此处找到的 url 参数动态修改 html 的方法：

https://jennamolby.com/tutorial-examples/dynamic-content-based-on-a-url-parameter-example/

但到目前为止还没有运气。目前，我还没有成功地让动态文本填充到表单中，更不用说一个表单域，然后与 formstack 的后端对话。

这是可行的，如果是这样，任何人都可以推荐一种方法或线程来解决这个问题吗？

- 更新

多亏了 Eric 的建议，我才走到了一半。页脚中的这段代码可以通过 id 占用您已经在表单中插入的复选框。它将用您在 url 中发送的值替换该复选框。但是当您提交时，选择不会被 Formstack 捕获。

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  var url = new URL(window.location.href);
  //Put field number in var fieldNumber
  var fieldNumber = "12345678";
  //Put the parameter you're searching for in var param
  var param = "parameter name";
  //if you want a prefix before your values in the checkbox, use prefix
  var prefix = "Prefix ";
  //Put the question you want to ask here.
    var theQuestion = "Which of the values that came through the url will you select?";
  //What should the single checkbox say if no parameters are passed?
  var theDefaultBox = "No variables were contained in the parameter.";
  var theField = "field" + fieldNumber;
  var theFieldID = "fsCell"+fieldNumber;
  var values = url.searchParams.get(param).split(",");
  var theFieldHTMLfront = "";
  if (values) {theFieldHTMLfront = "<fieldset id=\"label"+fieldNumber+"\"><legend class=\"fsLabel fsLabelVertical\"><span>"+theQuestion+"</span></legend><div class=\"fieldset-content\"><label class=\"fsOptionLabel vertical\" for=\""+theField+"_1\"><input type=\"checkbox\" id=\""+theField+"_1\" name=\""+theField+"[]\" value=\""+ prefix + values[0] + "\" class=\"fsField vertical\" />"+ prefix + values[0] + "</label>";} else {theFieldHTMLfront = "<fieldset id=\"label"+fieldNumber+"\"><legend class=\"fsLabel fsLabelVertical\"><span>Which values may have observed or have knowledge about this event?</span></legend><div class=\"fieldset-content\"><label class=\"fsOptionLabel vertical\" for=\""+theField+"_1\"><input type=\"checkbox\" id=\""+theField+"_1\" name=\""+theField+"[]\" value=\""+theDefaultBox+"\" class=\"fsField vertical\" />test</label>";}
  var theFieldHTMLback = "</div></fieldset>";
  for (var i = 1; i < values.length; i++) {
    theFieldHTMLfront += "<label class=\"fsOptionLabel vertical\" for=\""+theField+(i+1)+"\"><input type=\"checkbox\" id=\""+theField+(i+1)+"\" name=\""+theField+"[]\" value=\""+prefix+values[i]+"\" class=\"fsField vertical\" />"+ prefix + values[i] + "</label>"; 
  }
  var theFieldHTML = theFieldHTMLfront + theFieldHTMLback;
  document.getElementById(theFieldID).innerHTML = theFieldHTML;
  });
</script>

关于如何让它在提交时与 Formstack 对话的任何想法？

4

2 回答 2

0

不熟悉 formstack 或您从 URL 中获得的确切内容并放入表单或什么类型，但我会在这里在黑暗中拍摄。

也许是这样的：

var paramsToGet = ['param', 'param', 'param'];

document.addEventListener("DOMContentLoaded", function(event) {
  let url = new URL(window.location.href);
  paramsToGet.forEach((v)=>{
    let thisParam = url.searchParams.get(param);
    newFormElement(thisParam, x, x, "Default Value");
  })
});

var newFormElement = (type, element_id, target_id, default_value) => {
  default_value = default_value || null;
  let el = document.createElement(type);
  el.id = element_id;
  if (default_value) {el.value = default_value;}
  document.getElementById(target_id).appendChild(el);
}

于 2018-06-03T00:35:51.510 回答
0

所以我设法找到了一个适合我的解决方案。感谢埃里克让我开始。

它需要向您要在其中使用它的表单添加两个字段：（1）将写入所选值的隐藏文本输入字段，以及（2）此代码将覆盖的占位符复选框字段。您需要获取他们的身份证号码，我通过打开实时表格并查看源代码来做到这一点。

<script>
var selectedValues = [];
//This code goes in your Formstack theme footer. In the form that you want to add dynamic checkboxes to, create two fields using the WYSIWYG editor: a checkbox field and a text entry field. Make the text entry field hidden. You will need to know the id number of both the text entry and checkbox fields.

//Put the text entry field number in var textFieldNumber
var textFieldNumber = "field"+"12345678";
var index;
var checkboxFieldNumber = "12345679";
//Put the parameter you're searching for in var param
var param = "param";
//if you want a prefix before your values in the checkbox, use prefix
var prefix = "";
//Put the question you want to ask here.
var theQuestion = "Your question?";
//What should the single checkbox say if no parameters are passed?
var theDefaultBox = "Default message.";
document.addEventListener("DOMContentLoaded", function(event) {
  var url = new URL(window.location.href);
  //Put checkbox field number in var checkboxFieldNumber
  //Build the replacement HTML for the placeholder checkbox field.
  var theField = "field" + checkboxFieldNumber;
  var theFieldID = "fsCell"+checkboxFieldNumber;
  var values = url.searchParams.get(param).split(",") || null;
  var theFieldHTMLfront = "";
  if (values) {theFieldHTMLfront = "<fieldset id=\"label"+checkboxFieldNumber+"\"><legend class=\"fsLabel fsLabelVertical\"><span>"+theQuestion+"</span></legend><div class=\"fieldset-content\"><label class=\"fsOptionLabel vertical\" for=\""+theField+"_1\"><input type=\"checkbox\" id=\""+theField+"_1\" name=\""+theField+"[]\" value=\""+values[0]+"\" onchange=\"checkBoxToggle(this)\" class=\"fsField vertical\" />"+ prefix + values[0] + "</label>";} else {theFieldHTMLfront = "<fieldset id=\"label"+checkboxFieldNumber+"\"><legend class=\"fsLabel fsLabelVertical\"><span>Which values may have observed or have knowledge about this event?</span></legend><div class=\"fieldset-content\"><label class=\"fsOptionLabel vertical\" for=\""+theField+"_1\"><input type=\"checkbox\" id=\""+theField+"_1\" name=\""+theField+"[]\" value=\""+theDefaultBox+"\" onchange=\"checkBoxToggle(this)\" class=\"fsField vertical\" />test</label>";}
  var theFieldHTMLback = "</div></fieldset>";
  //iterate through the array found in the url parameters, adding a new checkbox option for each element in the array.
  if (values) {for (var i = 1; i < values.length; i++) {
    theFieldHTMLfront += "<label class=\"fsOptionLabel vertical\" for=\""+theField+(i+1)+"\"><input type=\"checkbox\" id=\""+theField+"_"+(i+1)+"\" name=\""+theField+"[]\" value=\""+values[i]+"\" onchange=\"checkBoxToggle(this)\" class=\"fsField vertical\" />"+ prefix + values[i] + "</label>";
  };}
  //finalize replacement HTML
  var theFieldHTML = theFieldHTMLfront + theFieldHTMLback;
  //write new HTML to DOM
  document.getElementById(theFieldID).innerHTML = theFieldHTML;
});

function checkBoxToggle(thisBox) {
  if(thisBox.checked) {
    //When a new checkbox is selected, add its value to array selectedValues, sort it, and write it to the text entry field.
    selectedValues.push(thisBox.value);
    selectedValues.sort();
    document.getElementById(textFieldNumber).value = selectedValues;
  } else {
    //When a checkbox is deselected, splice its value out of array selectedValues and write the array to the text entry field's value
    index = selectedValues.indexOf(thisBox.value);
    if (index > -1) {
      selectedValues.splice(index, 1);
      document.getElementById(textFieldNumber).value = selectedValues;
    }
  }
}
</script>
于 2018-06-03T20:49:33.260 回答