admin管理员组文章数量:1332403
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
2 Answers
Reset to default 2You 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>
本文标签: javascriptConditional fields in contact form 7 not working
版权声明:本文标题:javascript - Conditional fields in contact form 7 not working 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742217635a2434861.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论