从URL参数动态创建/更改表单字段(不预填充现有字段)

时间:2018-06-02 23:45:48

标签: javascript jquery formstack

在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在表单中插入的复选框。它将使用您在网址中发送的值替换该复选框。但是当你提交时,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交谈的任何想法?

2 个答案:

答案 0 :(得分: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);
}

答案 1 :(得分:0)

所以我设法找到适合我的解决方案。谢谢Eric让我开始。

它需要在要使用它的表单中添加两个字段:(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>