Shopify自定义字体表单需求：切换字体时清空输入框

问题分析 #

你的代码目前仅实现了输入框的显示/隐藏逻辑，但切换字体时不会清空其他输入框的内容，导致购物车会收到多个properties[XXX]字段。另外你的HTML存在ID重复问题（比如<div id="noengraving">和内部的<input id="noengraving">共用同一ID），这会导致jQuery选择器无法精准定位元素，必须先修复这个问题。

步骤1：修复HTML的ID重复问题 #

将每个字体容器的ID和内部输入框的ID区分开，比如容器用{font}-container，输入框用{font}-input，示例如下：

<!-- Block字体容器修改 -->
<div class="block" id="block-container">
  <label>Enter Text
<input id="block-input" type="text" style='font-family: block; font-size:20pt;' name="properties[Block]" required
       minlength="4" maxlength="8" size="10">
</label>
</div>

<!-- No Engraving容器修改 -->
<div class="noengraving" id="noengraving-container">
  <label>
<input id="noengraving-input" type="text" style='font-family: block; font-size:20pt;' name="properties[No Engraving]" required
       minlength="4" maxlength="8" size="10">
</label>
</div>

其余字体的容器和输入框ID都按此规则修改，确保每个ID唯一。

步骤2：修改JS代码实现清空逻辑 #

在下拉框切换时，先清空所有字体输入框的内容，再显示选中的容器。代码如下：

// 初始化隐藏所有字体容器
$('#noengraving-container, #block-container, #century-container, #clarendon-container, #cursive-container, #interlockingmonogram-container, #oldenglish-container, #roman-container, #script-container, #university-container').hide();

$('#cases').change(function() {
  var selectedValue = this.value;
  
  // 1. 清空所有字体输入框的内容
  $('div[id$="-container"] input').val('');
  
  // 2. 隐藏所有容器
  $('#noengraving-container, #block-container, #century-container, #clarendon-container, #cursive-container, #interlockingmonogram-container, #oldenglish-container, #roman-container, #script-container, #university-container').hide();
  
  // 3. 显示选中的容器（排除默认的"------"选项）
  if(selectedValue !== 'select') {
    $('#' + selectedValue + '-container').show();
  }
});

简化写法（可选） #

如果不想逐个写容器ID，可以给所有字体容器添加一个共同类名font-container，让代码更简洁：

<!-- 所有字体容器添加font-container类 -->
<div class="block font-container" id="block-container">...</div>
<div class="century font-container" id="century-container">...</div>
<!-- 其余容器同理 -->

对应的JS代码可简化为：

// 初始化隐藏
$('.font-container').hide();

$('#cases').change(function() {
  var selectedValue = this.value;
  
  // 清空所有输入框
  $('.font-container input').val('');
  
  // 隐藏所有容器
  $('.font-container').hide();
  
  // 显示选中的容器
  if(selectedValue !== 'select') {
    $('#' + selectedValue + '-container').show();
  }
});

关键说明 #

• 用val('')清空输入框，确保未选中的字体对应的properties[XXX]字段不会提交到购物车。
• 修复ID重复问题是核心，否则jQuery无法正确操作目标元素。
• 完全保留了每个输入框的name="properties[XXX]"属性，符合你的业务需求。

内容的提问来源于stack exchange，提问作者Guberish