1

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

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>
  • <script type="text/javascript"> function show_hide_field(qt) { qt=="6"?document.getElementById("div-qt-other").style.display="block":document.getElementById("div-qt-other").style.display="none"; } </script> – WP-Bee Jul 28 '18 at 0:42
  • Order Quantity: <select name="test" onchange="show_hide_field(this.value);"> <option value="1">---Select Quantity---</option>val <option value="2">10</option> <option value="3">20</option> <option value="4">30</option> <option value="5">40</option> <option value="6">Other</option> </select> – WP-Bee Jul 28 '18 at 0:42
  • <div class="form-group" id="div-qt-other" style="display:none;"> <br> <label class="control-label" for="order-quantity-other" style="color:#2842da;">Please Enter Other Quantity [number other-order-quantity min:41] </label> </div> – WP-Bee Jul 28 '18 at 0:42
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.