javascript - 根据表单字段值修改 CSS (Pardot)

Question

我不是 100% 确定这是否可行，而且由于我没有 JS 或 jQuery 经验，我什至无法尝试自己构建它。

所以这里是概念:我们有 (Pardot) 表格，如果它们被 cookie，这些表格会预先填写客户数据。如果他们是新访客并且从未被 cookie 过，则表单为空。

我想要实现的是，如果表单不为空(如果我们只是说电子邮件字段是预填充的会更容易)，那么一种机制会在表单上应用额外的 CSS，这会导调用子邮件字段隐藏，它会改变一些文本修饰并隐藏最后一个问题。

所以本质上是将这个 CSS 更改应用于它:

form.form p span.description {font-size: 14px;}
.col-sm-3.email {display: none;}
.email.col-sm-9 {background-color: #ffffff; padding:0;}
p.email {background-color: #ffffff; padding: 0; margin: 0;}
.email input {display: none;}
.Marketing_consent_gained {display: none;}

这是一个页面，您可以在其中看到这样的表格:https://idio.ai/resources/uncategorized/form-test-page/

默认情况下它看起来像这样:http://prntscr.com/jp3rmj

如果内容已填写，您将只会看到表单重置问题/链接和按钮(除了电子邮件字段，我可以在 Pardot 中隐藏所有内容):http://prntscr.com/jp3sog

既然我已经提到过，我认为最好的办法是监控电子邮件字段的状态。

这是预填充后的样子:

<div class="col-sm-9 col-xs-9">
<p class="form-field  email  pd-text required required-custom    ">
<input type="text" name="*the ID of the field*" id="*the ID of the field*" value="sbi85g@gmail.com" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, *some IDs specific to one form*);" placeholder="Work email *">
<br><span class="description">Not *prospect's name*? <a target="_self" href="/form/incorrectProspect/account_id/20742/campaign_id/8326/form_id/14870">Click Here</a>.</span>
</p>
</div>

当它为空时:

<div class="col-sm-9 col-xs-9">
<p class="form-field  email  pd-text required required-custom    ">
<input type="text" name="*the ID of the field*" id="*the ID of the field*" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, *some IDs specific to one form*);" placeholder="Work email *">
</p>
</div>

所以我建议在表单上提供 class="description"时应用 CSS 更改

或 href="/form/incorrectProspect/account_id/20742/- 这在表格上可用。

这有意义吗？你有什么想法可以帮助开始构建它吗？欢迎任何想法在这里:)。

Answer 1

警告:我几乎没用过 Edge；我不再使用 CSS 进行主动开发。 YMMV.

A <input type='text'>具有作为页面源的一部分提供的内容的将具有非空的 value属性。所以说你的字段有 ID“emailField” 这个 CSS:

#emailField:not([value=""]) {
    background-color: pink;
}

如果预先填充，它会变成粉红色。

请注意，如果用户修改了此状态，或者如果内容在 Javascript 中更改，则此状态不会更改。 (除非你调用 setAttribute("value", "...");。)