{"id":30178,"date":"2022-11-04T21:16:04","date_gmt":"2022-11-04T21:16:04","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-disconnect-related-items-from-the-front-end-via-form\/"},"modified":"2023-12-11T16:44:38","modified_gmt":"2023-12-11T16:44:38","slug":"how-to-disconnect-related-items-from-the-front-end-via-form","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-disconnect-related-items-from-the-front-end-via-form\/","title":{"rendered":"How to Disconnect Related Items from the Front End via Form"},"content":{"rendered":"\n

The JetEngine<\/em> relations feature<\/strong><\/a> allows you to connect, create, and edit related items on the editing page of posts, CCT items, users, and taxonomies on the backend.<\/p>\n\n\n\n

With the JetFormBuilder<\/em> forms, you can connect and disconnect related items from the front end. To learn how to connect the related items via form, proceed to this tutorial<\/strong><\/a>. Here, we explain how to disconnect all parent or child items with just one click using a form.<\/p>\n\n\n\n

Disconnect Child Objects from Parent Ones<\/strong><\/h2>\n\n\n\n
\n

Create a form<\/h3>\n\n\n\n

To create a form for disconnecting related items, navigate to the JetFormBuilder > Add New<\/em><\/strong> tab on the WordPress Dashboard. Give the new form a title and leave the default settings of the Hidden Field<\/strong><\/a> block.<\/p>\n\n\n\n\"hidden\n\n\n\n

Click on the \u201cToggle block inserter\u201d<\/strong> button and place the Select<\/strong><\/a>, Radio<\/strong><\/a>, or Checkbox<\/strong><\/a> field to display the child items in the form. Be informed that the Radio<\/strong> and Select<\/strong> show only one related item, and it suits the \u201cOne to One\u201d or \u201cOne to Many\u201d relation type, and the Checkbox<\/strong> shows one or more items, and it matches the \u201cMany to Many\u201d or \u201cOne to Many\u201d relation type. We decided to drag-and-drop such Checkbox Field<\/strong> block to our form to be able to display several child items from the \u201cOne to Many\u201d relation.<\/p>\n\n\n\n\"checkbox\n\n\n\n

Since we have the connection between posts, we select the \u201cPosts\u201d as the source in the Fill Options From<\/strong> field and define the needed Post Type<\/strong>. As we want to choose the related children for the relationship \u201cCountry > Tours,\u201d we select the \u201cTour\u201d Post Type<\/strong>.<\/p>\n\n\n\n

In the Block General<\/strong> settings, type the Field Label<\/strong> and change the Form field name<\/strong>.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

Be aware that all field names inside one form must be unique, and field names must contain a value with only lowercase Latin letters, with no spaces. If you want to split words, this can be done using the \u201c-\u201d and \u201c_\u201d characters.<\/p><\/div><\/div>\n\n\n\n\"checkbox\n\n\n\n

Press the \u201cDynamic tags\u201d<\/strong> button in the Default Value<\/strong> field to open the pop-up.<\/p>\n\n\n\n

Pick the \u201cRelated Items\u201d option in the Source<\/strong> field, the name of the needed Relation<\/strong>, the \u201cChild object\u201d option in the From Object <\/strong>field, and \u201cCurrent Object ID\u201d in the Initial Object ID From <\/strong>field (as we want to place the form to the single page).<\/p>\n\n\n\n\"related\n\n\n\n

Press the \u201cUpdate\u201d<\/strong> button and move to the JetForm<\/strong> settings and the Post Submit Actions<\/strong> tab. Select the \u201cConnect Relation Items\u201d option and click on the pencil-shaped icon to edit the action.<\/p>\n\n\n\n\"connect\n\n\n\n

In the new pop-up window, select the needed Relation<\/strong>. Pick the name of the Hidden Field<\/strong> (with the default \u201cCurrent Post ID\u201d option) as the Parent Item ID<\/strong>. As the Child Item ID<\/strong>, select the label of the created field for the related items (the Checkbox<\/strong> in our case). Since it\u2019s needed to display the child objects in the form, choose the \u201cWe updating children items for the parent object\u201d option in the Update Context<\/strong> field. In the How to Store New Items<\/strong> field, pick the \u201cDisconnect selected items\u201d option.<\/p>\n\n\n\n\"edit\n\n\n\n

Hit the \u201cUpdate\u201d<\/strong> button and publish or update the form to save the changes when you finish editing fields and actions.<\/p>\n\n\n\n

Place the form on the Single page template<\/h3>\n\n\n\n

Move to Crocoblock > Theme Builder <\/em><\/strong>and choose the single body template of the parent, click on three dots, and hit the \u201cEdit content\u201d<\/strong> button. Also, you can edit the needed header, by following the Crocoblock > Theme Templates <\/em><\/strong>path.<\/p>\n\n\n\n\"edit\n\n\n\n

In the Elementor or Gutenberg editor, place the JetForm <\/strong>widget or block to the single template. Choose the needed form in the dropdown menu and customize other settings according to your needs. We recommend picking the \u201cPage Reload\u201d Submit Type<\/strong> to display all changes on the page after the form submitting. After you finish, hit the \u201cUpdate<\/strong>\u201d <\/strong>button.<\/p>\n\n\n\n\"jetform\n\n\n\n

Proceed to the parent object on the front end. For that, you can go to the parent post type and click to view one of the posts.<\/p>\n\n\n\n\"parent\n\n\n\n

On the front end, just hit the \u201cSubmit\u201d <\/strong>button in the form.<\/p>\n\n\n\n\"jetform\n\n\n\n

After the page reloading, you can see that all posts have been disconnected automatically.<\/p>\n\n\n\n\"all\n\n\n\n

You can also check on the backend by editing the post whether child items have been disconnected.<\/p>\n\n\n\n\"post\n<\/div><\/div>\n\n\n\n

Disconnect Parent Objects from Child Ones<\/strong><\/h2>\n\n\n\n
\n

Create a form<\/h3>\n\n\n\n

Navigate to WordPress Dashboard > JetFormBuilder > Add New<\/em><\/strong>. Give a title to the form and leave the default Hidden Field<\/strong><\/a> block settings.<\/p>\n\n\n\n

Click on the \u201cToggle block inserter<\/strong>\u201d button and place the Select<\/strong><\/a>, Radio<\/strong><\/a>, or Checkbox<\/strong><\/a> field to display the parent items in the form. Be aware that the Radio<\/strong> and Select<\/strong> show only one related item, and it suits the \u201cOne to One\u201d or \u201cOne to Many\u201d relation type, and the Checkbox<\/strong> shows one or more items, and it matches the \u201cMany to Many\u201d or \u201cOne to Many\u201d relation type.<\/p>\n\n\n\n

For example, we add the Radio Field<\/strong><\/a> block because all posts can have only one parent in our \u201cOne to Many\u201d relation.<\/p>\n\n\n\n

Select the \u201cPosts\u201d as the source in the Fill Options From<\/strong> field and define the needed Post Type<\/strong>. As we want to select the related parent for the relationship \u201cCountry > Tours,\u201d we have chosen the \u201cCountry\u201d Post Type<\/strong>.<\/p>\n\n\n\n

In the Block General<\/strong> settings, type the Field Label<\/strong> and change the Form field name<\/strong>.<\/p>\n\n\n\n\"radio\n\n\n\n

Press the \u201cDynamic tags\u201d<\/strong> button in the Default Value<\/strong> field to open the pop-up.<\/p>\n\n\n\n

Pick the \u201cRelated Items\u201d option in the Source<\/strong> field, the name of the needed Relation<\/strong>, the \u201cParent object\u201d option in the From Object <\/strong>field, and \u201cCurrent Object ID\u201d in the Initial Object ID From <\/strong>field (as we want to place the form to the single page). Push the \u201cUpdate\u201d <\/strong>button.<\/p>\n\n\n\n\"edit\n\n\n\n

Move to the JetForm<\/strong> settings and the Post Submit Actions<\/strong> tab. Select the \u201cConnect Relation Items\u201d option and click on the pencil-shaped icon to edit the action.<\/p>\n\n\n\n\"connect\n\n\n\n

In the new pop-up window, select the needed Relation<\/strong>. As the Parent Item ID<\/strong>, choose the label of the created field for the related items (the Radio Field<\/strong> in our case). Pick the name of the Hidden Field<\/strong> (with the default \u201cCurrent Post ID\u201d option) as the Child Item ID<\/strong>. Since it\u2019s needed to display the parent object in the form, choose the \u201cWe updating parent items for the child object\u201d option in the Update Context <\/strong>field. In the How to Store New Items<\/strong> field, pick the \u201cDisconnect selected items\u201d option.<\/p>\n\n\n\n\"edit<\/figure>\n\n\n\n

Hit the \u201cUpdate\u201d<\/strong> button and publish or update the form to save the changes when you finish editing fields and actions.<\/p>\n\n\n\n

Place the form on the Single page template<\/h3>\n\n\n\n

Move to Crocoblock > Theme Builder <\/em><\/strong>and choose the single body template of the children, click on three dots, and hit the \u201cEdit content\u201d<\/strong> button. Also, you can edit the needed header, by following the Crocoblock > Theme Templates <\/em><\/strong>path.<\/p>\n\n\n\n\"edit\n\n\n\n

In the Elementor or Gutenberg editor, place the JetForm <\/strong>widget or block to the single template. Choose the needed form in the drop-down menu and customize other settings according to your needs. We recommend picking the \u201cPage Reload\u201d Submit Type<\/strong> to display all changes on the page after the form submission. After you finish, hit the \u201cUpdate<\/strong>\u201d <\/strong>button.<\/p>\n\n\n\n\"jetform\n\n\n\n

Proceed to the child object on the front end. For that, you can go to the child post type and click to view one of the posts.<\/p>\n\n\n\n\"child\n\n\n\n

On the front end, just hit the \u201cSubmit<\/strong>\u201d <\/strong>button in the form.<\/p>\n\n\n\n\"form\n\n\n\n

After the page reloading, you can see that all related items have been disconnected automatically.<\/p>\n\n\n\n\"form\n\n\n\n

You can also check on the backend by editing the post whether child items have been disconnected.<\/p>\n\n\n\n\"child\n<\/div><\/div>\n\n\n\n

That\u2019s all. Now you know how to disconnect related items via the JetFormBuilder <\/em>form from the front end.<\/p>\n","protected":false},"excerpt":{"rendered":"

This tutorial will teach you how to disconnect WordPress relation items via the JetFormBuilder forms. This JetEngine feature allows you to disconnect related items from the front end.<\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[399],"yoast_head":"\nHow to Disconnect Related Items from the Front End via Form | Crocoblock<\/title>\n<meta name=\"description\" content=\"This tutorial will teach you how to disconnect WordPress relation items via the JetFormBuilder forms. This JetEngine feature allows you to disconnect related items from the front end.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-disconnect-related-items-from-the-front-end-via-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Disconnect Related Items from the Front End via Form | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"This tutorial will teach you how to disconnect WordPress relation items via the JetFormBuilder forms. This JetEngine feature allows you to disconnect related items from the front end.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-disconnect-related-items-from-the-front-end-via-form\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-11T16:44:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/hidden-field-2-1024x605.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-disconnect-related-items-from-the-front-end-via-form\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-disconnect-related-items-from-the-front-end-via-form\/\",\"name\":\"How to Disconnect Related Items from the Front End via Form | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2022-11-04T21:16:04+00:00\",\"dateModified\":\"2023-12-11T16:44:38+00:00\",\"description\":\"This tutorial will teach you how to disconnect WordPress relation items via the JetFormBuilder forms. This JetEngine feature allows you to disconnect related items from the front end.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-disconnect-related-items-from-the-front-end-via-form\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-disconnect-related-items-from-the-front-end-via-form\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-disconnect-related-items-from-the-front-end-via-form\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Disconnect Related Items from the Front End via Form\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Disconnect Related Items from the Front End via Form | Crocoblock","description":"This tutorial will teach you how to disconnect WordPress relation items via the JetFormBuilder forms. This JetEngine feature allows you to disconnect related items from the front end.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-disconnect-related-items-from-the-front-end-via-form\/","og_locale":"en_US","og_type":"article","og_title":"How to Disconnect Related Items from the Front End via Form | Crocoblock","og_description":"This tutorial will teach you how to disconnect WordPress relation items via the JetFormBuilder forms. This JetEngine feature allows you to disconnect related items from the front end.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-disconnect-related-items-from-the-front-end-via-form\/","og_site_name":"Help Center","article_modified_time":"2023-12-11T16:44:38+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/hidden-field-2-1024x605.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-disconnect-related-items-from-the-front-end-via-form\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-disconnect-related-items-from-the-front-end-via-form\/","name":"How to Disconnect Related Items from the Front End via Form | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2022-11-04T21:16:04+00:00","dateModified":"2023-12-11T16:44:38+00:00","description":"This tutorial will teach you how to disconnect WordPress relation items via the JetFormBuilder forms. This JetEngine feature allows you to disconnect related items from the front end.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-disconnect-related-items-from-the-front-end-via-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-disconnect-related-items-from-the-front-end-via-form\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-disconnect-related-items-from-the-front-end-via-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Disconnect Related Items from the Front End via Form"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/30178"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=30178"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=30178"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=30178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}