how to use this

Hi!

Do you have this online somewhere? That way I can try to help you debugging it.

Anyway, your problem seems to be using ids in fields inside repeatable groups. That will lead you to a scenario where a field in the second group will have the same id of an input in the first group, and that should be avoided.

Did you try an approach displaying or hiding elements based on classes?

What I mean is: you could use [text* drug-name class:drug-name class:form-control] and then
jQuery( '.drug-name' ).css( 'display', 'block' ); (or vanilla js) to display all drug name inputs.

• This reply was modified 6 years, 8 months ago by Felipe Elia. Reason: providing an example

Oh I almost forgot: next time (here or in another wp.org forum) paste your code in pastebin.com and just make a link to it in your topic. Code there is far more readable than here ??

https://pastebin.com/GwajHyJD

hi i have it but i cant post here the link since its customers.,

the code is all which i used @contactform7

Thanks. So, did you have the chance to test what I’ve suggested?

it didnt worked for me does it worked for you. you can just use the entire code i have added at pastebin @contactform7

@felipeelia did that worked? for you

Hi. I can only work on this in my spare time, and I don’t have much of it, especially on Sundays. I really want to help you, but I can’t promise immediate responses.

Did you really test what I suggested? Can you paste here a link to a pastebin with the updated code?

<h2 class=”short”>Patient Information</h2>

<div class=”row”>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”first-name”>First Name *</label>
[text* first-name id:first-name class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”last-name”>Last Name *</label>
[text* last-name id:last-name class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<label for=”birth-date”>Birth Date *</label>
[date* your-date min:1950-01-01 max:2018-12-31 step:7 class:required “2013-04-01″]
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”contact-email”>Your Email Address *</label>
[email* your-email id:contact-email class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”contact-home-phone”>Home Phone *</label>
[text* home-phone id:contact-home-phone class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”contact-mobile-phone”>Mobile Phone *</label>
[text* mobile-phone id:mobile-phone class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”contact-address”>Address *</label>
[text* contact-address id:contact-address class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”contact-city-town”>City or Town*</label>
[text* contact-city-town id:contact-city-town class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”contact-province”>Province *</label>
[text* contact-province id:contact-province class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”contact-postal-code”>Postal Code *</label>
[text* contact-postal-code id:contact-postal-code class:form-control]
</div>
</div>

<div class=”col-lg-12″>
<h2 class=”short”>Transferring Pharmacy Location</h2>
</div>

<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”existing-pharmacy”>Existing Pharmacy *</label>
[select* existing-pharmacy include_blank id:existing-pharmacy class:existing-pharmacy “Alberta” “Edmonton”]

</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”pharmacy-phone”>Pharmacy Phone Number *</label>
[text* pharmacy-phone id:pharmacy-phone class:form-control]
</div>
</div>

<div class=”col-lg-12″>
<h2 class=”short”>Prescription(s) to be Transferred</h2>
<h5>Please provide us with drug name or prescription number for each of the prescriptions you would like to transfer to Chappelle Pharma.</h5>
</div>

<div class=”col-lg-12″>
[radio prescription-transferred id:prescription-transferred default:1 “Yes, please transfer all of my prescriptions to Rexall” “No, please only transfer the prescriptions listed below:”]
</div>

[field_group drug-details id=”drug-details”]
<div class=”col-lg-6″>
<div class=”form-group drug-name”>
<label for=”drug-name” id=”drug-name”>Drug Name *
[text* drug-name class:form-control] </label>
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group rx-number”>
<label for=”rx-number” id=”rx-number”>RX Number *
[text* rx-number class:form-control] </label>
</div>
</div>
<div class=”col-lg-12″>
<div class=”form-group transfer-notes”>
<label for=”transfer-notes” id=”transfer-notes”>Notes *
[textarea* transfer-notes 100×10 class:form-control] </label>
<label for=”fill-my-prescription” id=”fill-my-prescription”> [checkbox fill-my-prescription “Fill my prescription as soon as the prescription transfer is complete.”]</label>
<label for=”hold-my-prescription” id=”hold-my-prescription”> [checkbox hold-my-prescription “Hold prescription until I request a fill.
“]</label>
</div>
</div>

[/field_group]

<hr>
<div class=”col-lg-12″>
<h3 class=”short”>Important Note</h3>
<h6>Chapelle Pharma is committed to protecting the privacy of our customers’ information. Any and all information provided on this form will be kept strictly confidential in accordance with our privacy policy.</h6>
<h6>By submitting this form you are giving consent for a Chapelle Pharma representative to contact the transferring pharmacy indicated to complete your prescription transfer request.</h6>
</div>

<div class=”col-lg-12″>
<div class=”form-group”>
[submit class:btn class:btn-primary class:btn-lg “Request Transfer”]
</div>
</div>
</div>

<script language=”javascript” type=”text/javascript”>
// Hide the Text field by default

$( ‘.drug-name’ ).css( ‘display’, ‘none’ );
$( ‘.rx-number’ ).css( ‘display’, ‘none’ );
$( ‘.transfer-notes’ ).css( ‘display’, ‘none’ );
$( ‘.fill-my-prescription’ ).css( ‘display’, ‘none’ );
$( ‘.hold-my-prescription’ ).css( ‘display’, ‘none’ );
document.getElementById(‘prescription-transferred’).addEventListener(‘click’, displayTextField);
function displayTextField() {
// Get the value of the currently selected radio button. ‘select-a-size’ is the name of the radio buttons you specify in the form builder
var radioText = document.querySelector(‘input[name=”prescription-transferred”]:checked’).value;
if (radioText == ‘No, please only transfer the prescriptions listed below:’) {
$( ‘.drug-name’ ).css( ‘display’, ‘block’ );
$( ‘.rx-number’ ).css( ‘display’, ‘block’ );
$( ‘.transfer-notes’ ).css( ‘display’, ‘block’ );
$( ‘.fill-my-prescription’ ).css( ‘display’, ‘inline’ );
$( ‘.hold-my-prescription’ ).css( ‘display’, ‘inline’ );
} else {
$( ‘.drug-name’ ).css( ‘display’, ‘none’ );
$( ‘.rx-number’ ).css( ‘display’, ‘none’ );
$( ‘.transfer-notes’ ).css( ‘display’, ‘none’ );
$( ‘.fill-my-prescription’ ).css( ‘display’, ‘none’ );
$( ‘.hold-my-prescription’ ).css( ‘display’, ‘none’ );
}
}
</script>

https://pastebin.com/jBkH30Lt

only on selecting this,

No, please only transfer the prescriptions listed below:

it should show but it is been displayed..always

Hi,

So, you aren’t adding the classes in the fields, as I suggested before.

Instead of
[text* drug-name class:form-control]
you should use
[text* drug-name class:drug-name class:form-control]
for instance. Otherwise the $( '.drug-name' ) won’t find any element.

[text* drug-name class:drug-name class:form-control] — as this intimates for text field alone so i used it for <div class=”form-group drug-name”> — entire div

Yeah, you’re right, sorry.

So, I was testing here and now I have a doubt: why don’t you hide the entire groups div?

I was able to make it work here replacing the script tag with this:

<script language="javascript" type="text/javascript">
jQuery( document ).ready( function( $ ) {
	$( '#drug-details' ).css( 'display', 'none' );
	$( 'input[name="prescription-transferred"]' ).on( 'click', function() {
		var checked = $( 'input[name="prescription-transferred"]:checked' );
		if ( 'No, please only transfer the prescriptions listed below:' == checked.val() ) {
			$( '#drug-details' ).show();
		} else {
			$( '#drug-details' ).hide();
		}
	} );
} );
</script>

A few things to remember:
1. You’ll have to include jQuery in your theme (if it isn’t already included);
2. You’ll have to disable autop inside contact forms OR put this code in another file. To disable autop inside forms you can use define( 'WPCF7_AUTOP', false ); in your wp-config.php file.

Please let me know if this solves the problem for you.

bad luck still not working

already wordpress has jQuery includes,

wp-includes/js/jquery/jquery.js?ver=1.12.4

wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1

and the code used overall,

<h2 class=”short”>Patient Information</h2>

<div class=”row”>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”first-name”>First Name *</label>
[text* first-name id:first-name class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”last-name”>Last Name *</label>
[text* last-name id:last-name class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<label for=”birth-date”>Birth Date *</label>
[date* your-date min:1950-01-01 max:2018-12-31 step:7 class:required “2013-04-01″]
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”contact-email”>Your Email Address *</label>
[email* your-email id:contact-email class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”contact-home-phone”>Home Phone *</label>
[text* home-phone id:contact-home-phone class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”contact-mobile-phone”>Mobile Phone *</label>
[text* mobile-phone id:mobile-phone class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”contact-address”>Address *</label>
[text* contact-address id:contact-address class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”contact-city-town”>City or Town*</label>
[text* contact-city-town id:contact-city-town class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”contact-province”>Province *</label>
[text* contact-province id:contact-province class:form-control]
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”contact-postal-code”>Postal Code *</label>
[text* contact-postal-code id:contact-postal-code class:form-control]
</div>
</div>

<div class=”col-lg-12″>
<h2 class=”short”>Transferring Pharmacy Location</h2>
</div>

<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”existing-pharmacy”>Existing Pharmacy *</label>
[select* existing-pharmacy include_blank id:existing-pharmacy class:existing-pharmacy “Alberta” “Edmonton”]

</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group”>
<label for=”pharmacy-phone”>Pharmacy Phone Number *</label>
[text* pharmacy-phone id:pharmacy-phone class:form-control]
</div>
</div>

<div class=”col-lg-12″>
<h2 class=”short”>Prescription(s) to be Transferred</h2>
<h5>Please provide us with drug name or prescription number for each of the prescriptions you would like to transfer to Chappelle Pharma.</h5>
</div>

[field_group drug-details id=”drug-details”]
<div class=”col-lg-12″>
[radio prescription-transferred id:prescription-transferred default:1 “Yes, please transfer all of my prescriptions to Rexall” “No, please only transfer the prescriptions listed below:”]
</div>

<div class=”col-lg-6″>
<div class=”form-group drug-name”>
<label for=”drug-name” id=”drug-name”>Drug Name *
[text* drug-name class:form-control] </label>
</div>
</div>
<div class=”col-lg-6″>
<div class=”form-group rx-number”>
<label for=”rx-number” id=”rx-number”>RX Number *
[text* rx-number class:form-control] </label>
</div>
</div>
<div class=”col-lg-12″>
<div class=”form-group transfer-notes”>
<label for=”transfer-notes” id=”transfer-notes”>Notes *
[textarea* transfer-notes 100×10 class:form-control] </label>
<label for=”fill-my-prescription” id=”fill-my-prescription”> [checkbox fill-my-prescription “Fill my prescription as soon as the prescription transfer is complete.”]</label>
<label for=”hold-my-prescription” id=”hold-my-prescription”> [checkbox hold-my-prescription “Hold prescription until I request a fill.
“]</label>
</div>
</div>

[/field_group]

<hr>
<div class=”col-lg-12″>
<h3 class=”short”>Important Note</h3>
<h6>Chapelle Pharma is committed to protecting the privacy of our customers’ information. Any and all information provided on this form will be kept strictly confidential in accordance with our privacy policy.</h6>
<h6>By submitting this form you are giving consent for a Chapelle Pharma representative to contact the transferring pharmacy indicated to complete your prescription transfer request.</h6>
</div>

<div class=”col-lg-12″>
<div class=”form-group”>
[submit class:btn class:btn-primary class:btn-lg “Request Transfer”]
</div>
</div>
</div>

<script language=”javascript” type=”text/javascript”>
// Hide the Text field by default

jQuery( document ).ready( function( $ ) {
$( ‘#drug-details’ ).css( ‘display’, ‘none’ );
$( ‘input[name=”prescription-transferred__1″]’ ).on( ‘click’, function() {
var checked = $( ‘input[name=”prescription-transferred__1″]:checked’ );
if ( ‘No, please only transfer the prescriptions listed below:’ == checked.val() ) {
$( ‘#drug-details’ ).show();
} else {
$( ‘#drug-details’ ).hide();
}
} );
} );
</script>