如何在 Shopify 中使用 Jquery 隐藏表单字段

Question

我正在尝试编写一个遵循以下逻辑的简单脚本，但我遇到了困难。

If "Name" field =  blank

Then Hide "Comment" field

Else Show "Comment" field

$(document).ready(function() {
  if ($('#ContactForm-name').value() == "") {
    $('#ContactForm-body').hide();
  } else {
    $('#ContactForm-body').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

有人可以帮助我吗？我提供了表格及其 HTML.

的屏幕截图

shopify 商店 https://permaink.myshopify.com/pages/contact 商店 PW =“帮助”。

Answer 1

查看您提供的带有 'help' 密码的示例 link，在 [=30= 之后，jQuery 似乎并未实际加载到网站上] 控制台中的以下内容：console.log(typeof window.jQuery) returns undefined.

您可能需要使用 vanilla JS 来实现您想要做的事情（或侧载 jQuery，如果您有这样做的权限并且确实需要使用它）。

在没有 jQuery 的情况下使用 JS，您可以尝试执行以下操作：

window.addEventListener('load', function() {
   if (document.getElementById('ContactForm-name').value === '') { 
      document.getElementById('ContactForm-body').style.display = 'none';
   } else {
      document.getElementById('ContactForm-body').style.display = 'block';
   }
});

请注意，仅隐藏 ContactForm-body textarea 仍会留下边框轮廓和标签 Comment 显示，因此您可能需要做的不仅仅是隐藏 textarea（找到父 <div> 在 JS 中隐藏整个块）。

如何在 Shopify 中使用 Jquery 隐藏表单字段

How to hide form fields with Jquery in Shopify

javascript

jquery

shopify