Динамическое создание / изменение полей формы из параметров URL (без предварительного заполнения существующих полей)

Question

В форме стека я должен иметь возможность передавать список в форму в качестве параметра и из этого списка создавать флажки или раскрывающиеся меню, которые пользователь может выбрать и которые сохраняются в базе данных стека и отправляются в интеграциюкак и во всех других областях.Вот пример того, что я хотел бы отправить:

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

Отсюда япытаясь использовать вставку кода в (или смесь) заголовка, нижнего колонтитула или встраивания кода для создания нового поля при загрузке, которое выглядит и действует как все остальные поля.

Я возилсяс подходом Дженны Молби к динамическому изменению html с параметрами URL, найденными здесь:

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

Но пока не повезло.В настоящее время мне не удалось заставить динамический текст заполнять форму, не говоря уже о поле формы, которое затем обращается к внутреннему интерфейсу стека.

Это выполнимо, и если да, может ли кто-нибудь порекомендовать подход?или нить, которую можно потянуть, чтобы выяснить это?

- обновление

Благодаря предложению Эрика, я смог продвинуться на полпути.Этот код в нижнем колонтитуле может установить флажок, который вы уже вставили в форму по идентификатору.Это заменит этот флажок на значения, которые вы отправляете в 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 при отправке?

Answer 1

Так что мне удалось найти решение, которое работает для меня.Спасибо, Эрик, за то, что я начал.

Требуется добавить два поля в форму, в которой вы хотите использовать это: (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>

Answer 2

Не знаком с формой стека или тем, что именно вы получаете по 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);
}