使用javascript处理表单的问题

我们有一个网站托管在hubspot，我们使用他们的原生WYSIWYG来设计布局，然后使用CSS和js进行样式设计。使用javascript处理表单的问题

在主页http://www.lspatents.com/它以前下的“点击此处开始”称号一种形式，它有大约10个问题，并用JavaScript来分裂他们的步骤，使他们能够适应在同一区域上当前显示的空白框。

它工作得很好直到两天前窗体消失，并留下一个空白区域，你可以看到现在，并且据我所知最近没有人触及过这个代码。

下面是用于操作的形式

// Hero Form 
$(window).load(function() { 

     // disable autocomplete to fix bug 
     $('.hero-form form').attr("autocomplete", "off"); 

     $('.hero-form .hs-richtext').each(function() { 
      $(this).nextUntil('.hs-richtext').wrapAll('<div class="step" />'); 
     }); 

     // Hide Loading icon 
     $('.hero-form form').css('background', 'none'); 
     $('.hero-form form .step:nth-of-type(2)').show(); 

     // First Step to Second Step 
     $('.step').find('.hs-richtext').change(function() { 
      $('.step:nth-of-type(2)').hide().next().next().fadeIn(); 
     }); 

     // Second Step to Third Step 
     $('.step').find('.hs-input').change(function() { 
      var names = {}; 
      $(':radio').each(function() { 
       names[$(this).attr('name')] = true; 
      }); 
      var count = 0; 
      $.each(names, function() { 
       count++; 
      }); 
      if ($(':radio:checked').length === count) { 
       $('.step:nth-of-type(4)').hide().next().next().fadeIn(); 
      } 
     }); 

});

至于我能够告诉，显影剂使用CSS来隐藏与显示整个形式面积JS代码：无;并使用上面的js将问题分解为步骤，并在每个步骤中显示一定的数字。

您可以在页脚中看到正在调用的代码，因此如果您检查元素并禁用显示，则链接到.js文件也没有问题：无;这是宣布为英雄形式内的任何div的所有问题得到显示，所以没有任何形式的问题，为什么它停止工作？

希望得到任何帮助，

来源

2015-07-12 user2159384

有形式，总是使用React？如果不是，那么你通常必须将元素包装在一个包含div的元素中，以处理反应只能在块中具有一个顶层元素的方式。这可能已经改变了第n种类型或下一个（）。下一个（）类型导航 –

像我说的我不是谁创造这个，所以我不能确定，但我认为这是用jQuery完成，因为这是默认情况下，Hubspot加载，我找不到在这里的任何地方调用React库 – user2159384

它现在肯定会使用React，因为表单中充满了DIV的很多东西，比如这个data-reactid =“。0.0：$ 2”。因此，我的问题，一直是这样。因此，生成表单的方法是使用React。就像我说离子顺序将两个DOM节点置于同一级别的反应中，您需要将它们包装在容器节点中（反应只能为组件添加一个顶级节点，这可能会通过添加其他节点来改变标记。 –

这条线将不再与您的加价工作...

$('.hero-form form .step:nth-of-type(2)').show();

有一些额外的div来封装你加价，摆在那里通过反应过来，反应过来已经放置了一系列的您的形式是由您现有的CSS（我假设用来只是一系列步骤的的）

隐藏节点的CSS隐藏在里面的div是：

.hero-form form>div, .hero-form form>.step { 
    display: none; 
}

第n正在隐藏与显示颂：块与类“步骤”的DIV位不会改变父DIV（由阵营插入），其仍然可以防止您的节点被：无

<div data-reactid=".0.0:$1"> 
    <div class="hs-richtext" data-reactid=".0.0:$1.0"> 
    <hr> 
    </div> 
    <div class="step"> 
    <div class="hs_patent field hs-form-field" data-reactid=".0.0:$1.$patent"> 
     <label placeholder="Enter your Do you have a patent?" for="patent-9fc8dd30-a174-43bd-be4a-34bd3a00437e_2496" data-reactid=".0.0:$1.$patent.0"> 
     <span data-reactid=".0.0:$1.$patent.0.0">Do you have a patent?</span> 
     <span class="hs-form-required" data-reactid=".0.0:$1.$patent.0.1">*</span> 
     </label> 
    <div class="hs-field-desc" style="display:none;" data-reactid=".0.0:$1.$patent.1"> 
    </div> 
</div>

你jQuery将显示加所示。

你需要改变你的jQuery调用show（）父（）包含你想要显示的“步”div。

来源

2015-07-13 11:03:41

感谢您的详细回复，而且我现在得到你正在谈论的内容，但是你是否会善意地建议我如何以最小的改变来做到这一点？我不是一个编码器，尽管我明白你在说什么，我不知道如何应用它 – user2159384

那么，当你得到一个你想要显示的元素，例如$（'。hero-form form .step：nth-of-type（2）' ）。显示（）;那么你只需要添加父元素，并将其显示为例如$（'。hero-form form .step：nth-of-type（2）'）。parent（）。show（）; –

请检查您的浏览器控制台ANS看你有没有问题装载这种形式：

https://forms.hubspot.com/embed/v3/form/457238/9fc8dd30-a174-43bd-be4a-34bd3a00437e

，这是错误：

net::ERR_NAME_RESOLUTION_FAILED

这是更好您将您的DNS更改为8.8.8.8之类的内容，然后查看问题是否仍然存在。

来源

2015-07-12 21:31:46 Trix

这是我得到的 {“status”：“error”，“message”：“需要回调”，“requestId”：“ff8351aa-9731-438e-ac9e-b25c5c476a7a”} – user2159384

我相信你有问题'https：// hubspot.com'。请检查服务 – Trix

已经做了，他们也帮不上忙，希望能在这里找到答案 – user2159384

使用javascript处理表单的问题

回答

相关问题