联系人表单7中的条件字段不起作用

时间：2018-07-27 作者：WP-Bee

在我的联系方式中，我需要一个订单数量的下拉列表。选择“其他”时，我想显示一个数字字段以供输入。下面是我的代码，但它不起作用。有人能帮忙吗？提前谢谢。

<script language="javascript" type="text/javascript">
document.getElementById("OrderQuantity").addEventListener("change", displayNumberField);
  function displayNumberField() {
    var dropDownText =  document.getElementById("OrderQuantity").value;
    if (dropDownText == "Other") {
      document.getElementById("EnterOtherQuantity").style.display = \'block\';
    } else {
      document.getElementById("EnterOtherQuantity").style.display = \'none\';
    }
  }
</script>

<label> Order Quantity
[select* drop-down-menu id=OrderQuantity "Select Quantity" "10" "20" "30" "40" "Other"] </label>

<label id="EnterOtherQuantity" style="display:none;"> Please Specify Your Order Quantity
[number other-order-quantity min:41] </label>

2 个回复
SO网友:Thessa Verbruggen

您可以尝试使用此加载项生成条件字段。https://nl.wordpress.org/plugins/cf7-conditional-fields/

SO网友:Andrea Somovigo

请注意[select* drop-down-menu id="OrderQuantity"] 快捷码不会为select输出任何id，因此您不能使用文档。getElementById，但您可以依赖name属性：

<label> Order Quantity
[select* drop-down-menu id=OrderQuantity "Select Quantity" "10" "20" "30" "40" "Other"] </label>

<label id="EnterOtherQuantity" style="display:none;"> Please Specify Your Order Quantity
[number other-order-quantity min:41] </label>

[submit "Send"]

<script language="javascript" type="text/javascript">
document.getElementsByName("drop-down-menu")[0].addEventListener("change", displayNumberField);

function displayNumberField() {
  var dropDownText =  document.getElementsByName("drop-down-menu")[0].value;
  if (dropDownText == "Other") {
    document.getElementById("EnterOtherQuantity").style.display = \'block\';
  } else {
    document.getElementById("EnterOtherQuantity").style.display = \'none\';
  }
}
</script>

结束
标签： javascript   plugin-contact-form-7   小码农  

相关推荐

插件中的JavaScript数据表

我有一个已经开始开发的插件，我想尝试使用datatables。net显示表格数据。我不知道如何做到这一点，在搜索和尝试了不同的东西后，我迷路了。以下是我的插件中的内容。当前，当我加载页面时，它会显示表，我可以在页面源代码中看到加载了dataTables js、dataTables css和customScriptDatatables。add_action(\'create_datatable\', \'show_datatable\'); function show_datatable (){&#

联系人表单7中的条件字段不起作用 - 小码农CODE - 行之有效找到问题解决它

联系人表单7中的条件字段不起作用

时间：2018-07-27 作者：WP-Bee

在我的联系方式中，我需要一个订单数量的下拉列表。选择“其他”时，我想显示一个数字字段以供输入。下面是我的代码，但它不起作用。有人能帮忙吗？提前谢谢。

<script language="javascript" type="text/javascript">
document.getElementById("OrderQuantity").addEventListener("change", displayNumberField);
  function displayNumberField() {
    var dropDownText =  document.getElementById("OrderQuantity").value;
    if (dropDownText == "Other") {
      document.getElementById("EnterOtherQuantity").style.display = \'block\';
    } else {
      document.getElementById("EnterOtherQuantity").style.display = \'none\';
    }
  }
</script>

<label> Order Quantity
[select* drop-down-menu id=OrderQuantity "Select Quantity" "10" "20" "30" "40" "Other"] </label>

<label id="EnterOtherQuantity" style="display:none;"> Please Specify Your Order Quantity
[number other-order-quantity min:41] </label>

2 个回复
SO网友:Thessa Verbruggen

您可以尝试使用此加载项生成条件字段。https://nl.wordpress.org/plugins/cf7-conditional-fields/

SO网友:Andrea Somovigo

请注意[select* drop-down-menu id="OrderQuantity"] 快捷码不会为select输出任何id，因此您不能使用文档。getElementById，但您可以依赖name属性：

<label> Order Quantity
[select* drop-down-menu id=OrderQuantity "Select Quantity" "10" "20" "30" "40" "Other"] </label>

<label id="EnterOtherQuantity" style="display:none;"> Please Specify Your Order Quantity
[number other-order-quantity min:41] </label>

[submit "Send"]

<script language="javascript" type="text/javascript">
document.getElementsByName("drop-down-menu")[0].addEventListener("change", displayNumberField);

function displayNumberField() {
  var dropDownText =  document.getElementsByName("drop-down-menu")[0].value;
  if (dropDownText == "Other") {
    document.getElementById("EnterOtherQuantity").style.display = \'block\';
  } else {
    document.getElementById("EnterOtherQuantity").style.display = \'none\';
  }
}
</script>

标签： javascript   plugin-contact-form-7   小码农  

相关推荐

如何将Bootstrap Tour JavaScript添加到WordPress管理面板仪表板小部件

我正在开发一个主题，想知道如何将引导程序教程脚本添加到自定义仪表板小部件中。基本上，我想将引导程序巡更脚本包含到管理面板中，这样我就可以编写一个自定义仪表板小部件，然后将巡更脚本链接到该小部件。