最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Conditional fields in contact form 7 not working

programmeradmin3浏览0评论

In my contact form I need a drop down for order quantities. On selection of "other", I want to display a number field for input. Below is my code but it's not working. Can anyone help? Thanks in advance.

<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>

In my contact form I need a drop down for order quantities. On selection of "other", I want to display a number field for input. Below is my code but it's not working. Can anyone help? Thanks in advance.

<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>
Share Improve this question edited Jul 27, 2018 at 18:49 Tom J Nowell 61k7 gold badges79 silver badges148 bronze badges asked Jul 27, 2018 at 17:44 WP-BeeWP-Bee 191 silver badge2 bronze badges 2
  • you can do that with this plugin : wordpress/plugins/cf7-conditional-fields – mmm Commented Jul 27, 2018 at 19:23
  • Thanks for suggestion Tom. I have to do this using java script. Any suggestions about above code? – WP-Bee Commented Jul 27, 2018 at 19:46
Add a comment  | 

2 Answers 2

Reset to default 2

You can try this add-on to make conditional fields. https://nl.wordpress/plugins/cf7-conditional-fields/

Note that [select* drop-down-menu id="OrderQuantity"] CF7 shortcode will not output any id for the select, so you cannot use document.getElementById but you can rely on the name attribute:

<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>
发布评论

评论列表(0)

  1. 暂无评论