Tabled Input for Conditional Field

  • Resolved mandyschoi

    (@mandyschoi)


    4 years, 10 months ago

    I want to make a conditional field (plugin name: Contact Form 7 Conditional Fields) a repeatable row by converting the field into a tabled input. However, the conditional field does not show when a second row is added.
    If you go to “Select your course(s)” section on my link provided – I would like it to be able to add course, and each selection will pop up a drop-down to select timeslot specific to each course:

    1. Select your course
    2. Select a timeslot for this course

    [Add another course]

    Thank you.

    • This topic was modified 4 years, 10 months ago by mandyschoi.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Aurovrata Venet

    (@aurovrata)

    This is not possible using the Conditional plugin. It is designed to handle conditional fields at the time of designing your form. Fields added in a table row by a user are done dynamically and the conditional plugin cannot handle this kind of fields.

    THere is however a way to achive this using javascript. The smart plugin fires a ‘sgRowAdded’ event on a table each time a new row is added to it,

    $('div.cf7-smart-grid').on('sgRowAdded', '.container.cf7-sg-table',function(event, row){
  //row is the index of the newly created row.  Use to target the fields in the new row.
  //hide the timeslot field.
  //add a 'change' event to the course field
  //show the timeslot field when the 'change' event is fired on the course field. 
}

    if you’re not sure how to achieve this, post your question on the StackOverflow forum and link it back here.

Viewing 1 replies (of 1 total)
  • The topic ‘Tabled Input for Conditional Field’ is closed to new replies.