在 Squarespace 中显示/隐藏表单域

Question

我正在尝试根据在下拉菜单中选择的值在 Squarespace 表单中显示/隐藏表单字段。下拉菜单有一个从 1 到 10 的值列表。目的是为从下拉菜单中选择的每个数字显示 2 个表单字段。对于值 1，我希望始终显示标题为“序列号”和“确认序列号”的表单字段。对于值 2，我想显示“序列号 2”和“确认序列号 2”。值 3-10 以此类推。

这是表单的屏幕截图，因为它现在显示了所有内容。 enter image description here

Answer 1

你可以通过document.getElementById(`serial-input-${index}`)获取序列元素

您可以使用document.getElementById(`serial-input-confirm-${index}`) 获取串行确认元素

<p>Number of products</p>
<select id="select" onChange="create.input()"></select>
<div id="input"></div>

const create = {
  select: () => {
        let select = document.getElementById('select')
    // Create 1-10 number of products
    new Array(10).fill(0).forEach((x, i) => {
      let option = document.createElement('option')
      option.innerHTML = (i+1)
      option.value = (i+1)
      select.appendChild(option)
    })
  },
  input: () => {
    let input  = document.getElementById('input')
    let select = document.getElementById('select')
    console.log(select.value)
    // Remove all child
    input.innerHTML = ''
    // Create the same number of input has you select in select ...
    const size = parseInt(select.value, 10)
        new Array(size).fill(0).forEach((x, i) => {
      console.log(i)
      let p_input = create.p_input(i)
      p_input.forEach(x => input.appendChild(x))
    })    
  },
  p_input: index => {
    let name = `erial number` + (index > 0 ? ' ' + (index+1) : '')
    
    let serial_p = document.createElement('p')
    serial_p.innerHTML = 'S' + name
    serial_p.id = 'p-serial-' + index
    serial_p.class = 'p-serial'
    
    let serial_p_confirm = document.createElement('p')
    serial_p_confirm.innerHTML = 'Confirm s' + name
    serial_p_confirm.id = 'pc-serial-' + index
    serial_p_confirm.class =  'pc-serial'

        let serial_input         = document.createElement('input')
    serial_input.type = "text"
    serial_input.id   = "serial-input-" + index
    serial_input.class =  'serial-input'

    let serial_input_confirm = document.createElement('input')
    serial_input_confirm.type = "text"
    serial_input_confirm.id   = "serial-input-confirm-" + index
    serial_input_confirm.class =  'serial-input'
    
    return [serial_p, serial_input, serial_p_confirm, serial_input_confirm]
  }
}
create.select()
create.input()

例如这里是我点击 5. 时得到的结果