I am facing a problem in using the contact form 7 in wordpress, and need some help to all of you. Problem: I have radio box which have two options yes or no. if someone check the yes option then div one shoud be shown and if he clicks at no then 2nd div should be shown. I write a code but how it will be us in contact form 7, i don't know. here is the code.
$(document).ready(function() {
//Hide the field initially
$("#div one").hide();
$("#div two").hide();
$('[radio radio-928]').change(function()
{
if ($("[radio radio-928]").val() == "yes")
{
$("#div one").show();
}
else {
$("#div two").hide();
}
if ($("[radio radio-928]").val() == "no") {
$("#div two").show();
}
else {
$("#div one").hide();
}
});
});
This can be done in the Contact Form 7 editor box like this:
<script type="text/javascript">
function showdiv(element){
document.getElementById("div-one").style.display = element=="yes"?"block":"none";
document.getElementById("div-two").style.display = element=="no"?"block":"none";
}
</script>
<input type="radio" name="choice" value="yes" onclick="showdiv(this.value);"> Yes<br>
<input type="radio" name="choice" value="no" onclick="showdiv(this.value);"> No<br>
<div id="div-one" style="display:none;">Yes</div>
<div id="div-two" style="display:none;">No</div>