在 Squarespace 中显示/隐藏表单域

Posted 2023-05-09

【中文标题】在 Squarespace 中显示/隐藏表单域

【英文标题】：Show/Hide Form Fields in Squarespace

【发布时间】：2021-06-01 04:48:17

【问题描述】：

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

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

【问题讨论】：

你说的是java还是js？

可以分享一下你的html代码吗

你能分享一些你的数据示例吗？

我不确定您在寻找什么数据。我将分享下面的html。 file:///Users/jerroddouglas/Desktop/Scr​​een%20Shot%202021-03-02%20at%2011.22.13%20AM.png

ibb.co/F43MHCs

【参考方案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. 时得到的结果

【讨论】：

谢谢！这是什么意思？您可以使用 document.getElementById(serial-input-$index) 获取序列元素 您可以使用 document.getElementById(serial-input-confirm-$index) 获取序列确认元素

我相信你会问我如何才能得到这个值，所以我在你问之前说：你可以拥有带有document.getElementById(serial-input-$index)的元素，例如你可以拥有序列号5的值document.getElementById(serial-input-4).value 用于确认序列号 5 你做 document.getElementById(serial-input-confirm-4).value 所以 (5-1) = 4

请，如果这是你想要的验证我的答案。这给了我声誉点。我需要它 ！ （海绵宝宝模因）

我认为这行不通...这是指向实际 div id 的链接。 ibb.co/CwxXMR7我不知道如何应用你在 html 中提供的代码。