**Tell us what you are trying to do?**
This site has 2 cred forms containing 10 sets of fields. These are for people to add licenses to their listing. On the Create cred form I have hidden 9 of the fields with CSS and used the checkbox hack to display one additional field at a time if a button is clicked. This works for the Create form. On the Edit form however I am not able to display the fields with content based on CSS. I think I will need to use JS or JQuery for this. However since the majority of the support posts are unavailable now I'm not able to search and find any examples to start from.
**Is there any documentation that you are following?**
No because it's all 404 right now.
Waqar
Supporter
Languages:
English (English )
Timezone:
Asia/Karachi (GMT+05:00)
Hi,
Thank you for contacting us and I'd be happy to assist.
To suggest the next step, I'll need to see how both these forms are set up.
Can you please share links to the pages where these forms can be seen? If the forms are only accessible by logged-in users, please also share temporary admin login details.
Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.
regards,
Waqar
Supporter
Languages:
English (English )
Timezone:
Asia/Karachi (GMT+05:00)
Thank you for sharing these details.
Some custom scripts will be needed to achieve what you're planning, but the use of conditional field groups around those individual license fields makes it more complicated. The conditional field groups add their own script events to those fields containers.
Can you please remove the conditional field groups around those fields and remove the custom CSS code that you've currently added to show/hide the fields, through the custom checkbox fields?
Once removed, let me know and I'll be able to share some custom scripts for this, accordingly.
Hi Waqar!
I've gone ahead and removed all the conditionals on both forms. Plus I've removed all the custom CSS for the checkbox hack.
Thanks for your help!-)
Jen
Waqar
Supporter
Languages:
English (English )
Timezone:
Asia/Karachi (GMT+05:00)
Thank you for making those changes.
To make this work, the first step is to include the add new license buttons, before each "License Number" field in the form:
<button type="button" id="license2" class="add-license-buttons">Add Another License</button>
<button type="button" id="license3" class="add-license-buttons">Add Another License</button>
<button type="button" id="license4" class="add-license-buttons">Add Another License</button>
<button type="button" id="license5" class="add-license-buttons">Add Another License</button>
........
Note: I've already included these buttons in the edit form.
Next, the custom code will be needed to hide the empty license field groups and show them with each 'add new' button's click:
jQuery(document).ready(function( $ ) {
// hide all add new license buttons
$('button.add-license-buttons').toggle();
// license 2 code start
var licNumberTwo = $('input[name="wpcf-2nd-license-number"]').val();
if(!licNumberTwo) {
processLicNumberTwo();
$('button.add-license-buttons:first').show();
}
else
{
$('button#license2').remove();
}
function processLicNumberTwo() {
$('input[name="wpcf-2nd-license-number"]').parents('.form-group').toggle();
$('input[name="wpcf-license-2-type"]').parents('.form-group').toggle();
$('select[name="wpcf-2nd-license-state"]').parents('.form-group').toggle();
$('input[name="wpcf-2nd-license-expiration[display-only]"]').parents('.form-group').toggle();
}
$('button#license2').click(function(){
$('button#license2').remove();
$('button.add-license-buttons:first').show();
processLicNumberTwo();
});
// license 2 code end
// license 3 code start
var licNumberThree = $('input[name="wpcf-3rd-license-number"]').val();
if(!licNumberThree) {
processLicNumberThree();
$('button.add-license-buttons:first').show();
}
else
{
$('button#license3').remove();
}
function processLicNumberThree() {
$('input[name="wpcf-3rd-license-number"]').parents('.form-group').toggle();
$('input[name="wpcf-license-3-type"]').parents('.form-group').toggle();
$('select[name="wpcf-3rd-license-state"]').parents('.form-group').toggle();
$('input[name="wpcf-3rd-license-expiration[display-only]"]').parents('.form-group').toggle();
}
$('button#license3').click(function(){
$('button#license3').remove();
$('button.add-license-buttons:first').show();
processLicNumberThree();
});
// license 3 code end
// license 4 code start
var licNumberFour = $('input[name="wpcf-4th-license-number"]').val();
if(!licNumberFour) {
processLicNumberFour();
$('button.add-license-buttons:first').show();
}
else
{
$('button#license4').remove();
}
function processLicNumberFour() {
$('input[name="wpcf-4th-license-number"]').parents('.form-group').toggle();
$('input[name="wpcf-license-4-type"]').parents('.form-group').toggle();
$('select[name="wpcf-4th-license-state"]').parents('.form-group').toggle();
$('input[name="wpcf-4th-license-expiration[display-only]"]').parents('.form-group').toggle();
}
$('button#license4').click(function(){
$('button#license4').remove();
$('button.add-license-buttons:first').show();
processLicNumberFour();
});
// license 4 code end
.........
});
In this example, I've demonstrated the code for the license fields from 2 to 4 and you can extend it the same way for the rest of the fields too.
Hi Waqar!
Thanks for your help.
I've edited the code to include all ten fields:
jQuery(document).ready(function( $ ) {
// hide all add new license buttons
$('button.add-license-buttons').toggle();
// license 2 code start
var licNumberTwo = $('input[name="wpcf-2nd-license-number"]').val();
if(!licNumberTwo) {
processLicNumberTwo();
$('button.add-license-buttons:first').show();
}
else
{
$('button#license2').remove();
}
function processLicNumberTwo() {
$('input[name="wpcf-2nd-license-number"]').parents('.form-group').toggle();
$('input[name="wpcf-license-2-type"]').parents('.form-group').toggle();
$('select[name="wpcf-2nd-license-state"]').parents('.form-group').toggle();
$('input[name="wpcf-2nd-license-expiration[display-only]"]').parents('.form-group').toggle();
}
$('button#license2').click(function(){
$('button#license2').remove();
$('button.add-license-buttons:first').show();
processLicNumberTwo();
});
// license 2 code end
// license 3 code start
var licNumberThree = $('input[name="wpcf-3rd-license-number"]').val();
if(!licNumberThree) {
processLicNumberThree();
$('button.add-license-buttons:first').show();
}
else
{
$('button#license3').remove();
}
function processLicNumberThree() {
$('input[name="wpcf-3rd-license-number"]').parents('.form-group').toggle();
$('input[name="wpcf-license-3-type"]').parents('.form-group').toggle();
$('select[name="wpcf-3rd-license-state"]').parents('.form-group').toggle();
$('input[name="wpcf-3rd-license-expiration[display-only]"]').parents('.form-group').toggle();
}
$('button#license3').click(function(){
$('button#license3').remove();
$('button.add-license-buttons:first').show();
processLicNumberThree();
});
// license 3 code end
// license 4 code start
var licNumberFour = $('input[name="wpcf-4th-license-number"]').val();
if(!licNumberFour) {
processLicNumberFour();
$('button.add-license-buttons:first').show();
}
else
{
$('button#license4').remove();
}
function processLicNumberFour() {
$('input[name="wpcf-4th-license-number"]').parents('.form-group').toggle();
$('input[name="wpcf-license-4-type"]').parents('.form-group').toggle();
$('select[name="wpcf-4th-license-state"]').parents('.form-group').toggle();
$('input[name="wpcf-4th-license-expiration[display-only]"]').parents('.form-group').toggle();
}
$('button#license4').click(function(){
$('button#license4').remove();
$('button.add-license-buttons:first').show();
processLicNumberFour();
});
// license 4 code end
// license 4 code start
var licNumberFour = $('input[name="wpcf-4th-license-number"]').val();
if(!licNumberFour) {
processLicNumberFour();
$('button.add-license-buttons:first').show();
}
else
{
$('button#license4').remove();
}
function processLicNumberFour() {
$('input[name="wpcf-4th-license-number"]').parents('.form-group').toggle();
$('input[name="wpcf-license-4-type"]').parents('.form-group').toggle();
$('select[name="wpcf-4th-license-state"]').parents('.form-group').toggle();
$('input[name="wpcf-4th-license-expiration[display-only]"]').parents('.form-group').toggle();
}
$('button#license4').click(function(){
$('button#license4').remove();
$('button.add-license-buttons:first').show();
processLicNumberFour();
});
// license 4 code end
// license 5 code start
var licNumberFive = $('input[name="wpcf-5th-license-number"]').val();
if(!licNumberFive) {
processLicNumberFive();
$('button.add-license-buttons:first').show();
}
else
{
$('button#license4').remove();
}
function processLicNumberFive) {
$('input[name="wpcf-5th-license-number"]').parents('.form-group').toggle();
$('input[name="wpcf-license-5-type"]').parents('.form-group').toggle();
$('select[name="wpcf-5th-license-state"]').parents('.form-group').toggle();
$('input[name="wpcf-5th-license-expiration[display-only]"]').parents('.form-group').toggle();
}
$('button#license5').click(function(){
$('button#license5').remove();
$('button.add-license-buttons:first').show();
processLicNumberFive();
});
// license 5 code end
// license 6 code start
var licNumberSix = $('input[name="wpcf-6th-license-number"]').val();
if(!licNumberSix) {
processLicNumberSix();
$('button.add-license-buttons:first').show();
}
else
{
$('button#license6').remove();
}
function processLicNumberSix() {
$('input[name="wpcf-6th-license-number"]').parents('.form-group').toggle();
$('input[name="wpcf-license-6-type"]').parents('.form-group').toggle();
$('select[name="wpcf-6th-license-state"]').parents('.form-group').toggle();
$('input[name="wpcf-6th-license-expiration[display-only]"]').parents('.form-group').toggle();
}
$('button#license6').click(function(){
$('button#license6').remove();
$('button.add-license-buttons:first').show();
processLicNumberSix();
});
// license 6 code end
// license 7 code start
var licNumberSeven = $('input[name="wpcf-7th-license-number"]').val();
if(!licNumberSeven) {
processLicNumberSeven();
$('button.add-license-buttons:first').show();
}
else
{
$('button#license7').remove();
}
function processLicNumberSeven() {
$('input[name="wpcf-7th-license-number"]').parents('.form-group').toggle();
$('input[name="wpcf-license-7-type"]').parents('.form-group').toggle();
$('select[name="wpcf-7th-license-state"]').parents('.form-group').toggle();
$('input[name="wpcf-7th-license-expiration[display-only]"]').parents('.form-group').toggle();
}
$('button#license7').click(function(){
$('button#license7').remove();
$('button.add-license-buttons:first').show();
processLicNumberSeven();
});
// license 7 code end
// license 8 code start
var licNumberEight = $('input[name="wpcf-8th-license-number"]').val();
if(!licNumberEight) {
processLicNumberEight();
$('button.add-license-buttons:first').show();
}
else
{
$('button#license8').remove();
}
function processLicNumberEight() {
$('input[name="wpcf-8th-license-number"]').parents('.form-group').toggle();
$('input[name="wpcf-license-8-type"]').parents('.form-group').toggle();
$('select[name="wpcf-8th-license-state"]').parents('.form-group').toggle();
$('input[name="wpcf-8th-license-expiration[display-only]"]').parents('.form-group').toggle();
}
$('button#license8').click(function(){
$('button#license8').remove();
$('button.add-license-buttons:first').show();
processLicNumberEight();
});
// license 8 code end
// license 9 code start
var licNumberNine = $('input[name="wpcf-9th-license-number"]').val();
if(!licNumberNine) {
processLicNumberNine();
$('button.add-license-buttons:first').show();
}
else
{
$('button#license9').remove();
}
function processLicNumberNine() {
$('input[name="wpcf-9th-license-number"]').parents('.form-group').toggle();
$('input[name="wpcf-license-9-type"]').parents('.form-group').toggle();
$('select[name="wpcf-9th-license-state"]').parents('.form-group').toggle();
$('input[name="wpcf-9th-license-expiration[display-only]"]').parents('.form-group').toggle();
}
$('button#license9').click(function(){
$('button#license9').remove();
$('button.add-license-buttons:first').show();
processLicNumberNine();
});
// license 9 code end
// license 10 code start
var licNumberTen = $('input[name="wpcf-10th-license-number"]').val();
if(!licNumberTen) {
processLicNumberTen();
$('button.add-license-buttons:first').show();
}
else
{
$('button#license10').remove();
}
function processLicNumberTen() {
$('input[name="wpcf-10th-license-number"]').parents('.form-group').toggle();
$('input[name="wpcf-license-10-type"]').parents('.form-group').toggle();
$('select[name="wpcf-10th-license-state"]').parents('.form-group').toggle();
$('input[name="wpcf-10th-license-expiration[display-only]"]').parents('.form-group').toggle();
}
$('button#license10').click(function(){
$('button#license10').remove();
$('button.add-license-buttons:first').show();
processLicNumberTen();
});
// license 10 code end
});
I've placed this code in the JS editor of the Edit Listing form. However the code does not seem to doing anything. All license fields and all buttons are visible all the time.
As a test I tried moving the file to a custom JS file that is loaded on every page but it made no difference.
Jen
Waqar
Supporter
Languages:
English (English )
Timezone:
Asia/Karachi (GMT+05:00)
The code looks correct, except for this one typo (missing opening bracket):
function processLicNumberFive) {
I've fixed this line and the code seems to be working now:
function processLicNumberFive() {
Oh! I am still getting used to reading/writing PHP and missed that.
Working perfectly now.
Thank you Waqar!
Jen
